CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】現役Webデザイナーが解説
初心者向けにCSSでoverflowを使って要素からはみ出た際の表示の指定方法について解説しています。レイアウトが崩れないように実際の業務でも使える知識です。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
今回は、CSSのoverflowではみ出た表示の指定をする方法を説明します。
文章が長くなり、外枠からはみ出てしまう時、手動で改行などしなくてもCSSで調整することができるので覚えておくと良いでしょう。
目次
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
田島メンター！CSSで枠からはみ出た文章の折り返しをしたいんですけど・・・
そういう時はoverflowっていうプロパティを使うと便利だよ！
例えば、枠内でスクロールして見ることもできますか？
全然できるよ！種類もいくつかあるから1個ずつ見ていこうか！
わかりました〜！
overflowを使う時の値の種類
テキストを囲むボックスに、「overflowプロパティ」を設定すると、テキストがボックスからはみ出す場合、どういう風に表示するか、あらかじめ設定する事ができます。
「overflowプロパティ」は4種類の値を持ちます。
- visible：初期値。はみ出して表示されます。
- scroll：スクロール表示されます。
- hidden：表示されません。
- auto：ブラウザに依存します。（一般的にはスクロールと同じ状態になる）
それぞれ詳しく見ていきましょう。
「visible」
テキストがボックス内に収まらない場合、テキストはボックスからはみ出して表示されます。
これが初期値になっています。
初期値というのはoverflowを設定しない場合、「overflow: visible;」が設定されていると見なされます。
「Internet Explorer」では内容がはみ出すのではなく、ボックスが内容に合わせて拡張されます。
「chrome」や「Firefox」や「Edge]では領域をはみ出して表示します。
「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;
background-color: #e22276;
}
ブラウザによって変わりますが、だいたい「scroll」が適用されるはずです。
「overflowプロパティ」はデフォルトで「visible」が設定されており、はみ出したときにそのまま表示されてしまいます。
以上、overflowの使い方について解説しました。
CSSを用いてHTMLをどのように見せたいのか考え、コーディングを行っていきましょう。
監修してくれたメンター
| 中本賢吾（なかもとけんご）
アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。ノーコードチャットアプリリリース、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞などボランティアで地域の職業プログラマー育成活動も行っている。 |
一応一通り説明したんだけど、どうかな？
スクロールするのは結構便利ですね！
ボックス内に入りきらない時は「overflow:auto;」で基本設定しておけば間違いないと思うよ！
自動で折り返してスクロールバーもついてるので、使ってみますね♪
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
