【CSSレイアウトの奥深さ】position absolute と overflow hidden を使いこなして、プロが作るような洗練されたレイアウトを作成！

2024-07-27

HTML, CSS, レイアウトにおける「position absolute」と「overflow hidden」の解説

position absolute

position absolute は、要素をドキュメントフローから取り除き、親要素からの位置関係を無視して配置するプロパティです。つまり、要素を自由に好きな場所に配置することができるようになります。

position absolute の主な用途は以下の通りです。

ドロップダウンメニューやポップアップウィンドウなどの浮動コンテンツを作成する
ヘッダーやフッターなどの固定要素を作成する
要素を重ねて表示する

position absolute を使用する際には、以下の点に注意する必要があります。

親要素に position: relative を設定する必要があります。これは、position absolute の要素が親要素からの位置関係を考慮できるようにするためです。
top、left、bottom、right などのプロパティを使用して、要素の位置を指定する必要があります。
z-index プロパティを使用して、要素の重ね順序を指定する必要があります。

overflow hidden

overflow hidden は、要素の内容が要素の境界を超えてしまう場合に、それを非表示にするプロパティです。つまり、要素からはみ出した部分は切り取られてしまいます。

overflow hidden の主な用途は以下の通りです。

テキストが要素からはみ出ないようにする
画像の一部を切り取る
要素の内容をスクロールバーなしで表示する

overflow hidden を使用する際には、以下の点に注意する必要があります。

要素の内容が要素の境界内に収まっていることを確認する必要があります。
スクロールバーが必要な場合は、overflow-y: auto や overflow-x: auto などのプロパティを使用する必要があります。

position absolute と overflow hidden の併用

position absolute と overflow hidden を併用することで、様々なレイアウト効果を実現することができます。

例1：ドロップダウンメニュー

親要素に position: relative を設定し、子要素に position absolute を設定することで、ドロップダウンメニューを作成することができます。さらに、親要素に overflow hidden を設定することで、ドロップダウンメニューが親要素からはみ出ないようにすることができます。

.parent {
  position: relative;
  overflow: hidden;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.parent:hover .child {
  display: block;
}

例2：ヒーローヘッダー

.parent {
  position: relative;
  overflow: hidden;
  height: 500px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Absolute and Overflow Hidden Example</title>
  <style>
    .parent {
      position: relative;
      width: 500px;
      height: 300px;
      background-color: #ccc;
      margin: 20px auto;
    }

    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 150px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

CSS

.parent {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: #ccc;
  margin: 20px auto;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 150px;
  background-color: #f00;
}

説明

このコードでは、以下の要素を作成しています。

親要素 (div.parent)
- 幅：500px
- 高さ：300px
- 背景色：#ccc
- マージン：20px auto
子要素 (div.child)
- 位置：親要素の中央
- 背景色：#f00

position absolute によって、子要素は親要素からの位置関係を無視して配置されています。overflow hidden によって、親要素からはみ出した部分は非表示になっています。

この結果、子要素は親要素の中央に表示され、親要素からはみ出さないようになります。

応用例

スクロール可能なコンテンツ
固定要素

「position absolute」と「overflow hidden」以外のレイアウト方法

Flexbox

Flexboxは、Webページのレイアウトを柔軟に制御できるCSSレイアウトモジュールです。行方向または列方向に要素を並べたり、要素のサイズを自動的に調整したりすることができます。

利点

柔軟性が高い
コードが簡潔
レスポンシブデザインに対応しやすい

欠点

比較的新しいため、古いブラウザではサポートされていない場合がある
理解するのに時間がかかる

例

.container {
  display: flex;
  flex-direction: row; /* 要素を横並びに配置 */
  justify-content: space-around; /* 要素を左右に均等に配置 */
  align-items: center; /* 要素を垂直方向に中央揃え */
}

.item {
  flex: 1; /* 要素を可能な限り伸縮させる */
  background-color: #ccc;
  margin: 10px;
  padding: 20px;
}

Grid Layout

GridLayoutは、Webページをグリッドレイアウトで配置できるCSSレイアウトモジュールです。行と列を定義し、要素をセルに配置することができます。

複雑なレイアウトを簡単に作成できる
コードがわかりやすい

Flexboxよりも新しい機能なので、古いブラウザではサポートされていない場合がある

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列のグリッドを作成 */
  grid-gap: 20px; /* セル間の隙間を20pxに設定 */
}

.item {
  background-color: #ccc;
  padding: 20px;
}

Float

Floatは、要素を左右に並べたり、他の要素の周りに配置したりするのに役立つCSSプロパティです。

コードが比較的簡単
古いブラウザでもサポートされている

他のレイアウト方法と比べて柔軟性が低い

.container {
  width: 600px;
}

.item {
  float: left;
  width: 200px;
  height: 150px;
  background-color: #ccc;
  margin: 10px;
}

Table

Tableは、表形式でデータをレイアウトするのに役立つHTML要素です。

表形式のデータを簡単にレイアウトできる

レイアウトに柔軟性が低い

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>30</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>佐藤 花子</td>
    <td>25</td>
    <td>デザイナー</td>
  </tr>
</table>

CSS Frameworks

BootstrapやFoundationなどのCSSフレームワークは、Webページのレイアウトを作成するためのテンプレートやコンポーネントを提供しています。

開発時間を短縮できる

ファイルサイズが大きくなる
カスタマイズが難しい

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h2>タイトル</h2>
      <p>本文</p>
    </div>
    <div class="col-md-4">
      <h2>タイトル</h2>
      <p>本文</p>
    </div>
    <div class="col-md-4">
      <h2>タイトル</h2>
      <p>本文</p>
    </div>
  </div>
</div>