【CSS】レッスン3-03:positionプロパティでボックスを自在に配置しよう

一つ前の章ではボックスサイズの変更方法について学習しました。

今回はボックスを自在に配置するためのpositionプロパティについて見ていきましょう。

Lesson3-1:ボックス配置の基礎を理解しよう
Lesson3-2:ボックスサイズを変更しよう
Lesson3-3:ボックスを自在に配置しよう ◁今回はココ
Lesson3-4:画像を自在に配置しよう
Lesson3-5:画像のスタイルを変更しよう
Lesson3-6:背景画像を設定しよう
Lesson3-7:リンクボタンを設置しよう
Lesson3-8:リストとテーブルのスタイルを変更しよう
Lesson3-9:CSS変数を理解しよう

Webページを見ていると、スクロールしても常に表示されるヘッダーや、商品紹介ページで「セール中!」と目立つバナーが固定されているのを目にしたことはありませんか?

こうしたレイアウトは、CSSの「positionプロパティ」を活用することで実現できます。

positionプロパティは、要素を思い通りの位置に配置するための重要なプロパティで、Webデザインにおいて欠かせない存在です。

このレッスンでは、要素を自在に配置するためのpositionプロパティの基本から応用までを、具体的な例と一緒にわかりやすく解説していきます。

初心者でも理解しやすいよう、コード例や実践的なテクニックも交えて紹介するので、ぜひ一緒に学んでいきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

positionプロパティの基本

Webページ上の要素は、通常ブラウザが自動的に「標準的な流れ(通常フロー)」に従って配置されます。

しかし、デザインの目的に応じて「ここに配置したい!」といった場面も多く存在します。その際に活躍するのが、CSSの「positionプロパティ」です。

positionプロパティとは?

positionプロパティは、HTML要素の配置方法を指定するためのプロパティです。

このプロパティを使うことで、要素を自由に動かしたり、特定の位置に固定したりすることができます。

positionプロパティの種類

positionプロパティには、次の5つの主要な値があります。

それぞれの挙動を理解することが、自由なレイアウトデザインの第一歩です。

  1. static(スタティック)初期値(デフォルト)の配置方法
    要素は通常フローに従って配置されます。特別な位置指定はできません。
  2. relative(相対配置)元の位置を基準に移動
    要素は通常フロー上に存在したまま、指定した方向に少しだけ動かすことができます。
  3. absolute(絶対配置)親要素を基準に自由配置
    通常フローから外れ、最も近い「positionが設定された親要素」を基準に配置されます。親要素がなければ、ページ全体(<html>)が基準となります。
  4. fixed(固定配置)画面に固定して表示
    ビューポート(画面全体)を基準に固定され、スクロールしても常に同じ位置に表示されます。
  5. sticky(スティッキー配置)特定の位置で固定されるハイブリッドな挙動
    relativefixedの中間のような挙動で、指定したスクロール位置に達すると固定されます。

positionプロパティの基本的な書き方

positionプロパティの基本的な書き方は以下の通りです。

/* 基本の書き方 */
.box {
  position: relative;  /* 配置方法を指定 */
  top: 50px;            /* 上から50ピクセル移動 */
  left: 100px;           /* 左から100ピクセル移動 */
  background-color: aqua;
}
  • position:配置方法を指定するプロパティ
  • top / bottom / left / right:要素を上下左右に移動するためのプロパティ(staticでは無効)

この次の章では、positionプロパティの具体的な使い方や使用例について見てきます。

各positionの詳細な解説とコード例

ここからはpositionプロパティの各値について、具体的なコード例とともに詳しく解説していきます。

それぞれの挙動の違いを理解することで、Webページ上の要素を思い通りに配置できるようになります。

static(スタティック) – デフォルトの配置

staticはすべてのHTML要素にデフォルトで適用されている配置方法です。特にpositionを指定しなければ要素はこの状態になります。

  • 通常の文書の流れ(通常フロー)に従って配置される
  • topleftrightbottomなどの位置指定プロパティは無効
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>staticの例</title>
  <style>
    .box {
      width: 150px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid blue;
      position: static; /* 省略しても同じ */
      top: 20px; /* 無効! */
    }
  </style>
</head>
<body>
  <div class="box">これはstaticのボックス</div>
</body>
</html>
  • position: static; と指定しても、指定しなくても同じ結果になります。
  • top: 20px; は無効で、ボックスは通常の位置に表示されます。

relative(相対配置) – 元の位置を基準に移動

relativeは要素の元の位置を基準にして、上下左右へ移動できます。ただし、移動しても元のスペースはそのまま残ります。

  • 要素は通常フローに従い配置される
  • topleftなどで移動可能
  • 移動後も、元の位置がレイアウト上に保持される
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>relativeの例</title>
  <style>
    .box {
      width: 150px;
      height: 100px;
      background-color: lightgreen;
      border: 2px solid green;
      position: relative; /* 相対配置 */
      top: 20px;  /* 下に20px移動 */
      left: 30px; /* 右に30px移動 */
    }
  </style>
</head>
<body>
  <div class="box">これはrelativeのボックス</div>
</body>
</html>
  • ボックスは元の位置から下に20px、右に30px移動しています。
  • 元の位置はレイアウト上で確保されており、他の要素の配置には影響を与えません。

absolute(絶対配置) – 親要素を基準にした自由な配置

absoluteは要素を通常フローから外して自由に配置できます。

基準となるのは「positionが設定された親要素」または、親がない場合は<html>全体になります。

  • 要素は通常フローから外れる(周囲の要素に影響しない)
  • relativeな親要素がある場合、その親を基準に配置される
  • topleftrightbottomで正確な位置指定が可能
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>absoluteの例</title>
  <style>
    .parent {
      position: relative; /* これが基準になる */
      width: 300px;
      height: 200px;
      background-color: lightgray;
      border: 2px solid black;
    }

    .child {
      position: absolute; /* 親を基準に配置 */
      top: 10px;
      right: 10px;
      width: 100px;
      height: 50px;
      background-color: tomato;
      color: white;
    }
  </style>
</head>
<body>
  <div class="parent">
    親ボックス
    <div class="child">子ボックス</div>
  </div>
</body>
</html>
  • .parentrelativeであるため、.childはこの親要素を基準にして配置されます。
  • top: 10px;right: 10px;により、親ボックスの右上角に固定されています。

fixed(固定配置) – 画面に固定表示

fixedビューポート(画面)を基準に要素を固定します。

スクロールしても常に同じ位置に表示されるため、ナビゲーションバーや「トップへ戻る」ボタンによく使われます。

  • ビューポートに対して固定される
  • スクロールしても位置が変わらない
  • 親要素の影響を受けない
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>fixedの例</title>
  <style>
    .fixed-box {
      position: fixed; /* 画面に固定 */
      bottom: 20px;   /* 画面下から20px */
      right: 20px;    /* 画面右から20px */
      background-color: orange;
      padding: 10px;
      color: white;
      font-weight: bold;
    }

    .content {
      height: 1500px; /* スクロールのための余白 */
    }
  </style>
</head>
<body>
  <div class="content">スクロールしてみてください!</div>
  <div class="fixed-box">トップへ戻る</div>
</body>
</html>
  • 「トップへ戻る」ボタンは、スクロールしても常に画面の右下に固定されています。実際に上記のコードをコピーしてブラウザ表示してみましょう。
  • bottomrightで、ビューポートの端からの距離を指定しています。

sticky(スティッキー配置) – スクロール位置で固定される

stickyrelativefixedのハイブリッドのような挙動をします。

通常は通常フローに従いますが、スクロール位置が指定された範囲に達すると固定されます。

  • スクロール位置に応じて固定される
  • topleftなどで固定開始位置を指定
  • 親要素の範囲内でのみ固定される
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>stickyの例</title>
  <style>
    .sticky-box {
      position: sticky; /* スクロール位置で固定 */
      top: 0;           /* 画面の上端に達したら固定 */
      background-color: lightcoral;
      padding: 10px;
      font-weight: bold;
    }

    .content {
      height: 2000px; /* 長いスクロール用 */
    }
  </style>
</head>
<body>
  <div class="sticky-box">スクロールしてもここで固定されます!</div>
  <div class="content">たくさんスクロールしてみましょう。</div>
</body>
</html>
  • スクロールしてsticky-boxが画面上端に達すると、固定表示されます。実際に上記のコードをコピーしてブラウザ表示してみましょう。
  • top: 0; は「上端で固定する」ことを意味しています。

次のHTMLコードを確認し、「お知らせ」というボックスが常に画面の右上に表示されるようにCSSを完成させてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>固定表示の練習問題</title>
  <style>
    .notice {
      background-color: yellow;
      width: 100px;
      padding: 10px;
      border: 2px solid orange;
      /* ここにCSSを追加する */
    }
  </style>
</head>
<body>
  <div class="notice">📢 お知らせ</div>
</body>
</html>

z-indexプロパティ

Webページを作成していると、複数の要素が重なり合う場面に出くわすことがあります。

たとえば画像の上にテキストを表示したり、ポップアップが背景の上に表示されたりするようなケースです。

こうした要素の「重なり順」を制御するために使用するのが、z-indexプロパティです。このプロパティを理解することで、Webデザインの表現力がさらに向上します。

z-indexとは?

z-indexは、要素の重なり順序(Z軸方向)を指定するCSSプロパティです。

数値が大きいほど、要素は「手前」に表示されます。逆に、数値が小さいほど「奥」に表示されます。

.box {
  position: absolute; /* positionが必要 */
  z-index: 10;        /* 重なり順を指定 */
}
  • z-index は数値で指定(整数ならプラスもマイナスもOK)
  • 重要ポイント: z-indexを適用するには、positionrelativeabsolutefixed、またはstickyに設定されている必要があります(staticのままでは効果がありません)。

コード例:要素の重なり順を変更する

3つのブロックを以下のように重なり合って表示するコードを考えてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>z-indexの例</title>
  <style>
    .box1, .box2, .box3 {
      width: 150px;
      height: 150px;
      position: absolute; /* z-indexが有効になる */
      border: 2px solid black;
    }

    .box1 {
      background-color: lightblue;
      top: 20px;
      left: 20px;
      z-index: 1; /* 最も奥に表示 */
    }

    .box2 {
      background-color: lightgreen;
      top: 50px;
      left: 50px;
      z-index: 3; /* 最も手前に表示 */
    }

    .box3 {
      background-color: lightcoral;
      top: 80px;
      left: 80px;
      z-index: 2; /* 中間に表示 */
    }
  </style>
</head>
<body>
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</body>
</html>
  • Box 2(緑)z-index: 3 なので最も手前に表示されます。
  • Box 3(赤)z-index: 2 で中間に配置されます。
  • Box 1(青)z-index: 1 で一番奥に表示されます。

z-indexの注意点

  1. positionが必要:
    z-indexは、positionrelativeabsolutefixed、またはstickyの要素にのみ効果があります。デフォルトのstaticでは無効です。
  2. 数値が大きいほど手前:
    数字が大きいほど要素は手前に表示され、負の値を指定すると、さらに奥に配置することも可能です。
  3. 親要素の影響:
    z-index親要素の重なり順にも影響されます。親要素自体が低いz-indexを持っている場合、その子要素が高いz-indexを持っていても、親要素の外には出られません。

まとめ

  • z-indexプロパティは、要素の「重なり順」を制御するために使用します。
  • positionが設定された要素に対してのみ有効で、数値が大きいほど手前に表示されます。
  • 実際のWebデザインでは、バナーやモーダルウィンドウ、ポップアップなどの表示に頻繁に使用されます。

次のセクションでは、これまで学んだpositionz-indexを活用した練習用のコード例を紹介します!

先ほどの3つのボックスが表示されるコードにて、ボックスの前後を入れ替えてみましょう。

手前から「青 → 緑 → 赤」となるように修正してください。

まとめ

今回のレッスンではCSSのpositionプロパティを中心に、要素の配置方法や重なり順序を制御する方法について学習しました。

Webデザインにおいて、思い通りのレイアウトを作成するためには欠かせない知識です。

positionプロパティは一見すると複雑に感じるかもしれませんが、実際に手を動かしてコードを書いてみることで、少しずつ理解が深まります。

今回の内容をしっかり身につけることで、より自由で魅力的なWebページを作成できる力が身につきました。ぜひ練習したコードを自分なりにアレンジしたり、他の要素にも応用してみてください。

あなたのデザインスキルは、確実にレベルアップしています!

練習問題3-3:お知らせボックスとスクロール固定ボタンを作成しよう!

ページ内に「お知らせボックス」と「スクロールしても画面に固定されるボタン」を配置しましょう。

以下のHTMLコードをベースとし、要件に従ってCSSコードを書いて下さい。

  1. お知らせボックス
    • 画面中央に表示する大きなボックス。
    • 「お知らせ!」のタイトルと本文が含まれている。
    • 上部には赤い「重要」バッジが表示される(親要素に対して配置すること)。
  2. 固定ボタン
    • 画面の右下に「トップへ戻る」ボタンを常に表示。
    • スクロールしてもボタンは固定されたまま動かない。
  3. 重なり順の指定
    • 「重要」バッジはお知らせボックスの上に重なるように表示。
    • 「トップへ戻る」ボタンは常に最前面に表示されること。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お知らせボックスと固定ボタン</title>
</head>
<body>

  <div class="announcement-box">
    <div class="badge">重要</div>
    <h2>お知らせ!</h2>
    <p>こちらは重要なお知らせです。最新情報をご確認ください。</p>
  </div>

  <button class="scroll-top-btn">↑ トップへ戻る</button>

</body>
</html>
ヒント
  • お知らせボックス は画面中央に配置するために、position: relative;margin の活用を考えてみましょう。
  • 「重要」バッジ は、お知らせボックスに対して absolute で配置します。親要素には基準となる position: relative; を設定すると便利です。
  • 「トップへ戻る」ボタン は、スクロールしても常に表示されるため、position: fixed; を使用します。重なり順を制御するために z-index も適切に設定しましょう。
正解のCSSコード
/* ベーススタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

/* お知らせボックス */
.announcement-box {
  position: relative;         /* 子要素(バッジ)の基準にする */
  background-color: white;
  width: 300px;
  margin: 100px auto;          /* 画面中央に配置 */
  padding: 20px;
  border: 2px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 1;                  /* 通常の重なり順 */
}

/* 「重要」バッジ */
.badge {
  position: absolute;          /* 親(announcement-box)に対して配置 */
  top: -10px;                  /* ボックスの上に少しはみ出して表示 */
  left: 10px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 10;                 /* お知らせボックスの上に表示 */
}

/* トップへ戻るボタン */
.scroll-top-btn {
  position: fixed;             /* 画面に固定表示 */
  bottom: 20px;                /* 画面下から20pxの位置 */
  right: 20px;                 /* 画面右から20pxの位置 */
  background-color: #007BFF;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 100;                /* 常に最前面に表示される */
  transition: background-color 0.3s;
}

/* ホバー時のスタイル */
.scroll-top-btn:hover {
  background-color: #0056b3;
}

このCSSコードをHTMLコードに読み込んでください。

初めてのWebサイトを作ろう3-3

このサイトの Lesson1-1(HTML学習の入り口) か Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る