divタグって何？
前の記事で、次のような事について触れたのを覚えていますか？
この記事ですね▼
実際のHPには、このように結構な量のdivタグが使われています。
divタグのdivは「division（分割）」という意味です。
divタグの特徴は「特に意味を持たないタグ」という点です。
今まで見てきた、
- h1タグ：見出し
- pタグ：文章
- aタグ：リンク
- liタグ：リスト
これらは、「何かしらの能力を持っているタグ」です。
それに対してdivタグは、意味を持っていません。
意味を持っていないタグがなぜ便利なのでしょうか…？
それは、実際に使ってみるとよくわかります。
意味を持たないdivタグが便利な理由
次のような形を作ってみてください。
考え方
幅（width）：100px
高さ（height）：100px
背景色（background-color）：赤
とすれば、ブロックのような形が作れますよね。
しかし、問題です。
なんのタグを使いますか？
見出しでも文章でもないし、箇条書きでもない…
そんな時、divタグが活躍します。
コードで書くとこんな感じになります。
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
}一旦まとめ
- divタグは、特に意味を持っていないタグ
- 言い方を変えると、意味を持たなくてもいいものに使える
divタグを活用してみよう
こんなふうにdivタグを使う事が出来ます。
.wrapper {
width: 600px;
margin: 0 auto;
border: solid 1px black;
}
コードの解説
「見出し部分と、文章、リスト」全体をdivタグで囲って、
wrapperというクラスを付けます。
すると、そのwrapperで囲われているものを一気に操作する事が出来ます。
大きな箱（wrapper）に「見出し部分と、文章、リスト」を入れて箱（wrapper）ごと移動させる
というイメージです。
margin: 0 auto ➡ 中央寄せ
border: solid 1px black ➡ 枠線をつける（線の種類 太さ 色）
親子関係って何？
<body>
<div class="wrapper">
<h1>divタグの練習中です</h1>
<p>どんな特徴があるのか</p>
<ul>
<li>特に意味を持っていないタグ</li>
<li>divタグで囲った箇所をグループ化することができる</li>
<li>とにかく使える頻出のタグ</li>
</ul>
</div>
</body>このコードを見てみると、次のような構成になっています。
- 「wrapper」の中に「h1、p、ul」がある
- 「ul」の中に「li」がある
つまり、親子関係はこうなります。
- 親：wrapper
- 子：h1、p、ul
- 親：ul
- 子：li
この知識は、次の項目でも使っていくことになるので、
なんとなくでもイメージをつけておいてください。
まとめ
- divタグは得に能力を持っていないタグ
- divタグで囲むと、囲われた側は「子」となる
