HTMLブロックとインライン要素
すべてのHTML要素には、要素のタイプに応じて、デフォルトの表示値があります。
ブロックとインラインの2つの表示値があります。
ブロックレベルの要素
ブロックレベルの要素は常に新しい行から始まります。
ブロックレベルの要素は、常に使用可能な全幅を占めます(可能な限り左右に伸びます)。
ブロックレベルの要素には上マージンと下マージンがありますが、インライン要素にはありません。
<div>要素はブロックレベルの要素です。
例
<div>Hello World</div>
HTMLのブロックレベルの要素は次のとおりです。
インライン要素
インライン要素は新しい行から始まりません。
インライン要素は、必要なだけの幅を取ります。
これは、段落内の<span>要素です。
例
<span>Hello World</span>
HTMLのインライン要素は次のとおりです。
注:インライン要素にブロックレベルの要素を含めることはできません。
<div>要素
この<div>
要素は、他のHTML要素のコンテナとしてよく使用されます。
要素には必須の<div>
属性はありませんが、、style
およびclass
はid
一般的です。
CSSと一緒に使用すると、<div>
要素を使用してコンテンツのブロックのスタイルを設定できます。
例
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<span>要素
この<span>
要素は、テキストの一部またはドキュメントの一部をマークアップするために使用されるインラインコンテナです。
要素には必須の<span>
属性はありませんが、、style
およびclass
はid
一般的です。
CSSと一緒に使用すると、<span>
要素を使用してテキストの一部のスタイルを設定できます。
例
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
章のまとめ
- ブロックとインラインの2つの表示値があります
- ブロックレベルの要素は常に新しい行から始まり、使用可能な全幅を占めます
- インライン要素は新しい行で開始せず、必要なだけの幅を使用します
- この
<div>
要素はブロックレベルであり、他のHTML要素のコンテナとしてよく使用されます。 - この
<span>
要素は、テキストの一部またはドキュメントの一部をマークアップするために使用されるインラインコンテナです。
HTMLタグ
Tag | Description |
---|---|
<div> | Defines a section in a document (block-level) |
<span> | Defines a section in a document (inline) |
使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。