【HTML】まずはこれだけ！HTMLを書いてみよう Lv.３「続・タグの役割」
前回は、<h1>タグをご紹介して、タグの役割について簡単にご紹介しました。
今回は実際のWebページからHTMLがどのように書かれているかイメージをつけていきましょう！
わかりやすく解説します。
ペルソナ
- プログラミングをこれから勉強しようとしている方
- 初めてプログラミングを書こうと思っている方
- Webページを作ってみたい方
内容
HTMLの文章の構造化を理解する。
今回は作業がなく読み物になってしまいますがしっかり理解しましょう！
Key Word
- 文章の構造化
- ブロック
- divタグ
- 入れ子構造
目次
1.文章の構造化をイメージしよう！
・divタグ
・参考
２.まとめ
Contents
1.文章の構造化をイメージしよう！
前回は<h1>タグを使ってタグの使い方、役割をお伝えしました。
では実際のWebページは実際にどのようにタグが使われているのかイメージしましょう。先にイメージをつかむことでよりタグの役割を理解できると思います。
ではせっかくなのでQiitaのトップページを例にしてみましょう！
これがQiitaのトップページですね。繰り返しお伝えしていますがHTMLの役割は文章の構造化です。文章に見出し・リスト・検索ボックス・リンクなどの役割を付与して、ブロックで分けています。
こうするとわかりやすいですね。
Webページが赤い枠や水色の枠、紫の枠で囲まれたブロックの集まりだということがわかると思います。
そして特徴的なのは、大きなブロックの中に小さなブロック、さらにその中にさらに小さなブロックがあります。この構造のことを入れ子構造と言います。（この入れ子という言葉は結構使いますので覚えておいてください）
HTMLはこのようにブロックを作り、Webページを組み立てるものということがイメージできたでしょうか？
では実際にこれをどうやって書くのか？ですよね？
ここからは実際のタグをご紹介していきます。
divタグ
ブロックを作る一番オーソドックスなタグは<div>タグでしょう。
このタグの役割はまさに、ブロックを作るです。
例としてQiitaのトップページのヘッダー部分をdivタグで表して見ます。
急になにやら文字がいっぱい出てきましたね。
順を追って説明しますね。
次の画像を見てください。
先ほどのQiitaのトップページのヘッダー部分のみを抽出してブロック分けしています（右の画像）。
それに対するHTMLのコードが左の画像です。
先ほどブロックは入れ子構造になるとお伝えしました。それをコードで表現すると
<div><div>Hello World</div></div>
このようになります。
一番外側の<div></div>の中に<div>Hello World</div>が入れ子になっているということを表しています。この時今の例のように一行で書くと、中身が短い文章であれば問題ありませんが、長くなればなるほど、構造がわかりづらくなります。そのため、基本的に入れ子構造になる場合は、
<div>
<div>Hello World</div>
</div>
というように表記します。ポイントは改行とインデントです。入れ子になっているものは改行した上でその上位のブロック（親と言う）よりもインデントを深くします。
これで一目で「外側のdivタグの中に<div>Hello World</div>が入れ子になっている」ことがわかりますね。
ではこれを押さえた上で、もう一度Qiitaのヘッダー部分を見てみましょう。
右の図で赤色の大きな枠は左の図の一番外側のdivタグで表しています。
その内側が紫の枠、青い枠、ピンクの枠となっていきます。そしてピンクの枠は青い枠の中の同じ階層のブロックなのでコードで表すときは同じインデントということも見て取れると思います。
参考
お気づきだと思いますが、
<div class = "header"> 〜省略〜
</div>
のようにタグの中に**「class = "header"」という新しいコードが出てきましたね。
これは後々ご紹介しますが文字通り「クラス」**と言って、そのタグをラベリングするものという認識で今は結構です。
今回の例で言えば、一番外側のクラスは「header」その一つ内側には「内容」を表す「contents」、そしてその中身をさらに「content-left」と「content-right」の左右でグループを分け、その中にそれぞれの機能を表すクラス名を与えています。
そう見るとさらにブロックで分けることのイメージがつきやすいのではないでしょうか。
そして今回はブロックのイメージをつけてもらうためにdivタグのみを使っていますが、厳密にはこのdivタグの中にさらにタグを追加していきます。divタグはあくまで文章の構造化をするためのブロックを作るという役割です。実際に文章を作ったり、リンクを貼ったりするタグは別に用意されています。
今は難しく考えず、
・HTMLとは文章の構造化をする言語なんだ
・そしてそのブロックを作るのは主にdivタグなんだ
というイメージと、入れ子構造についての理解をすればOKです！！
２.まとめ
今回は少し座学っぽくなってしまいごめんなさい。
ただHTMLを理解する上で非常に重要なことなのでしっかり押さえましょう！
今回のポイントは
ブロック・入れ子構造でした。
- HTMLの「文章の構造化」のイメージ
- 構造化とはブロックをグループに分けることで、多くの場合入れ子構造になっている。
ということが理解できたでしょうか？
今回はHTMLを理解する上で避けては通れない知識の学習をしました。
しかし、実際に手を動かさなければ100%理解することは難しいと思います。
学習を進めていくうちに絶対に覚えられますので、今は理解度３０％くらいでも大丈夫です。
「ふーん。そうなんだ」くらいで進みましょう！
次回以降は引き続きQiitaのページを使って実際にHTMLを一緒に書いてきます。
今回も最後までありがとうございました！！