みなさんこんにちは！
早速ですが今日は、ダレノカントリーがお仕事として行なっているWebサイト制作の仕事を少し体験してみましょう。
この体験の流れは次のようになっています。
- PCの基本操作を少し練習する
- タイピングを体験する
- Webサイトがどのように作られているかを知る
- 簡単なHTMLを書いてページを表示してみる
もちろん、いきなりすべて完璧にできる必要はありません。
「ここではこんなことができるんだ」と体験できればOKです！
タイピングを体験してみましょう
まずは簡単なゲームを通じてタイピングを体験していきましょう。
タイピングとは、キーボードで文字を入力することです。
Web制作では、
- 文章を書く
- コードを書く
ときにタイピングを使います。
ほとんどの業務がタイピングによるお仕事になりますので、本格的にお仕事を始める前にタイピングが問題なくできるようになることが、お仕事を始めるにあたっての一つの目標となります。
今回はタイピングの練習サイト「寿司打」を使ってみましょう。
指導員の方の案内にしたがって、タイピング練習を5〜10分ほど体験してみてください。
最初は「お手軽コース」から始めましょう！
ポイントは次の2つです。
- 速く打とうとしなくて大丈夫
- ゆっくり正確に打つこと
タイピングは1日にして上達するわけではなく、続けていくと少しずつ慣れていく訓練の積み重ねです。最終的には手元を見ずにタイピングする「ブラインドタッチ」ができるのが理想ですが、まずは日頃からトレーニングすることが上達の秘訣です！
PC操作に慣れてみましょう
ここからはもう少し実践的な内容に入っていきましょう。
Web制作の仕事ではほとんどがPCを使って作業をしますので、PC操作のスキルは必須です。
まずは基本的なPC操作を少し体験してみましょう。
今回は次の3つを練習します。
- コピー
- 貼り付け
- 保存
この3つは、Web制作の仕事でもよく使う操作ですので覚えておくと良いでしょう。
コピーと貼り付け
コピーとは、文字を複製する操作です。
貼り付けは、コピーした内容を別の場所に入れる操作です。
コピーと貼り付けの手順
- 次の文字をドラッグして選択します
※ドラッグとは、マウスをクリックしたまま動かして範囲を選択する操作のことです
Web制作体験
- キーボードで次のキーを押します
Ctrl ＋ C
これで文字のコピーができました。
- 次にWindowsのスタートメニューからメモ帳を開きます
スタートメニューとは、タスクバー（画面の下にある横長の領域）にあるWindowsのロゴマークをクリックすると開くメニューです。
- 「メモ帳」と書かれたアイコンをクリックしてアプリを開いたら、次のキーを押します
Ctrl ＋ V
すると、さきほどコピーした文字が貼り付けられます。
この操作は、文章を書くときやコードを書くときによく使います。いわゆるコピペと呼ばれる操作ですね！
ファイルを保存してみる
次は「保存」を体験してみます。
保存とは、作ったデータをPCに記録することです。
ファイル保存の手順
- キーボードで次のキーを押します
Ctrl ＋ S
すると保存画面が表示されます。
- 保存場所を指定する画面が出るので「デスクトップ」と書かれている場所を選びます。
- ファイル名を次のように入力します
my_text.txt
- 右下の保存ボタンを押します。
これでファイルが保存されました。
コピペやファイルの保存などの操作はマウスでいちいちボタンを探してクリック…していると時間がかかってしまいます。
Web制作のお仕事はほとんどキーボードに手を置いていることが多いので、ほとんどの人がキーボードで操作できるショートカットを活用して効率よく作業しています。
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> は「文章」
を表しています。これらはHTMLのタグと呼ばれており、用意されているさまざまなタグを使いながらWebサイトの内容を書いています。
STEP3 ファイルを保存します
入力ができたらファイルを次の名前で保存します。ショートカットの Ctrl + S で保存です。
もし保存画面が出てこない時はCtrl + Shift + Sで保存してみましょう。
保存場所は先ほどと同じく「デスクトップ」にします。保存画面の上部に「デスクトップ」と出ていればそのままでOKです。違う場合は、先ほどと同様に左側の一覧からデスクトップを選びましょう。
次がとても大事なポイントです！
ファイル名を入力しますが、最後の部分を.txtではなく
.html
にして保存してください。
test.html
STEP4 ブラウザで開いてみる
保存したファイルを、Windowsのエクスプローラーというアプリを使って探します。
タスクバー（画面下の横長の部分）で黄色いファイルのようなアイコンをクリックしましょう。
エクスプローラーは次のような画面のアプリです。パソコンに保存されているファイルやフォルダを探して開いたり、コピー・移動・削除させることができます。
「デスクトップ」と書かれた場所を選び、さきほど保存した「test.html」ファイルを開いてみましょう。
するとブラウザが起動して、次のようなWebページが表示されるはずです。
コードではなく文字が表示されれば成功です！自分で書いたコードがWebページとして表示されました。
もしうまく表示されないとき
うまく表示されないときは、次の点を確認してみましょう。
ケース1. ファイル名がちがう
ファイル名
ファイル名が
test.html
になっているか確認します。
もし
test.html.txt
になっている場合は拡張子を修正します。
ケース2. 記号が全角になっていないか
コーディングに使う記号はすべて半角で入力する必要があります。
< > /
全角になっていると正しく表示されません。
今日のまとめ
今日は次のことを体験しました。
- PCの基本操作
- タイピング
- HTMLを書く体験
- 作ったWebページを表示する体験
Web制作の仕事では、このような作業を組み合わせてWebサイトを作っています。
明日は、今日作ったHTMLを使って簡単なお店の紹介ページを作ってみます。
今日打ち込んだHTMLの内容をもう少し増やして画像を入れてみるなど、さらにWeb制作の仕事を体験していきましょう！