【CSS】 overflow、white-spaceの基本の使い方｜HTML＆CSS入門講座（18）

はじめに

　HTML＆CSS入門講座の第十八弾として、【CSS】 overflowの基本の使い方ついて紹介します。

　この記事を読むと次の疑問について知ることができます。

cssのoverflowとは？

　cssのoverflowは、HTML要素のボックスからはみ出た部分をどのように扱うかを指定するプロパティです。

　はみ出た部分は隠す、そのままはみ出て表示、スクロールさせて表示などができます。

overflowの基本的な使い方

overflowの取れる値と書き方

　overflowは、初期値はvisibleになっています。

　visibleでは、テキストがボックスに収まらない場合ははみ出してそのまま表示します。

　それでは、cssではどのようにしてoverflowを使うのでしょうか？

　overflowの書き方は、次の通り

overflowの値一覧

　カーソルの値一覧を次に載せます。

overflowを使ってみよう！

　以下の表示の例は、Windows10のChromeブラウザーで見た場合を載せています。

同一の要素にボックス枠を作成した場合のoverflowの挙動

　ここでは、それぞれのoverflowの値を指定した際にどのように表示されかを見ていましょう。

　分かり易いように、横並びにするためにdisplay:flexを用い、それぞれの要素の間に20pxの幅のスペースを取るようにしています。

<div id="oya01">
<p class="ovf1">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf2">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf3">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf4">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
</div

#oya01 {
display:flex
}
.space {
width: 20px;
}
.ovf1 {
width: 100px;
height: 50px;
overflow:visible;
background-color: aqua;
}
.ovf2 {
overflow: hidden;
width: 100px;
height: 50px;
background-color:black;
color:white;
}
.ovf3 {
overflow: scroll;
width: 100px;
height: 50px;
background-color:red;
color:white;
}
.ovf4 {
overflow:auto;
width: 100px;
height: 50px;
background-color:blue;
color:white;
}

　結果は次の通り。

幅のみ指定た場合のoverflowの挙動

　ここでは、今まで各要素で高さを指定していましたが、高さを取り除き幅だけ指定した場合はどのようになるかを見てみましょう。

<div id="oya02">
<p class="ovf5">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf6">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf7">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf8">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
</div>

#oya02 {
display:flex
}
.space {
width: 20px;
}
.spaceh {
height: 20px;
}
.ovf5 {
width: 100px;
overflow:visible;
background-color: aqua;
}
.ovf6 {
overflow: hidden;
width: 100px;
background-color:black;
color:white;
}
.ovf7 {
overflow: scroll;
width: 100px;
background-color:red;
color:white;
}
.ovf8 {
overflow:auto;
width: 100px;
background-color:blue;
color:white;
}

　結果は次の通り。

white-spaceとは？

　white-spaceは、HTML文書中において、自動改行するか？複数の空白を一つの空白にするか？、改行を空白にするか？など、改行やスペース、タブの扱いを指定するプロパティです。

white-spaceの取れる値と書き方

　white-spaceは、初期値はnormalになっています。

　normalでは、連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、自動的に折り返しをして表示します。

　それでは、cssではどのようにしてwhite-spaceを使うのでしょうか？

　white-spaceの書き方は、次の通り

white-spaceの値一覧

　white-spaceであ取れる値には、次のものがあります。

white-spaceを使ってみよう！

　overflowで使った文書を使い、区切りの良い文で改行を入れた文書にして、white-spaceに色々な値と入れた時にどのような挙動を示すか見てみましょう？

<div id="oya03">
<p class="ovf9">
今日は 天気だ！
明日はどうだろうか？
明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf10">
今日は 天気だ！
明日はどうだろうか？
明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf11">
今日は 天気だ！
明日はどうだろうか？
明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf12">
今日は 天気だ！
明日はどうだろうか？
明後日はどうだろうか？</p>
<p class="space"></p>
<p class="ovf13">
今日は 天気だ！
明日はどうだろうか？
明後日はどうだろうか？</p>
</div>

#oya03 {
display:flex;
}
.space {
width: 20x;
}
.ovf9 {
width: 100px;
white-space: normal;
background-color: aqua;
}
.ovf10 {
white-space: nowrap;
width: 100px;
background-color:black;
color:white;
}
.ovf11 {
white-space: pre;
width: 100px;
background-color:red;
color:white;
}
.ovf12 {
white-space: pre-wrap;
width: 100px;
background-color:blue;
color:white;
}
.ovf13 {
white-space: pre-line;
width: 100px;
background-color:green;
color:white;
}

　結果は次の通り。

　一番左の薄青色のボックス（100px、高さ指定なし）には、「white-space」の「normal（初期値）」を指定しているため、途中の改行、スペースが半角スペースにまとめられ、文と文の間に半角すぺーしが入り、薄青の枠内に流し込まれています。

　左から二番目の黒のボックス（100px、高さ指定なし）には、「white-space」の「nowrap」を指定しているため、途中の改行、スペースが半角スペースにまとめられ、文と文が繋がり一つの長い文となり、枠からはみ出た分は隠されます。

　左から三番目の赤のボックス（100px、高さ指定なし）には、「white-space」の「pre」を指定しているため、途中の改行、スペースが半角スペースはそのまま残り、枠からはみ出た分は隠されます。

　右から二番目の青のボックス（100px、高さ指定なし）には、「white-space」の「pre-wrap」を指定しているため、途中の半角スペース、タブ、改行をそのまま表示し、自動的な折り返しも有るために、全文が枠内おさまり、各文との間に改行がなされて表示されています。

　一番右の青のボックス（100px、高さ指定なし）には、「white-space」の「pre-line」を指定しているため、途中の半角スペース、タブ、改行をそのまま表示し、自動的な折り返しも有るために、全文が枠内おさまり、各文との間に改行がなされて表示されていますが、「pre-wrap」との違いは、核文との間の改行が除かれていることです。

oerverflow の scrollと white-space の nowrap の組み合わせ

「oerverflow」の「scroll」や「auto」と「white-space」の「nowrap」を組み合わせると、見えない部分を横スクロールバーで見ることができるようになります。

<p class="ovf14">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="ovf15">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>

.ovf14 {
overflow:scroll;
width: 200px;
white-space:nowrap;
background-color: aqua;
}
.ovf15 {
overflow: auto;
width: 200px;
white-space:nowrap;
background-color: aqua;
}

　結果は次の通り。

　「oerverflow」の「scroll」と「auto」の違いは、縦スクロールバーが表示されるかどうかで、「scroll」は縦スクロールバーが表示され、「auto」は縦スクロールバーが表示されません。

縦スクロールバー又は横スクロールバーを消したい場合

　「oerverflow」の「scroll」を使用すると、縦、横の2つのスクロールバーが出てきます。

　縦、横のどちらかのスクロールバーだけにしたいと思うわれる場合もあるでしょう。

　その場合は、overflow-xとoverflow-yを使います。

　この使い方は、基本的にoverflowと同じです。

　それでは、前に利用した文書でボックス（150px、50px）を作り、縦のみのスクロールバー、横のみのスクロールバーをそれぞれ表示させてみましょう。

<p class="ovf16">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="ovf17">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>
<p class="ovf18">今日は天気だ！明日はどうだろうか？明後日はどうだろうか？</p>

.ovf16 {
overflow-x:scroll;
overflow-y: hidden;
width: 150px;
height: 50px;
background-color: aqua;
}
.ovf17 {
overflow-x:scroll;
overflow-y: hidden;
white-space: nowrap;
width: 150px;
height: 50px;
background-color: aqua;
}
.ovf18 {
overflow-y:scroll;
overflow-x: hidden;
width: 150px;
height: 50px;
background-color: aqua;
}

　結果は次の通り。

　一番上の図は、単に「overflow-x:scroll」、「overflow-ｙ:hiddenl」を設定しても、横スクロールバーが表示されても、使えない状態になっています。

　真ん中の図は、「overflow-x:scroll」と「overflow-ｙ:hiddenl」を設定し、さらに、White-space:nowrapを設定することにより、横スクロールバーが利用できるようになります。

　そして、一番下の図は、単にoverflow-ｙ:scroll、overflow-x:hiddenlに設定するだけで、縦スクロールバーが利用できるようになります。

おわりに

　如何だったでしょうか？

　cssのoverflowとは？、overflowの基本的な使い方はどうするの？、overflowの取れる値と書き方、overflowの値一覧、overflowを使ってみよう！、同一の要素にボックス枠を作成した場合のoverflowの挙動、幅のみ指定た場合のoverflowの挙動、white-spaceとは？、white-spaceの取れる値と書き方、white-spaceの値一覧、white-spaceを使ってみよう！、縦スクロールバー又は横スクロールバーを消したい場合どうするの？などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。