このレッスンで学ぶこと
- URL を開いてから画面が出るまでに何が起きているか
- HTML と CSS の役割の違い
- ページのソースとデベロッパーツールの見方
ページはファイルでできている
ブラウザで URL を開くと、裏ではこんなことが起きています。
- ブラウザが、URL の先にあるサーバーに「ページをください」と頼む
- サーバーが、HTML ファイルを送り返す
- ブラウザが HTML を読み、その中で指定された CSS や画像もサーバーに頼む
- ブラウザが、それらを組み立てて画面に表示する
Web ページの正体は、ただのテキストファイルと画像ファイルです。研究室サイトの場合、サーバーは GitHub Pages で、ファイルは GitHub のリポジトリに置かれています。
HTML は構造、CSS は見た目
ページを作るファイルには役割分担があります。
| ファイル | 役割 | たとえると |
|---|---|---|
| HTML | 何が書いてあるか（見出し、文章、画像、リンク） | 家の骨組みと部屋割り |
| CSS | どう見せるか（色、大きさ、配置） | 壁紙や家具の配置 |
| JavaScript | 動きをつける（クリックで開くなど） | 電気や水道の設備 |
このチュートリアルでは HTML と CSS を扱います。JavaScript は今回は使いません。
同じ HTML でも、CSS を変えるとまったく違う見た目になります。逆に、CSS だけでは中身は書けません。この分担を意識すると、どのファイルを直せばいいかが分かるようになります。
やってみよう: ページの中をのぞく
ブラウザ（Chrome か Safari）で 今の研究室サイト を開いてください。
-
ページのソースを見る:
⌘ + ⌥ + Uを押します。ブラウザが受け取った HTML がそのまま表示されます。村井純を⌘ + Fで探してみてください。 -
デベロッパーツールを開く: ページに戻り、
⌘ + ⌥ + Iを押します。Safari の場合は、先に「設定 → 詳細 → Web デベロッパ用の機能を表示」をオンにしてください。 -
要素を選ぶ: デベロッパーツール左上の矢印のアイコンをクリックしてから、ページ上のメンバーの名前をクリックします。その名前に対応する HTML の行が光ります。
-
書き換えてみる: 光った行の名前の部分をダブルクリックして、自分の名前に書き換えて Enter。画面の表示が変わります。
確認テスト
メンバーの名前の文字の色を変えたい。直すのはどちら？
- HTML
- CSS
答えを見る
2。色は見た目なので CSS です。名前そのものを変えたいなら HTML です。
デベロッパーツールで名前を書き換えました。他の人のブラウザではどう見える？
- 書き換えた名前が見える
- 元の名前のまま
答えを見る
2。変わったのは自分のブラウザの画面だけです。サーバーのファイルを変えるには、リポジトリのファイルを編集して push する必要があります。
チェックリスト
- ページのソースで
村井純を見つけた - デベロッパーツールで名前を書き換えた
- HTML と CSS の役割の違いを自分の言葉で説明できる