HTML ブロックレベルとインライン 要素の意味と違い【CSS display block inline】
2016年8月18日 HTML-CSS
今回は、HTMLのブロックレベル要素とインライン要素の意味と違い、およびCSSのdisplayプロパティを説明します。
displayを使ってブロックレベル要素とインライン要素の変換が可能で、２つの違いとdisplayを使ってレイアウトの細かい調整がしやすくなります。
もくじ
以下は本記事のもくじです。
それでは説明に移っていきます。
スポンサーリンク
1. ブロックレベル要素とインライン要素
1-1. 概要
<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかにジャンル分けすることができます。
ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当します。
私のイメージですが、ブロックレベル要素はお弁当箱(およびその仕切り)で、インライン要素はお弁当箱の中に入った食べ物に相当すると考えると理解しやすいと思います。
ブロックレベル要素とインライン要素のイメージ
このブロックレベル要素とインライン要素には、以下のような違いがあります。
■ブロック要素
- 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
- 横幅や高さを指定できる
- 余白(margin,padding)が指定できる
■インライン要素
- 要素の前後に改行が入らず、インライン要素同士横に並ぶ
- 横幅や高さを指定できない
- 余白(margin,padding)が一部指定できない
※image,textarea,inputなど一部例外要素を除きます。
1-2. ブロックレベル要素
前述の通り、ブロックレベル要素は各要素が一つのブロック（塊）で、以下のような特徴があります。
- 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
- 横幅や高さを指定できる
- 余白(margin,padding)が指定できる
よく使われるものを例に挙げると以下のようなものがあります。
- <div>
- <h1>〜<h6>
- <p>
- <ul>,<ol>,<li>
- <table>
- <fieldset>
- <form>
etc…
先ほどの特徴を実際に例を挙げて説明してみます。
例1. pタグを使った例
[pタグ1]pタグはブロック要素です。
[pタグ2]ブロック要素は改行が入ります。
■HTML文
|
1 2 |
<p style="border: black solid 1px;">[pタグ1]pタグはブロック要素です。</p> <p style="border: black solid 1px;">[pタグ2]ブロック要素は改行が入ります。</p> |
例2. divタグを使った例
■HTML文
|
1 2 3 4 5 |
<div style="border: blue solid 2px;">[divタグ1]divタグはブロック要素です。</div> <div style="border: blue solid 2px;">[divタグ2]もちろん改行が入ります。</div> <div style="border: blue solid 2px; width: 300px; height: 150px;">[divタグ3]高さと幅も指定できます。</div> <div style="border: blue solid 2px; padding: 30px;">[div4]余白paddingの設定もできます。</div> <div style="border: blue solid 2px; margin: 30px;">[div5]余白marginの設定もできます。</div> |
改行されてブロック要素同士は縦並びすること、幅や高さを指定できること、余白を設定できることを確認しました。
1-3. インライン要素
次にインライン要素について説明します。インライン要素はブロックレベル要素の中身として用いられることが多く、以下のような特徴があります。
- 要素の前後に改行が入らず、インライン要素同士横に並ぶ
- 横幅や高さを指定できない(※)
- 余白(margin,padding)が一部指定できない(※)
よく使われるHTML要素で例に挙げると以下のようなものがあります。
- <a>
- <span>
- <strong>
- <label>
- <select>
- <img>(※)
- <input>(※)
- <textarea>(※)
etc..
(※)のタグは幅高さや余白の設定が可能
先ほどと同様に、実際に例を挙げて特徴を説明します。
例3. aタグを使った例
[aタグ1]aタグはインライン要素です。[aタグ2]インライン要素は改行が入りません。[aタグ3]幅や高さの指定はできません。
■HTML文
|
1 2 3 |
<a style="border: black solid 1px;">[aタグ1]aタグはインライン要素です。</a> <a style="border: black solid 1px;">[aタグ2]インライン要素は改行が入りません。</a> <a style="border: black solid 1px; width: 200px; height: 200px;">[aタグ3]幅や高さの指定はできません。</a> |
1-3-1. インライン要素の余白設定
インライン要素での余白設定については、性質が結構ややこしく、下記のような特徴があります。
- marginの上下は効かない（左右は効く）
- paddingの上下左右効くが、他の要素の領域を考慮せず侵入する
aタグでpaddingやmarginの設定をして試してみます。
例4. aタグで余白(pading,margin)を設定する
[aタグ3]margin:40pxを指定しています。[aタグ2]余白の設定はしていません。[aタグ1]padding40pxを指定しました。
■HTML文
|
1 2 3 |
<a style="border: black solid 1px; margin: 30px;">[aタグ3]margin:40pxを指定しています。</a> <a style="border: black solid 1px;">[aタグ2]余白の設定はしていません。</a> <a style="border: black solid 1px; padding: 40px;">[aタグ1]padding40pxを指定しました。</a> |
paddingで内側の余白を設定する事ができますが、他の要素の領域に侵入してしまいます。
また、左右に対するmarginの余白設定は効きますが、上下に対するmarginの余白設定が効きません。
そもそもインライン要素は箱ではなく中身ということを考えれば、きっちり余白指定したり幅や高さを指定することになんとなく無理があることがわかるのではないかと思います。
弁当箱の食べ物を仕切りなしにきっちり分けることは難しい
ただし、インライン要素の中には例外があり、img、input、textareaのように幅や高さ、余白の設定ができるものもあります。
例5. inputを使った例
■HTML文
|
1 2 |
<input type="text" style="width:200px;height:100px;" /> <input type="checkbox" style="margin:20px;" /> |
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。
一方、インライン要素の中には文章や他のインライン要素を配置できますが、 中にブロックレベル要素を配置することは文法的にはできません。（食べ物の中にお弁当箱は入れられませんね)。
さて、レイアウトを調整していく中で、インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てくると思います。
そういったときにCSSの便利なプロパティで「display」があり、displayの指定でインライン要素をブロックレベル要素にしたり、ブロックレベル要素をインライン要素にしたりすることができます。
1-4. CSS displayプロパティ
あるブロック要素に対して、CSSで「display:inline;」と指定するとその要素はインライン要素の性質になります。逆にあるインライン要素に対して、「diplay:block;」と指定するとその要素はブロック要素の性質になります。
この性質を指定してレイアウトをいろいろな調整する事ができます。
1-4-1. ブロック要素をインライン要素にする
先ほどのdivタグをdisplay:inlineでインライン要素にしてみると、幅と高さ、余白の設定が変わりレイアウトがむちゃくちゃになっているのがわかると思います。
例6. divタグ
■HTML文
|
1 2 3 4 5 |
<div style="border: blue solid 2px; display: inline;">[divタグ1]divタグはブロック要素です。</div> <div style="border: blue solid 2px; display: inline;">[divタグ2]もちろん改行が入ります。</div> <div style="border: blue solid 2px; width: 300px; height: 150px; display: inline;">[divタグ3]高さと幅も指定できます。</div> <div style="border: blue solid 2px; padding: 30px; display: inline;">[div4]余白paddingの設定もできます。</div> <div style="border: blue solid 2px; margin: 30px; display: inline;">[div5]余白marginの設定もできます。</div> |
上記のような使い方はあまり見かけませんが、よく使われる例として、リスト要素ul,liなどを横並びにするためにインライン要素にすることがあります。
■ブロック要素のままの場合
- li要素1
- li要素2
- li要素3
■liをdisplay:inlineでインライン要素にする
- li要素1
- li要素2
- li要素3
このように必要に応じてブロック要素をインライン要素のように変更する事ができます。
1-4-2. インライン要素をブロック要素にする
次にインライン要素をdisplay:block;でブロック要素に変更する例を挙げてみます。
今後はaタグをdisplay:block;でブロック要素にしてみます。
[aタグ3]margin:40pxを指定しています。[aタグ2]余白の設定はしていません[aタグ1]padding40pxを指定しました
先ほどはむちゃくちゃだったレイアウトが幅高さ、余白が意図した通りに動作している事がわかると思います。
1-4-3. よく使うシーン aタグ
aタグはインライン要素なので高さと幅を指定できませんが、display:blockでブロック要素にして高さと幅を設定できます。これにより、文字以外の部分もaタグの範囲内となります。
例. aタグはインライン要素のまま
■HTML
|
1 2 3 |
<div style="border: black solid 1px; width: 200px; height: 50px; list-style: none;"> <a href="">ここをクリック</a> </div> |
文字の部分にカーソルを合わせないとリンクがアクティブにならないと思います。
■aタグをブロック要素にする
ブロック要素にしているので、枠内にカーソルを合わせるとリンクがアクティブになります。
スポンサーリンク
2. まとめ
今回は、ブロックレベル要素とインライン要素の性質と違いについて例を交えながら説明しました。また、displayプロパティによって、ブロックレベル要素とインライン要素の性質を変換することができることを説明しました。
私もはじめよくわからないまま触っていて、インライン要素であれ？うまく余白が効かないということが結構ありましたので知っておくとレイアウト調整がスムーズにできると思います。
今回は以上になります。最後までご覧いただきありがとうございました。
こちらの記事もおすすめです
はじめてでも3時間でできる！ホームページ作成セミナー WordPress編
月額2万円で始める大阪の個人事業主向けWebスクール「Webst8」
mail無料メルマガ
読者限定の情報やイベント情報を先行配信
読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています！登録・解除は自由です！ぜひご登録ください！
