すべての HTML 要素は、要素のタイプに応じてデフォルトの display 値を持っています。 ほとんどの要素のデフォルトの display 値は、ブロックまたはインラインです
ブロックレベル要素は、常に新しい行から始まり、利用できる全ての幅をとります(可能な限り左右に広がります)。
ブロックレベル要素の例:
インライン要素は新しい行から開始せず、必要な幅だけをとります。
This is an inline <span> element inside a paragraph.
インライン要素の例:
<div> 要素は、他の HTML 要素のコンテナとしてよく使用されます。
<div> 要素には必須の属性はありませんが、一般的に style と class が使われます。
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>
Try it Yourself »
HTML <span> 要素は、テキストのコンテナとして使用することができるインライン要素です。
<span>要素は、特別な意味を持ちません。属性も必須ではありませんが、style と class クラスは一般的な属性として指定されます。
改行でフォーマットされる <div> とは異なり、<span> 要素は、どのような自動フォーマットも持っていません。
CSS と一緒に使用する場合、<span>要素は、テキストの一部にスタイル属性を設定するために使用することができます。
<span> 要素は、テキストのコンテナとしてよく使用されます。
<span> 要素には必須の属性はありませんが、一般的に style と class が使われます。
CSS と一緒に使用する場合、<span> 要素はテキストの一部をスタイルするために使用することができます:
タグ | 説明 |
---|---|
<div> | 文書のセクションを定義する (ブロックレベル) |
<span> | 文書のセクションを定義する (インライン) |