基本知識

【CSS第5回】ディスプレイと配置の基本

CSS基礎講座 全10回（第5回）

【CSS第5回】ディスプレイと配置の基本

要素のレイアウトの基本性質を決定づける「displayプロパティ」と、要素の位置を自由自在に操る「positionプロパティ」の核心に迫ります。レイアウト構築の絶対的な基礎を完璧に学びましょう。

📌 CSS講座ロードマップ一覧（クリックで移動）

1. displayプロパティの代表的な値

HTML要素には最初から「ブロックレベル要素」か「インライン要素」のいずれかの初期設定が割り当てられています。これらをCSSで制御し、動作を変更するのが displayプロパティ です。

① block（ブロック要素化）

<div> や <p> のように、常に新しい行から始まり、横幅一杯に広がります。widthやheight、上下のmargin/paddingが完璧に適用されます。

② inline（インライン要素化）

<span> や <a> のように、改行されず、文章の途中に並びます。中身のサイズ分の幅にしかならず、**「width/heightが効かない」「上下のmarginが効かない」**という強い制限があります。

③ inline-block（両方のいいとこ取り）

インラインのように「改行されずに横に並ぶ」性質を持ちながら、ブロックのように「widthやheight、上下余白が指定できる」非常に扱いやすい設定です。ボタン要素などによく指定されます。

2. 要素の位置を自由に配置する position プロパティ

要素を標準の流れ（通常フロー）から浮かせて、特定の場所に固定したり絶対配置したりするには positionプロパティ を使用します。

positionを設定した後は、top, bottom, left, right プロパティを使って距離を指定します。

  • static (初期値): 特別な配置をせず、通常の流れに沿って配置されます。
  • relative (相対位置): 本来自分が表示されるはずの「通常位置」を基準にして、そこからの相対的なズレを指定します。
  • absolute (絶対位置): 基準となる親要素を頼りに、絶対座標で位置を指定します。この設定を指定された要素は宙に浮くため、他の要素と重なるようになります。
  • fixed (画面固定位置): ブラウザの表示画面（ビューポート）を基準に完全に固定します。ヘッダーの固定スクロールや、トップへ戻るボタンなどに使われます。

3. 親子 absolute 配置の黄金ルール

position: absolute を使う際の最も重要な注意点は、**「どの親要素を基準にするか」**です。

デフォルトでは画面全体（body）が基準になってしまいます。特定のブロック（親要素）の内部を基準点にしたい場合は、その**親要素に対して `position: relative;` を指定しておく**必要があります。この親子ペア設計は、Webデザインのレイアウトテクニックにおける最も強力な黄金ルールです。

👑 親子 absolute 指定のルール

・【親の箱】 ➔ position: relative; を設定（基準点とする）
・【子の箱】 ➔ position: absolute; top: 10px; right: 10px; を設定（親の右上から10pxに配置）

4. position を使って要素を重ねてみよう

以下のCSSを設定すると、親カードの右上に小さな「SALE」バッジを絶対座標で綺麗に重ね合わせることができます。

style.css 
.parent-card {
    position: relative;     /* 親を基準に設定 */
    width: 300px;
    height: 200px;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
}

.badge-child {
    position: absolute;     /* 子を絶対配置 */
    top: 12px;                /* 親の上から12px */
    right: 12px;              /* 親の右から12px */
    background-color: #10b981;
    color: white;
    padding: 4px 8px;
}
✍️ 第5回 理解度チェック（問題）

子要素に対して「position: absolute;」による絶対座標での配置を指定したい場合、その基準点とさせたい「親要素」に対して設定しておくべきpositionの値は何でしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第5回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • displayプロパティの `inline-block` は、横並びを維持しつつ幅や高さを指定できる。
  • `position: absolute;` は親要素を基準点として宙に浮いた状態で絶対配置できる。
  • 親を基準にするためには、親のCSSに必ず `position: relative;` を宣言しておく。

次回（第6回）は、今日の基礎知識を武器に、Webサイトのレイアウト作成における標準技術「Flexboxで並列レイアウトを作る」を学びます。お楽しみに！

📖 CSSの基礎を全10回でマスターする

🔑 第5回 理解度チェックの解答と解説

【解説】

正解は **`relative`** (相対配置) です。 `position: absolute;` を指定した要素は、直近の「`static`（初期値）以外が指定された先祖要素」の枠を基準点にして絶対配置されます。そのため、親要素に `position: relative;` などを設定しておかないと、親の枠を無視して最上位のbody（画面全体）を基準にしてずれていってしまい、大きな表示崩れを起こす原因になります。

関連記事