HTMLの要素についてもう少し掘り下げていきたいと思います。
実はHTMLは例外はありますが概ねインライン要素かブロック要素に分けられます。
インラインは範囲を指定する⇒機能を持たせる
簡単に説明するとインライン要素は基本的に文章中に使用されます。（改行なし）
spanタグのようにとりあえず文章を範囲指定⇒CSSで装飾。
aタグのようにとりあえず文章を範囲指定⇒リンク先を書いてリンクを貼る。
などのように、文章のどこに機能を持たせるのか指定するタグと言えます。
皆さん試験勉強の時、教科書に蛍光マーカーで重要っぽいところに
線を引きますよね？
インライン要素ああいうイメージです。
ブロックは一行から数行を一気に範囲指定する
さっきの試験勉強で例えると、、、。
試験勉強をイメージしましょう。今度は、マーカーから赤ペンに持ち替えましょう。
重要なところを見つけました。先ほどは文章にマーカーでラインを引きましたね。
今度は文字に触れず重要と思われる数行を一気に赤ペンで囲いました。
これも試験勉強でよくやるやつですね。
ブロック要素は枠組みのイメージです。段落とか見出しとか
文章ではなく枠組みを示します。（改行あり）
両者の大きな違いとして、ブロック要素はブロック自体の幅と高さを指定することができます。
一方インライン要素は通常、幅と高さを指定することができません。
- インライン要素
spanやaなど、文章中（ライン）に現れる要素 - ブロック要素
h1、pなど、文章の枠組みになる要素
ブロック要素は文章の枠組みのようなものなので
その中にインライン要素を入れたりブロック要素を組み込むことができます。
逆にインライン要素の中にブロック要素を入れることはできません。
今回は前回利用したspanとブロック要素構成するdivタグを利用します。
divはspanと同じように特に意味を持ちませんが
ブロック要素を構成することができます。
それではdivの使い方を見て見ましょう。
サンプル1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="style.css"> <title>1</title> </head> <body> divサンプル1 <!-- divのサンプル --> <div style="background-color:red;"> div1 </div> <div style="background-color:pink;"> div2 </div> <div style="background-color:blue;"> div3 </div> </body> </html> |
今回作成したcssは次のようになります。
marginというのは要素の外側の余白を指定する部分です。
paddingは要素の内側の余白を指定します。
今回は確認しやすいようにdivの内側と外側に3pxの余白を入れています。
|
1 2 3 4 |
div{ margin:3px; padding:3px; } |
brを入れていないのにdivの次のdivが改行されたのが
確認できると思います。
サンプルの最初と最後にdiv０とdiv4を入れてみましょう。
divの入れ子〜ブロックの中にブロックを入れるには
次はdiv(ブロック要素)の中にさらにdiv（ブロック要素）を入れる
（入れ子と言います）の例です。
CSSは先ほどと同じ内容ですがdivの書き方が異なっています。
divの開始タグと終了タグの中にさらにdivの開始タグと終了タグを入れています。
表示の結果画像かでも、divの中にさらにdivがあることが
確認できると思います。
サンプル２
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- divの入れ子 --> <div style="background-color:red"> div1 <div style="background-color:pink"> div2 <div style="background-color:blue"> div3 </div> </div> </div> <br> |
一番外側にdiv0、一番内側にdiv4を追加してください。
インライン要素
続いてインライン要素です(span)
これは前回説明しましたね。
サンプル３
|
1 2 3 4 5 6 7 8 9 10 11 |
<span style="background-color:red;width:100px"> span1 </span> <span style="background-color:pink"> span2 </span> <span style="background-color:blue"> span3 </span> |
CSS
|
1 2 3 4 |
span{ margin:3px; padding:3px; } |
最初のdivの時と同じです。
セレクタの部分がdivからspanになっただけですね。
divと異なり、改行されないことがわかりますね。
そして、枠のサイズが画面いっぱいにならず、背景が
文字の幅になっていることがわかると思います。
span1の前にspan0, span3の後にspan4を追加してください。
インライン要素の入れ子〜マーカーの中にマーカーを引く
次にインライン要素を入れ子にします。
サンプル4
|
1 2 3 4 5 6 7 8 9 |
<span style="background-color:red;"> span1 <span style="background-color:pink"> span2 <span style="background-color:blue"> span3 </span> </span> </span> |
divのように改行されないため真横に重なっていく
ようになりますね。
一番右側にspan0、一番内側（span3の中）にspan4を追加してください。
ブロック要素にインライン要素を入れ子
最後にブロック要素(div)にインライン要素(span)を入れてみます
サンプル5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div style="background-color:red"> div <span style="background-color:white"> span1 </span> <span style="background-color:pink"> span2 </span> <span style="background-color:blue"> span3 </span> </div> |
CSSは次の通りです
spnaとdiv両方に同じ内容のCSSを設定しています。
|
1 2 3 4 5 6 7 8 9 |
span{ margin:3px; padding:3px; } div{ margin:3px; padding:3px; } |
今はどのタグがブロック、インラインかは厳密に覚える必要は有りませんが、
今後WEBサイトのレイアウトをしていく中で必要になる概念なので、
タグにはインライン要素とブロック要素があるということを
しっかり覚えておいてください。
まとめ
- HTMLにはインライン要素とブロック要素がある
- インライン要素は文中で利用される
- ブロック要素は文章の段組に利用される
- ブロック要素の中にブロック、インライン要素
を入れ子にすることができる。 - インライン要素同士で入れ子にすることができる
- インライン要素の中にブロック要素を入れることはできない
インライン要素の中にブロック要素を入れてどうなるか
確認してみよう。
次の画像は6つの要素から作成されています。
同じような構成をHTMLで作成してください。
