• Home
  • Web制作
  • 【CSS】overflowプロパティを理解して、思い通りのレイアウトを実現しよう！

【CSS】overflowプロパティを理解して、思い通りのレイアウトを実現しよう！

schedule
Tags: CSS

はみ出すコンテンツをどうする？ overflowプロパティの基本を学ぼう！

Webサイトを制作していると、意図せずコンテンツが親要素からはみ出してしまったり、逆に余白が目立ってしまったりと、レイアウト調整に悩むことはありませんか？

そんな時に役立つのが、CSSのoverflowプロパティです。overflowプロパティを使うことで、コンテンツが親要素からはみ出した時の表示方法をコントロールすることができます。

この記事では、Web制作初心者の方に向けて、overflowプロパティの基本的な使い方から、スクロールの実装、表示領域の制御まで、実例を交えながら解説していきます。

あわせて読みたい
【CSS入門】Webページを彩るスタイルシートの基本から応用まで徹底解説！

overflowプロパティでできること

overflowプロパティでは、主に以下の3つの要素を制御できます。

  1. はみ出したコンテンツの表示/非表示
  2. スクロールバーの表示/非表示
  3. 表示領域の制御

これらの要素を組み合わせることで、Webページのデザインやユーザビリティを向上させることができます。

overflowプロパティの値と使い方

overflowプロパティには、以下のような値を設定できます。

値 説明
visible はみ出したコンテンツを表示します。これが初期値です。
hidden はみ出したコンテンツを非表示にします。
scroll 常にスクロールバーを表示します。
auto コンテンツがはみ出した場合のみスクロールバーを表示します。

それぞれの値を具体的に見ていきましょう。

1. visible： はみ出したコンテンツを表示

.example {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: visible; /* 初期値 */
}

visibleは初期値なので、特に指定しなくても同じ動作になります。この場合、コンテンツが親要素からはみ出して表示されます。

2. hidden： はみ出したコンテンツを非表示

.example {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden; 
}

hiddenを指定すると、はみ出したコンテンツは非表示になります。レイアウトが崩れるのを防ぎたい場合に有効です。

3. scroll： 常にスクロールバーを表示

.example {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: scroll;
}

scrollを指定すると、コンテンツ量に関係なく、常に縦横両方のスクロールバーが表示されます。

4. auto： 必要に応じてスクロールバーを表示

.example {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: auto;
}

autoを指定すると、コンテンツがはみ出した場合のみスクロールバーが表示されます。

overflow-x、overflow-yで縦横個別のコントロール

overflowプロパティは、overflow-x と overflow-y を使うことで、縦方向と横方向個別に制御することも可能です。

  • overflow-x: 横方向の表示を制御します。
  • overflow-y: 縦方向の表示を制御します。

例えば、横方向のスクロールバーだけを表示したい場合は、以下のように記述します。

.example {
  width: 200px;
  height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}

まとめ： overflowプロパティを使いこなして、思い通りのレイアウトを実現しよう！

この記事では、CSSのoverflowプロパティについて解説しました。overflowプロパティは、Webページのレイアウトを調整する上で非常に重要な役割を果たします。

今回ご紹介した内容を参考に、overflowプロパティを自在に操り、思い通りのWebサイトを作成してみてください！

関連記事