HTML ブロックとインライン

すべてのHTML要素には、その要素の種類に応じたデフォルトの表示値（Display プロパティの値）があります。ほとんどの要素におけるデフォルトの表示値は、ブロック（Block）またはインライン（Inline）のいずれかです。

1. ブロックレベル要素 (Block-level Elements)

ブロックレベル要素は常に新しい行から始まり、ブラウザは自動的にその要素の前後に一定の余白（マージン）を追加します。

また、ブロックレベル要素は常に利用可能な全幅を占有します（可能な限り左右いっぱいに広がります）。

よく使われるブロックレベル要素は <div> です。

1.1 <div> 要素の例

<div>Hello World</div>
<div>こんにちは世界</div>

1.2 一般的なブロックレベル要素の一覧

HTMLには以下のようなブロックレベル要素があります。

2. インライン要素 (Inline Elements)

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

よく使われるインライン要素は <span> です。

2.1 <span> 要素の例

<span>Hello World</span>

2.2 一般的なインライン要素の一覧

HTMLには以下のようなインライン要素があります。

• <a> - リンク
• <abbr> - 略語
• <b> - 太字（特別な意味なし）
• <button> - ボタン
• <cite> - 作品のタイトル
• <code> - コンピュータコード
• <img> - 画像
• <input> - 入力フィールド
• <label> - フォームラベル
• <q> - 短いインライン引用
• <script> - クライアントサイドスクリプト
• <select> - ドロップダウンリスト
• <span> - テキストの一部をグループ化するコンテナ
• <strong> - 重要なテキスト
• <sub> / <sup> - 下付き・上付き文字
• <textarea> - 複数行入力フィールド

3. <div> 要素の活用

<div> 要素は、他のHTML要素をまとめるためのコンテナとして頻繁に使用されます。

<div> 要素自体には必須の属性はありませんが、style、class、id 属性がよく併用されます。CSSと組み合わせることで、<div> 要素を使用してコンテンツのブロックに対してスタイリングを行ったり、レイアウトを構築したりすることが可能になります。

<div style="background-color:black; color:white; padding:20px;">
  <h2>ロンドン</h2>
  <p>ロンドンはイギリスの首都です。イングランドで最も人口の多い都市であり、その都市圏には900万人以上の住民がいます。</p>
</div>

4. <span> 要素の活用

<span> 要素は、テキストの一部やドキュメントの一部をマークアップするためのインラインコンテナとして使用されます。

<span> 要素も <div> と同様に必須属性はありませんが、style、class、id 属性がよく使われます。CSSと組み合わせることで、テキストの特定の部分に対して個別のスタイルを適用することができます。

<p>私の母は <span style="color:red; font-weight:bold;">青い</span> 目をしています。私の父は <span style="color:darkolivegreen; font-weight:bold;">暗い緑色</span> の目をしています。</p>

5. まとめ

WebアプリケーションのUIを設計する際、これらの表示特性（Display 特性）を理解していることは、予期せぬレイアウト崩れを防ぎ、意図した通りのデザインを実装するための大前提となります。