divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。
CSSでレイアウト装飾するためには上記の違いを理解している必要があります。ここでは、インライン要素・ブロックレベル要素の説明と要素のブロックレベル・インラインの表示形式を変更する際に利用するCSS「display」をについて説明していきます。
ここでは、インライン要素とブロッックレベル要素の特性とdisplayプロパティの使い方を説明していきますね。
もくじ
ブロックレベル要素とインライン要素
<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。
h1タグやdivタグなどは、ブロックレベル要素で改行がつき縦に並ぶのに対して、aタグなどのインライン要素は要素同士で改行がつかず横に並ぶ性質を持っています。
(※注)ブロックレベル要素とインライン要素での分類方法ですが、HTML5からは新たに「カテゴリー」という新たな分類方法でより細かくジャンル分けされるようになりました。しかし簡略のためここではこれまでのブロックレベルとインラインでの分類で説明していきます。
代表的なブロックレベル要素とインライン要素
| 項目 | 主な要素 | 特徴 |
|---|---|---|
| ブロックレベル要素 |
|
|
| インライン要素 |
|
(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。 |
ブロックレベル要素について
ブロックレベル要素の特徴
ブロックレベル要素は各要素が一つのブロックで、以下のような特徴があります。
ブロックレベル要素の特徴
- 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
- 横幅や高さを指定できる
- 余白(margin,padding)が指定できる
代表的なブロックレベル要素
- div
- h1〜h6
- p
- ul,ol,li
- dl,dt,dd
- table
- form
- hr
- pre
- blockquote
■ブロックレベル要素 divタグを使った例
インライン要素について
インライン要素の特徴
インライン要素は要素が横並びになり高さや幅を設定できません。以下のような特徴があります。
インライン要素の特徴
- 要素の前後に改行が入らず、インライン要素同士横に並ぶ
- 横幅や高さを指定できない(※1)
- ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)
代表的なインライン要素
- a
- span
- b
- img(※)
- label
- input(※)
- select(※)
- textarea(※)
■インライン要素 aタグを使った例
[aタグ1]aタグはインライン要素です。[aタグ2]インライン要素は改行が入りません。[aタグ3]幅や高さの指定はできません。
補足1 インライン要素で一部例外の要素
imgタグ、textareaタグ、inputタグ、selectタグなどの一部のインライン要素は改行がつかず横並びになりますが、高さや幅・余白を設定することができるという性質を持っています。
補足2 インライン要素の余白について
インライン要素での余白設定については、性質が少し複雑で下記のような特徴があります。
インライン要素の余白
- marginの上下は効かない（左右は効く）
- paddingの上下左右効くが、他の要素の領域を考慮せず重なる
■■例. aタグで余白(pading,margin)を設定する
■何もしていない状態
■余白を設定した状態
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>こんにちは</title> <style media="screen"> </style> </head> <body> <p style="margin:0;background:pink">pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。</p> <a style="background:rgba(150,150,255,.5);margin:50px;">aタグ1です。aタグ1です。</a><a style="background:rgba(150,150,255,.5);padding:100px;">aタグ2です。aタグ2です。</a> <p style="margin:0;background:pink">pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。pタグです。</p> </body> </html> |
上記のようにインライン要素は外部余白marginは左右が効いていますが、上下は効いていません。
またpaddingで内側の余白を設定する事ができますが、他の要素の領域と重なってしまいます。
イメージ的には、ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当すると考えるとわかりやすいかもしれません。(箱やコンテナは高さや幅、余白が設定できるが、中身はぐちゃぐちゃになりやすく高さ幅余白が正しく指定できない)。
ブロックレベル要素とインライン要素のイメージ
表示に関するスタイル display
レイアウトを調整していく中で、インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てきたときにCSSで「display」を利用できます。
displayプロパティには主に以下のような設定があります。(他にも設定値はありますがここでは割愛します。)
| 項目 | 意味 | 備考 |
|---|---|---|
| display:inline | 指定した要素をインライン要素にする | 改行なくなり横並びにできる。 幅・高さ・上下余白を指定できない |
| display:block | 指定した要素をブロックレベル要素にする | 改行ができて縦並びになる。 幅・高さ・余白を指定できる |
| display:inline-block | 指定した要素をインラインとブロックレベルの中間の性質にする | インライン要素のように改行がつかず横並びになるが、 ブロックレベル要素のように幅・高さ・余白を指定できる |
| display:none | 指定した要素を非表示にする | |
| (補足) display:table-cell | テーブルtableタグのtd要素のようにする | |
| (補足) display:flex | 最新のレイアウト技法「フレキシブルボックス」。柔軟な横並び・均等な高さを実現できる。 | まだWebブラウザの対応状況に注意が必要 |
displayプロパティを利用したサンプル
ここでは、CSSのdisplayプロパティを利用したいくつかのサンプルをご紹介します。
ブロックレベルのli要素をinline-block指定して横並びにして幅を指定
■li要素に何もしていない(ブロックレベル)の状態 縦に並んでいる
■li要素にdisplay:inline-blockを設定した状態 横並びになる
■上記のソースコード
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 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> <style media="screen"> .menu a{ text-decoration: none; color: #000; } .menu li{ width: 150px; text-align: center; background: skyblue; display: inline-block; } </style> </head> <body> <h2>li要素を横並びにする</h2> <ul class="menu"> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">会社情報</a></li> <li><a href="#">お客様の声</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </body> </html> |
(※注)ここでliに対してdisplay:inlineにすると幅や高さを設定できなくなるためご注意ください。
display:blockでa要素に幅や高さ・余白を指定する
aタグはもともとインライン要素のため高さ幅を設定できません。そこで下記例ではaタグに対してdisplay:blockを設定して高さ幅をもたせて青色の部分を押したらリンクが押せるようにしています。
■上記のソースコード
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 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> <style media="screen"> .menu a{ text-decoration: none; color: #000; display: block; } .menu li{ width: 150px; text-align: center; background: skyblue; display: inline-block; } </style> </head> <body> <h2>li要素を横並びにする</h2> <ul class="menu"> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">会社情報</a></li> <li><a href="#">お客様の声</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </body> </html> |
補足 li要素の隙間をなくす
li要素をインラインブロックに変えたことによりli要素間で隙間ができています。
これを下記のように隙間をなくす方法をご紹介します。
下記のようにli要素を詰めて記載すると隙間は無くなります。
しかし、上記は視認性が悪くなるため、ここでは例えばul要素のフォントサイズを0にli要素のフォントサイズを16px(通常の値)などに設定して隙間をなくすことができます。
■上記のソースコード
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 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> <style media="screen"> .menu a{ text-decoration: none; color: #000; } .menu li{ width: 150px; text-align: center; background: skyblue; display: inline-block; font-size: 16px; } .menu{ font-size: 0px; } </style> </head> <body> <h2>li要素を横並びにする</h2> <ul class="menu"> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">会社情報</a></li> <li><a href="#">お客様の声</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </body> </html> |
まとめ
まとめです。今回は、ブロックレベル要素とインライン要素の性質と違いについて例を交えながら説明しました。
また、displayプロパティによるブロックレベル要素とインライン要素の切り替え方について説明しました。
今回は以上になります。最後までご覧いただきありがとうございました。
弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。
