HTML ブロック要素とインライン要素

❮ 前章へ 次章へ ❯

すべての HTML 要素は、要素のタイプに応じてデフォルトの display 値を持っています。 ほとんどの要素のデフォルトの display 値は、ブロックまたはインラインです


ブロックレベル要素

ブロックレベル要素は、常に新しい行から始まり、利用できる全ての幅をとります(可能な限り左右に広がります)。

The <div> element is a block-level element.

ブロックレベル要素の例:


インライン要素

インライン要素は新しい行から開始せず、必要な幅だけをとります。

This is an inline <span> element inside a paragraph.

インライン要素の例:


<div> 要素

<div> 要素は、他の HTML 要素のコンテナとしてよく使用されます。

<div> 要素には必須の属性はありませんが、一般的に styleclass が使われます。

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 »

<span> 要素

HTML <span> 要素は、テキストのコンテナとして使用することができるインライン要素です。

<span>要素は、特別な意味を持ちません。属性も必須ではありませんが、styleclass クラスは一般的な属性として指定されます。

改行でフォーマットされる <div> とは異なり、<span> 要素は、どのような自動フォーマットも持っていません。

CSS と一緒に使用する場合、<span>要素は、テキストの一部にスタイル属性を設定するために使用することができます。

<span> 要素は、テキストのコンテナとしてよく使用されます。

<span> 要素には必須の属性はありませんが、一般的に styleclass が使われます。

CSS と一緒に使用する場合、<span> 要素はテキストの一部をスタイルするために使用することができます:

<h1>My <span style="color:red">Important</span> Heading</h1>
Try it Yourself ❯

HTML グループ化用のタグ

タグ 説明
<div> 文書のセクションを定義する (ブロックレベル)
<span> 文書のセクションを定義する (インライン)

❮ 前章へ 次章へ ❯