みなさんこんにちは！
早速ですが今日は、ダレノカントリーがお仕事として行なっているWebサイト制作の仕事を少し体験してみましょう。
この体験の流れは次のようになっています。
- PCの基本操作を少し練習する
- タイピングを体験する
- Webサイトがどのように作られているかを知る
- 簡単なHTMLを書いてページを表示してみる
もちろん、いきなりすべて完璧にできる必要はありません。
「ここではこんなことができるんだ」と体験できればOKです！
まずはPC操作に慣れてみましょう
Web制作の仕事ではほとんどがPCを使って作業をします。
まずは基本的なPC操作を少し体験してみましょう。
今回は次の3つを練習します。
- コピー
- 貼り付け
- 保存
この3つは、Web制作の仕事でもよく使う操作です。
コピーと貼り付け
コピーとは、文字を複製する操作です。
貼り付けは、コピーした内容を別の場所に入れる操作です。
コピーと貼り付けの手順
- 次の文字をドラッグして選択します
※ドラッグとは、マウスをクリックしたまま動かして範囲を選択する操作のことです
Web制作体験
- キーボードで次のキーを押します
Ctrl ＋ C
これでコピーができました。
- メモ帳を開きます
- メモ帳の画面で次のキーを押します
Ctrl ＋ V
すると、コピーした文字が貼り付けられます。
この操作は、文章を書くときやコードを書くときによく使います。いわゆるコピペと呼ばれる操作ですね！
ファイルを保存してみる
次は「保存」を体験してみます。
保存とは、作ったデータをPCに記録することです。
ファイル保存の手順
- さきほどテキストをコピーしたメモ帳を開きます
- さきほど貼り付けした内容を削除します
- 次の文章を入力します
※コピペでも手入力でもOKです
こんにちは
Web制作体験です
- キーボードで次のキーを押します
Ctrl ＋ S
すると保存画面が表示されます。保存場所は「デスクトップ」を選択してください。
- ファイル名を次のように入力します。
my_text.txt
- 保存ボタンを押します。
これでファイルが保存されました。
コピペやファイルの保存などの操作はマウスでいちいちボタンを探してクリック…していると時間がかかってしまいます。
Web制作のお仕事はほとんどキーボードに手を置いていることが多いので、ほとんどの人がキーボードで操作できるショートカットを活用して効率よく作業しています。
タイピングを体験してみましょう
次にタイピングを体験していきましょう。
タイピングとは、キーボードで文字を入力することです。
Web制作では、
- 文章を書く
- コードを書く
ときにタイピングを使います。
ほとんどの業務がタイピングによるお仕事になりますので、本格的にお仕事を始める前にタイピングが問題なくできるようになることが、お仕事を始めるにあたっての一つの目標となります。
今回はタイピングの練習サイト「寿司打」を使ってみましょう。
指導員の方の案内にしたがって、タイピング練習を5〜10分ほど体験してみてください。
最初は「お手軽コース」から始めましょう！
ポイントは次の2つです。
- 速く打とうとしなくて大丈夫
- ゆっくり正確に打つこと
タイピングは1日にして上達するわけではなく、続けていくと少しずつ慣れていく訓練の積み重ねです。最終的には手元を見ずにタイピングする「ブラインドタッチ」ができるのが理想ですが、まずは日頃からトレーニングすることが上達の秘訣です！
Webサイトはどうやって作られている？
普段、みなさんはインターネットを使っていろいろなWebサイトを見ていると思います。
例えば
- お店のホームページ
- ニュースサイト
- ブログ
こうしたWebサイトは、実はすべて「コード」という文章で作られています。
例えばコードは次のようなものです。
<h1>タイトル</h1>
<p>文章</p>これは「HTML」という言語です。HTMLは、Webサイトの文章や構造を作るための言語です。
今日はこのHTMLを使った簡単なWebサイト制作を少しだけ体験してみます。
その前に、自分の好きなWebサイトをひとつ探して実際のコードを見てみましょう。
Webサイトのコードを見る
ブラウザ「Google Chrome」を開いて、好きなWebサイトをひとつ探してみてください。
もし探すのが難しければダレノカントリーのWebサイトを見てみましょう。
https://darenocountry.com/
サイトの表示ができたらどこでも良いので右クリックをして「ページのソースを表示」という項目を選びます。
＜画像を入れる＞
いきなりたくさんのコードが表示されてびっくりしたかと思いますが、これが実際のWebサイトに使われているHTMLのコードです。
もちろんよくわからなくて大丈夫です！
実際にWebサイト制作のお仕事をするときは、このHTMLを書いてWebサイトを作ったり、すでに出来上がっているHTMLを読み取って必要な部分を修正する、などの業務を行います。
HTMLを書いてみましょう
それでは最後に簡単なHTMLを書いて、実際にGoogle Chromeで表示してみましょう。
難しく考えなくて大丈夫です。
まずは次の手順に従ってそのまま書いてみましょう。困ったことがあれば遠慮なく指導員に聞いてくださいね。
STEP1 メモ帳を開く
Windowsのスタートメニューからメモ帳を開きます。
先ほどショートカットの操作で使ったファイルは閉じて、新しくファイルを作成してください。
STEP2 次のコードを書きます
次のコードをメモ帳に入力します。
<h1>わたしのページ</h1>
<p>こんにちは！</p>ゆっくりで構いませんのでなるべく手入力でタイピングしてみましょう。
これはとても簡単な内容ですが、れっきとしたWebページのコードになります。
ちなみに、
<h1> は「大きなタイトル」
<p> は「文章」
を表しています。これらはタグと呼ばれており、用意されているさまざまなタグを使いながらWebサイトの内容を書いています。
STEP3 ファイルを保存します
入力ができたらファイルを次の名前で保存します。
test.html
ここがとても大事なポイントです！
ファイル名の最後の部分を.txtではなく
.html
にして保存してください。
STEP4 ブラウザで開いてみる
保存したファイルをダブルクリックします。
するとブラウザが開いて、次のようなページが表示されます。
これが表示できたら成功です。自分で書いたコードがWebページとして表示されました。
もしうまく表示されないとき
うまく表示されないときは、次の点を確認してみましょう。
ケース1. ファイル名がちがう
ファイル名
ファイル名が
test.html
になっているか確認します。
もし
test.html.txt
になっている場合は拡張子を修正します。
ケース2. 記号が全角になっていないか
コーディングに使う記号はすべて半角で入力する必要があります。
< > /
全角になっていると正しく表示されません。
今日のまとめ
今日は次のことを体験しました。
- PCの基本操作
- タイピング
- HTMLを書く体験
- 作ったWebページを表示する体験
Web制作の仕事では、このような作業を組み合わせてWebサイトを作っています。
明日は、今日作ったHTMLを使って簡単なお店の紹介ページを作ってみます。
今日打ち込んだHTMLの内容をもう少し増やして画像を入れてみるなど、さらにWeb制作の仕事を体験していきましょう！