レイアウトの基礎

レイアウト基礎：ブロックとインライン

HTML の要素にはデフォルトでブロック要素かインライン要素のどちらかが設定されています。この概念についてまず解説します。

ブロック要素の特徴

• 新しい行から始まる ブロック要素は常に新しい行から始まり、他の要素と縦に並びます。

• 幅と高さの設定 幅（width）や高さ（height）を自由に設定できます。デフォルトでは親要素の幅に対して 100%の幅を持ちます。

• マージンとパディング 上下左右のマージン（margin）やパディング（padding）を設定できます。

• コンテナの特性 他のブロック要素やインライン要素を含むことができます。

インライン要素の特徴

• 同じ行に並ぶ: インライン要素は他のインライン要素と同じ行に並びます。

• 幅と高さの設定ができない: 幅や高さを直接設定することはできません。インライン要素の幅は内容に応じて変わり、高さも内容に依存します。

• 左右のみのマージンとパディング: 左右のマージンやパディングは設定できますが、上下のマージンやパディングは周囲のレイアウトに影響を与えません。

• インラインのみのコンテナ: 通常、他のインライン要素のみを含むことができます。ブロック要素を含むことはできません。

display プロパティへの設定

特別な事情がない限り、すべての要素はデフォルトで、ブロック要素かインライン要素です。

デフォルト値がインラインの html タグ

通常使うコンテンツ

• <a>: ハイパーリンク
• <img>: 画像
• <span>: 用インラインコンテナ
• <br>: 改行

ユーザー入力

• <input>: 入力フィールド
• <label>: フォームラベル
• <textarea>: テキストエリア

文字への意味づけ

• <strong>: 重要なテキスト
• <small>: 重要でないテキスト
• <sub>: 下付き文字
• <sup>: 上付き文字 その他、mark,em,b,i,tt,s など使用頻度のとても低いタグ。

特殊な意味の文字列

• <cite>: 引用
• <q>: 短い引用
• <code>: コード
• -<dfn>: 定義
• <abbr>: 略語
• <samp>: サンプル出力

デフォルト値がブロックの html タグ

デフォルト値がインラインの html タグと head およびそれに含まれる要素以外のほとんどのタグ

display に block,inline は 設定が必要か？

block,inline は display に設定しない方が良いです。 後述の代替ボックスモデルをお勧めします。