要素のボックスからはみ出た部分をどうするか？overflowの意味と使い方の説明

◯◯ {overflow:値;}

以下でoverflowの指定方法をみていきましょう。

overflow:visibleだと基本的にはみ出た部分がそのまま表示されます。
例として幅と高さが125pxずつの段落要素（p）に文章を入れてみましょう。

【例1：visible】

【HTML】

<p class="sample">AKBSKENMBHKTNGT</p>

【CSS】

.sample {
  width: 125px;
  height: 125px;
  overflow: visible;
  background: orange;
  }

【表示例】

⬆︎青色のボックスからはみ出てしまいました。
上の例ではCSSでoverflow: visibleとしていますが、visibleは初期値なので、
この部分が書かれていなくても同じ表示になります。

さきほどの例ではheight:125pxにしていました。
もしheightを指定しなかった場合はどのように表示されるのでしょうか。

【CSS】
/*HTML略*/

.sample {
  width: 125px;
  overflow: visible;
  background: orange;
  }

【表示例】

⬆︎このようにheightを指定しない場合（＝height: auto）、文字分だけ縦に要素が長くなるのではみ出ることはありません。

overflow:hiddenを指定すると、要素のボックスからはみ出てしまった部分は隠れて見えなくなります。
以下例を見てみましょう。

【例１：hiddenはみ出た部分を非表示】

【CSS】

.sample {
  width: 125px;
  height: 125px;
  overflow: hidden;
  background: orange;
}

【表示例】

⬆︎このようにhiddenだとボックスに収まりきらない部分は非表示になります。
スクロールして表示させることもできません。

１番おさえておきたいポイントです。
overflow: scrollを指定すると、はみ出た部分が隠れ、スクロールにより表示することができるようになります。

【例１：　scrollでスクロールを表示する】

【CSS】
/*HTML略*/

.example {
  width: 125px;
  height: 125px;
  overflow: scroll;
  background: orange;
}

【表示例】

⬆︎このようにはみ出た部分をスクロールにより表示できます。
※動かないですが下にスクロールすることで隠れていた文字が出てきます。

overflow:autoとすると、はみ出た部分の処理をブラウザに委ねることになります。
ほとんどの場合は上記のscrollを指定した場合と同じようにスクロールバーが表示されます。

このようにoverflowやoverflow-x、overflow-yによりはみ出た部分の処理を指定しておくことができます。
やはり環境によって誤差が出てしまうので、ウェブサイトを作ったときはできるだけ様々な端末、ブラウザで表示を確認するのが良いです。
他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。

投稿者プロフィール

kinukawahiroyasu

最新の投稿

• CSS2020.12.11下書き
• web関連2020.12.11WordPress 下書き
• CSS2018.02.02CSSで簡単にInstagram風の画像にする方法
• HTML2017.12.28tumblrの記事をWordPressに埋め込む方法