HTML入門 | HTML空間分割 | HTMLブロック(block)とインライン(inline)
HTMLブロック(block)とインライン(inline)
HTMLのすべての要素は、その要素がWebブラウザでどのように見えるかを決定するdisplayプロパティを持つ。ほとんどのHTML要素は、デフォルトでdisplayプロパティ値として次の2つの値のどちらかを持つ。
- ブロック(block)属性を持つ要素
- インライン(inline)属性を持つ要素
そのほかにinline-block属性もあり、これはブロック(block)とインライン(inline)の中間段階である。inline-block属性をデフォルト値として持つタグはない。ここで説明すると長くなるため、別途説明はしない。
ブロック(block)属性を持つ要素
displayプロパティ値がブロック(block)である要素は、常に新しい行(line)に移り、その行の全幅を占める。
displayプロパティ値がブロック(block)である代表的な要素は次のとおりである。
<div><h1>-<h6><p><ul><ol><form>
ブロック属性の特徴は次のとおりである。
- ブロック属性を持つタグは、基本的に幅100%(
width: 100%)の属性を持つ。画面の横幅を100%完全に占めるため、次の要素が左右に付く空間がなく、自然に改行される。 - また、インライン要素とは異なり、
margin, width, heightプロパティを定義するとすべて適用される。見た目を簡単に制御できるため、ブロック属性を持つタグの多くは画面構成やレイアウトに使用される。
<div>要素
<div>要素は、他のHTML要素を1つにまとめるためによく使われる代表的なブロック(block)要素である。<div>要素は主に、複数の要素にまとめてスタイルを適用するために使用される。
<div style="background-color:lightgrey; color:green;">
<h1>오늘의 명언</h1>
<p>오늘 내가 죽어도 세상은 바뀌지 않는다. 하지만 내가 살아 있는 한 세상은 바뀐다.</p>
</div>
インライン(inline)属性を持つ要素
displayプロパティ値がインライン(inline)である要素は、新しい行(line)に変わらず、他の要素と一緒に表示される。また、要素の幅もその行全体ではなく、そのHTML要素の内容(content)分だけを占める。
displayプロパティ値がインライン(inline)である代表的な要素は次のとおりである。
<span><a><img><strong>
インライン属性の特徴は次のとおりである。
- 上下の外側余白(margin-top, margin-bottom)プロパティを定義しても適用されない。インライン要素の上下余白は
marginプロパティではなく、line-heightプロパティによって発生する。 - 幅(
width)と高さ(height)プロパティは適用されない。インライン要素の幅と高さは、タグが含んでいる内部要素の量に合わせられる。 - インライン属性を持つタグ同士を連続で使用する場合、最小限の間隔を保つために左右へ約5px程度の外側余白(margin)が自動的に発生する。
<span>要素
<span>要素は、テキスト(text)の特定部分をまとめるためによく使われるインライン(inline)要素である。<span>要素は主に、テキストの特定部分へ個別にスタイルを適用するために使用される。
나는 당신을 <span style="color:red">사랑</span>합니다.
ブロック(block)とインライン(inline)属性タグを記述するときの注意点
ブロック(block)はインライン(inline)を包含するより大きな概念である。したがって、HTMLをマークアップするときにInline属性のタグ内へBlock属性タグを入れると文法エラーになる。
悪い例
<span><p>문장입니다.</p></span>
良い例
<p><span>문장입니다.</span></p>
やむを得ない場合には、インライン(inline)属性のタグをCSSでspan { display: block }のように定義し、任意にblock属性へ変更できるが、CSSは標準文法規則を守ることを原則とする。ここでは、インライン(inline)がブロック(block)より小さい概念であることを忘れないようにしよう。