HTMLブロック要素とインライン要素
すべてのHTML要素には、要素のタイプに応じてデフォルトの表示値があります。
表示値には、ブロックとインラインの2つがあります。
ブロックレベルの要素
ブロックレベルの要素は常に新しい行から始まり、ブラウザーは要素の前後にスペース(マージン)を自動的に追加します。
ブロックレベルの要素は、常に利用可能な全幅を占有します(可能な限り左右に伸びます)。
一般的に使用される2つのブロック要素は次の<p>と<div>です。
<p>要素は、HTMLドキュメントの段落を定義します。
<div>要素は、HTMLドキュメントの部門またはセクションを定義します。
<p>要素はブロックレベルの要素です。<div>要素はブロックレベルの要素です。インライン要素
インライン要素は新しい行から始まりません。
インライン要素は、必要な幅だけを占有します。
これは段落内の<span>要素です。
HTMLのインライン要素は次のとおりです。
注：インライン要素にブロックレベル要素を含めることはできません!
<div>要素
<div>要素は、他のHTML要素のコンテナとしてよく使用されます。
<div>要素には必須の属性はありませんが、style、class、およびidは共通です。
CSSと併用すると、<div>要素を使用して、コンテンツブロックのスタイルを設定できます。
例
<div style="background-color:black;color:white;padding:20px;">
<h2>ロンドン</h2>
<p>ロンドンはイギリスの首都です。イギリスで最も人口の多い都市であり、人口は1,300万人を超える大都市圏です。</p>
</div>
<span>要素
<span>要素は、テキストの一部またはドキュメントの一部をマークアップするために使用されるインラインコンテナーです。
<span>要素には必須の属性はありませんが、style、classおよびidは共通です。
CSSと併用すると、<span>要素を使用して、テキストの一部のスタイルを設定できます。
例
<p>母は<span style="color:blue;font-weight:bold;">青色</span>の目をしていて、父は<span style="color:darkolivegreen;font-weight:bold;">深緑色</span>の目をしています。</p>
この章のまとめ
・表示値には、ブロックとインラインの2つがあります。
・ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を占めます。
・インライン要素は新しい行で開始せず、必要な幅しか占有しません。
・<div>要素はブロックレベルの要素であり、他のHTML要素のコンテナーとしてよく使用されます。
・<span>要素は、テキストの一部またはドキュメントの一部をマークアップするために使用されるインラインコンテナーです。
HTMLタグ
| タグ | 説明 |
|---|---|
| <div> | ドキュメント内のセクションを定義します(ブロックレベル) |
| <span></td> | ドキュメント内のセクションを定義します(インライン) |
利用可能なHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。