CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】
初心者向けにCSSでoverflowを使って要素からはみ出た際の表示の指定方法について解説しています。レイアウトが崩れないように実際の業務でも使える知識です。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
今回は、CSSのoverflowではみ出た表示の指定をする方法を説明します。
文章が長くはみ出てしまうことがある場合に、手動で改行などせずに事前に指定できるので覚えておくと良いでしょう。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
田島メンター！CSSで枠からはみ出た文章の折り返しだったりをしたいんですけど・・・
そういう時はoverflowっていうプロパティを使うと便利だよ！
例えば、枠内でスクロールして見れるとかもできますか？
全然できるよ！種類もいくつかあるから1個ずつ見ていこうか！
わかりました〜！
目次
overflowを使う時の値の種類
「overflowプロパティ」は、ボックスの範囲内に内容が入りきらない時、はみ出した部分をどうするのかを設定できます。
「overflowプロパティ」は4種類の値を持ちます。
- visible：初期値。ボックスからはみ出して表示される
- scroll：入りきらなかった内容がスクロールして見られる
- hidden：はみ出た部分は表示されない
- auto：ブラウザに依存する（一般的にはスクロールと同じ状態になる）
それぞれ詳しく見ていきましょう。
「visible」
ボックスからはみ出して表示されます。これが初期値になっています。
初期値というのは設定しない場合、「overflow: visible;」が設定されているのもと見なされます。
「Internet Explorer」では内容がはみ出すのではなく、ボックスが内容に合わせて拡張され、「chrome」や「Firefox」では領域をはみ出して表示します。
「scroll」
入りきらなかった内容はスクロールして見られるようになります。
スクロールバーが表示されるので、スクロールバーを実装して見せたいときに使えるでしょう。ただし、「Internet Explorer」では常時スクロールバーが表示されるため、デザインの際注意が必要です。
「hidden」
はみ出た部分は表示されず、HTMLにないものとして処理されます。
「auto」
ブラウザに依存して自動で決まります。一般的にはスクロールして見られるようになり、どのブラウザでもだいたい同じものになると思います。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
実際に書いてみよう
実際にコードを書いてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="hid">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
<br>
<div class="scr">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
<br>
<div class="vis">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
</body>
</html>
CSS
div.hid{
width: 200px;
height: 100px;
overflow: hidden;
background-color: #FF9999;
}
div.scr{
width: 200px;
height: 100px;
overflow: scroll;
background-color: #99FF99;
}
div.vis{
width: 200px;
height: 100px;
overflow: visible;
background-color: #9999FF;
}
実行すると以下のように表示されます。
それぞれ表示を確認してみましょう。
hidden
hiddenの場合、このようにはみ出た部分は表示されません。スクロールさせて表示することもできません。
scroll
scrollの場合、入りきらなかった内容はスクロールして見られるようになります。デフォルトの場合、文字が div の横幅 width で折り返され、縦方向にスクロールバーが表示されます。
cssに white-space:nowrap （自動的に改行しないという意味）を指定することで、横方向にスクロールさせることも可能です。
div.scr{
width: 200px;
height: 100px;
overflow: scroll;
white-space:nowrap;
background-color: #99FF99;
}
この他、overflow-x や overflow-y プロパティを使い、縦と横のスクロールバーの表示を細かく制御することも可能です。
visible
visibleの場合、ボックスからはみ出して表示されます。青の部分がdivボックスです。デフォルトの場合、文字が div の横幅 width で折り返され、縦方向にはみ出して表示されます。
こちらもscrollと同様、cssに white-space:nowrap を指定することで、横方向にスクロールさせることも可能です。
div.vis{
width: 200px;
height: 100px;
overflow: visible;
white-space:nowrap;
background-color: #9999FF;
}
また、ボックスの高さを指定しないと、はみ出しに合わせてボックスの高さも自動的に変わるようになります。
div.vis{
width: 200px;
/* height: 100px; 高さをコメントアウト */
overflow: visible;
background-color: #9999FF;
}
このように、overflowの指定によって、表示が変わることが分かりますね。
続いて、「auto」を適用してみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="aut">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
</body>
</html>
CSS
div.aut{
width: 200px;
height: 100px;
overflow: auto;
}
ブラウザによって変わりますが、だいたい「scroll」が適用されるはずです。
「overflowプロパティ」はデフォルトで「visible」が設定されており、はみ出したときにそのまま表示されてしまいます。
以上、overflowの使い方について解説しました。
CSSを用いてHTMLをどのように見せたいのか考え、コーディングを行っていきましょう。
一応一通り説明したんだけど、どうかな？
scrollするのは結構便利ですね！
ボックス内に入りきらない時は「overflow:auto;」で基本設定しておけば間違いないと思うよ！
自動で折り返してスクロールバーもついてるので、使ってみますね♪
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
