[HTML]ブロックレベル要素とインライン要素
はじめに
今日は文書構造の理解に必須である、ブロックレベル要素とインライン要素について勉強しました。
ブロックレベル要素とインライン要素とは
ブロック要素は「入れ物」インライン要素は「中身」にあたります。
ブロック要素の中には、インライン要素や他のブロック要素も配置できますが、反対にインライン要素(中身)にブロックレベル要素(入れ物)を配置することはできません。
ブロックレベル要素:block-level elements
見出し(h1~)、段落(p)、表(table)など、文章を構成する基本となり、これらはブロック単位として認識されます。
要素 | 用途 |
---|---|
h1~h6 | 見出し |
p | 段落 |
ul | 順不同リスト |
ol | 順番リスト |
dl | 定義リスト |
table | 表組み |
address | 連絡先 |
div | 任意の範囲・グループ化 |
インライン要素:inline elements
ブロックレベル要素の「中身」として用いられ、文章の一部のように扱われます。
要素 | 用途 |
---|---|
a | リンク |
em | 強調 |
strong | より強い強調 |
img | 画像 |
span | 任意の範囲 |
理解を深めるために〜display属性
display属性は、ブロックレベル要素をインラインの形式で表示したり、インライン要素をブロックの形式で表示したりできます。
●リストは、改行されるブロック要素です。
<ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> </ul>
●リストのdisplayプロパティをインラインに設定すると…
<style> li {display: inline;} </style>
●改行されないインライン要素として扱われます。
さらにインラインブロック要素を使ってみる
display: inline-blockに設定すると、ブロック要素をインライン要素のように並べることができます。
(省略) <style type="text/css"> a.hoge { display: inline; background-color:orange; width: 300px; } a.hoge2 { display: block; background-color:orange; width:300px; } a.hoge3 { display: inline-block; background-color:orange; width:300px; } </style> </head> <body> <p><a class="hoge" href="#">インラインで表示します</a>空白<a class="hoge" href="#">インラインで表示します</a></p> <hr> <p><a class="hoge2" href="#">ブロック要素にします</a>空白<a class="hoge2" href="#">ブロック要素にします</a></p> <hr> <p><a class="hoge3" href="#">インラインブロック要素にします</a>空白<a class="hoge3" href="#">インラインブロック要素にします</a></p> <hr> </body> </html>
表示結果(オレンジがリンクの当たり判定)
大参考→CSSの display: inline、display: block、display: inline-block をマスターしよう! | たねっぱ!
覚えておきたい→inline-blockを並べた場合に発生する「隙間」を消去するCSS » INSPIRE TECH