overflow を使って「はみ出し」を制御してみよう | HTML / CSS基礎

前のページでは、

position
absolute
fixed

などを使って、

自由な配置

を学びました。

今回は、

overflow
スクロール
はみ出し制御

を使って、

「要素がはみ出したときの動き」

を制御してみます

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

overflow とは？

overflow は、

要素から内容がはみ出したとき

の動きを決めるCSSです。

まずは試してみよう

<div class="box">

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

</div>

CSS を書いてみよう

.box {
  width: 300px;
  height: 120px;

  padding: 16px;

  background-color: white;

  border: 1px solid #d1d5db;
}

内容がはみ出す

高さを小さくしているため、

文字がはみ出す

ことがあります。

overflow: hidden

overflow: hidden;

を書くと、

はみ出した部分を隠す

ことができます。

実際に書いてみよう

.box {
  width: 300px;
  height: 120px;

  padding: 16px;

  overflow: hidden;

  background-color: white;

  border: 1px solid #d1d5db;
}

hidden のイメージ

箱から出た部分を見えなくする

イメージです。

overflow: scroll

次は、

overflow: scroll;

です。

scroll の特徴

overflow: scroll;

を書くと、

スクロール可能

になります。

実際に書いてみよう

.box {
  width: 300px;
  height: 120px;

  padding: 16px;

  overflow: scroll;

  background-color: white;

  border: 1px solid #d1d5db;
}

スクロールバーが表示される

すると、

スクロールバー

が表示されます。

overflow: auto

実際によく使うのは、

overflow: auto;

です。

auto の特徴

auto は、

必要なときだけスクロール

になります。

なぜ auto が便利なの？

scroll は、

内容が少なくてもスクロールバー

が出ることがあります。

一方、

auto は必要時だけ

なので自然です。

overflow-x と overflow-y

overflow は、

横方向・縦方向

を分けて指定することもできます。

横スクロール

overflow-x: auto;

縦スクロール

overflow-y: auto;

よくある使用例

例えば、

横スクロールメニュー
コード表示
テーブル
モーダル内部

などでよく使われます。

コード表示でよく使う

例えば、

pre {
  overflow-x: auto;
}

を書くと、

長いコードが横スクロール

できるようになります。

border-radius と組み合わせることも多い

例えば、

.card {
  border-radius: 12px;

  overflow: hidden;
}

を書くと、

中身も角丸に合わせて切り取られる

ようになります。

なぜ必要なの？

例えば画像が入っていると、

画像だけ角丸から飛び出す

ことがあります。

そのため、

overflow: hidden;

を使うことがあります。

実際のWeb制作でも超重要

overflow は、

カードUI
モーダル
メニュー
コードブロック
テーブル

など、かなり多くの場所で使われています。

最初は「はみ出したらどうするか」でOK

最初は、

overflow は、
「はみ出した内容をどう扱うか」

くらいの理解で十分です

今回学んだこと

今回学んだこと：

overflow
hidden
scroll
auto
overflow-x
overflow-y
スクロール制御

などです。

次のページでは

次のページでは、

z-index
重なり順
モーダルUI

などを使って、

「要素の重なり制御」

を学んでいきます