【20】overflowで、あふれた中身の表示方法を指定しよう

今回は overflowプロパティ について。
overflow は読んで字のごとくあふれた（オーバーフロー）中身をどう表示するか指定できます。

要素にサイズ指定をすると、テキストなどの中身（コンテンツ）が多いとはみ出しますよね。
それをユーザーにスクロールして見てもらう（scroll）のか、はみ出た分を隠す（hidden）のかを決めます。はみ出しっぱなし（visible）がデフォルト値です。

overflowプロパティは、CSS3で変わると言われてるんですが（数年前からドラフトがあるが、内容がまだ定まらないようで...）、今日のところは現行の CSS2.1 の仕様でメモっておきます。（2017年5月記）

本日のINDEX

1. overflowプロパティの値
   1. サンプル：overflow の4つの値
2. レイアウトでけっこう重宝する overflow:hidden
   1. 文字ブロックの高さを統一したいとき
   2. 画像などの切り抜き表示（クリッピング）にも使えます
   3. floatのテキストが中途半端なときは hidden か auto
   4. floatを使った時の clearの代わりにも使えます
3. overflow-x、overflow-yプロパティや、clipという値
   1. サンプル：overflow-x
   2. サンプル：overflow-y
   3. overflowで新しい値「clip」を試してみたけど

参考資料：
CSS 2.1 Specification__11 Visual effects（これが2.1の仕様）
CSS Overflow Module Level 3__W3C Working Draft, 31 May 2016（←ドラフト）

overflowプロパティの値

overflowプロパティの値は、キーワードだけでとてもシンプルです。

visible	これがデフォルト値。オーバーフローの処置無し。はみ出しっぱなしです。
hidden	あふれた分は非表示にします。
scroll	常にスクロールバーを出します。あふれた分はスクロールで表示できます。
auto	ブラウザにお任せ。必要ならスクロールバーを出します。

値の継承	なし	適用できる要素	ブロックレベル要素。テーブルセル。 非置換要素で display: inline-blockのもの。

【非置換要素（non-replaced elements）とは】
インラインの要素は「置換要素（replaced elements）」「非置換要素（non-replaced elements）」に分けられます。
●置換要素：要素特有の中身に置換されるもの。代表格は <img>要素
●非置換要素：上記以外のインラインの要素。中身がテキストのものですね。<span> <b> <ins> <del>とか

というわけで、overflow は「テキストを扱うインライン要素に display: inline-block を指定したもの」にも適用できるということ。

インラインレベルの置換要素・非置換要素については、
【9】HTML要素の インライン・ブロックレベル について をご覧ください。
display: inline-block については、
【17-1】displayプロパティでボックスの表示形式を自由に変えよう をご覧ください。

サンプル：overflow の4つの値

overflowプロパティの4つの値でサンプルを作ってみました。

overflow: visible　デフォルト。はみ出しっぱなし。Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow: hidden　あふれた分は非表示。Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow: scroll　常にスクロールバーを出す。Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow: auto　ブラウザ任せ。必要ならスクロールバーを出す。Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

上のサンプルのHTMLです。

<div id="smp1">
<p>〜サンプルテキスト〜</p>
<p>〜サンプルテキスト〜</p>
<p>〜サンプルテキスト〜</p>
<p>〜サンプルテキスト〜</p>
</div>

サンプルのCSSです。

div#smp1 {margin:0; padding:0}
div#smp1 p {
	line-height:1.4em;
	margin:0 0 2.5em;
	padding:1em;
	border:solid 1px #ccc;
	width:100%;
	height:50px;
	overflow:visible}  /*←これがデフォルト（略してもこの値）*/
div#smp1 p:nth-child(2) {overflow:hidden}
div#smp1 p:nth-child(3) {overflow:scroll}
div#smp1 p:nth-child(4) {overflow:auto}

レイアウトでけっこう重宝する overflow:hidden

あふれたら隠す overflow:hidden ですが、「隠してどうすんだ？」と思うけど、コレが意外といろいろな用途に使えます。

文字ブロックの高さを統一したいとき

例えばサイトのアーカイブ一覧 などで、各記事のタイトルや description（抜粋文）によって行数が変わると、ボックスの高さがバラバラになってレイアウトが見苦しくなりますよね。
タイトルや紹介文の行数を揃えるなんて大変だし。

そんなとき重宝するのが overflow: hidden。
ボックスの高さを決め、はみ出た分は overflow: hidden と指定しておけば、各ボックスの高さが揃ってスッキリします。

画像などの切り抜き表示（クリッピング）にも使えます

overflow: hidden で、画像などをボックスで切り抜き表示することもできます。

この画像を overflow: hidden を使って切り抜いてみます。

こんな感じ。親要素の <div>を border-radius:50% で円形にしてみました。
この親要素の <div>に overflow: hidden を指定しています。

上のサンプルのHTMLとCSS

<div class="clip_smp">
  <img src="image/img.jpg">
</div>

<style>
.clip_smp {
	width:250px;
	height:250px;
	border-radius:50%;
	overflow:hidden}
.clip_smp img {
	width:auto;  /*画像を原寸に*/
	position:relative;  /*leftプロパティを使うため*/
	left:-60px}  /*左にずらして、画像の真ん中あたりを表示するようにしました*/
</style>

サンプルコードの中で、position: relative、left: -60px という指定がありますね（13、14行目）
leftプロパティは要素の左の位置を変更する指定です。これは positionプロパティで位置指定された要素にしか効かないので positionも指定してるというわけです。
positionプロパティ、leftプロパティに関しては、近いうちに詳しくやります。

floatのテキストが中途半端なときは hidden か auto

これは知っておくと便利です。
画像などにテキストを回り込ませたいときに使う floatプロパティですが、この↓ように、テキストが画像の下に中途半端に回り込むときがありますね。

画像とか

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content. Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

この 中途半端な回り込みをやめさせたいときは、回り込ませるテキストのほうに、 overflow: hidden または overflow: auto を指定するといいかんじに。

画像とか

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content. Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

上のサンプルのHTMLです。

<div id="smp2">
<div class="smp2imgbox">画像とか</div>
<p>〜サンプルテキスト（略）〜</p>
</div>

サンプルのCSSです。

div#smp2 {
   margin:0;
   padding:10px;
   border:solid 1px #ccc}
div#smp2 .smp2imgbox {
   width:100px;
   height:100px;
   margin:5px 10px 10px 0;
   text-align:center;
   background:#6CF;
   float:left}  /*←floatを指定しています*/
div#smp2 p {
   margin:0;
   overflow:auto}  /*←overflow:hidden でも同じです*/

floatプロパティ は次回やります。

floatを使った時の clearの代わりにも使えます

floatプロパティを使うと、あとの要素にずっと影響するので、その作用を終わらせる役目の clearプロパティが用意されています。
この clearプロパティと似た仕事をするのが overflow: hidden または overflow: auto です。
これは、次回の floatプロパティ で サンプルで説明しますね。

overflow-x、overflow-yプロパティや、clipという値

ここからは、overflow関連のドラフト情報をメモっておきます。
草案段階なので、今後 違うモノになる可能性もありますので、あしからず。（2017年5月記）

参考：CSS Overflow Module Level 3__W3C Working Draft, 31 May 2016

このドラフトでは、overflow-xプロパティ と overflow-yプロパティができて、横方向・縦方向のオーバーフローを別々に指定できるようになり、overflowプロパティはそれらのショートハンドプロパティになるとのことです。
一時は「no-display」「no-content」という値もあったけど、今のドラフトでは消えてました。

代わりに「clip」という値が新たに登場しています。
「clip」は「hidden」のようにスクロールバーを出さずに、あふれた分を隠すんだそうです。
両者の違いは、
「hidden」は、隠すけどスクロール可能でなくてはならない（=スクロールコンテナである）
「clip」は、スクロールを禁止する（=スクロールコンテナではない）だそうです。
う〜ん何やら今ひとつ実感できないけど、clip というコトバからして、完全にクリップ（切抜き）してしまうようですね。

値は 「visible」「hidden」「clip」「scroll」「auto」で、新しく「clip」が加わっただけ。
とりあえず、ざっとサンプルを作って試してみました。

サンプル：overflow-x

まずは overflow-x のサンプルです。

overflow-x: visible　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-x: hidden　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-x: clip　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-x: scroll　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-x: auto　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

上のサンプルのHTMLです。

<div id="smp4_1">
<p>〜サンプルテキスト（略）〜</p>
<p>〜サンプルテキスト（略）〜</p>
<p>〜サンプルテキスト（略）〜</p>
<p>〜サンプルテキスト（略）〜</p>
<p>〜サンプルテキスト（略）〜</p>
</div>

サンプルのCSSです。

div#smp3_1 {margin:0; padding:0}
div#smp3_1 p {
    line-height:1.4em;
	margin:0 0 2.5em;
	padding:1em;
	border:solid 1px #ccc;
	width:100%;
	height:50px;
	overflow-x:visible}
div#smp3_1 p:nth-child(2) {overflow-x: hidden}
div#smp3_1 p:nth-child(3) {overflow-x: clip}
div#smp3_1 p:nth-child(4) {overflow-x: scroll}
div#smp3_1 p:nth-child(5) {overflow-x: auto}

overflow-x: scroll としても 横スクロールバーが出るブラウザは少ないもよう。（2017年5月記）
ただ、これは IEの独自仕様なので、IE では横スクロールバーのみが表示され、縦スクロールバーは表示されないそうです。（すいません。今 IE環境なくて確認できてません）

IEだと、なんの細工もせずに、普通に overflow-x だけで横のスクロールバーが出るのかな。
例えば white-space: nowrap（テキストを改行させないスタイル）も同時に指定すれば、上のサンプルでも横スクロールバーが出ます。でもこの指定なら overflowプロパティや overflow-yプロパティ でも同じく横スクロールバーが出ます。（ブロックレベルの仕様なので）
それじゃ overflow-x を使う意味が無いと思い、サンプルではあえて overflow-x だけで試してみました。

ちなみに下のサンプルは、<p>要素に「white-space: nowrap」と指定したもの。
テキストを強制的に改行をしないようにして、横スクロールバーを出させています。
（ただし overflowプロパティ、overflow-yプロパティでも「white-space: nowrap」を指定すれば まったく同じ表示になります）

overflow-x: scroll　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-x: auto　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

サンプル：overflow-y

次に overflow-y のサンプルです。
これは多くのブラウザで使えるようです。「clip」以外は（2017年5月記）
overflow-y: scroll で横スクロールバーが消えているのが overflow: scroll と違うところ。

overflow-y: visible　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-y: hidden　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-y: clip　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-y: scroll　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

overflow-y: auto　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

サンプルのCSSです。（HTMLは最初のサンプルと同じです）

div#smp3_2 {margin:0; padding:0}
div#smp3_2 p {
    （途中略：最初のサンプルとまったく同じ指定です）
	overflow-y: visible}
div#smp3_2 p:nth-child(2) {overflow-y: hidden}
div#smp3_2 p:nth-child(3) {overflow-y: clip}
div#smp3_2 p:nth-child(4) {overflow-y: scroll}
div#smp3_2 p:nth-child(5) {overflow-y: auto}

overflowで新しい値「clip」を試してみたけど

overflow はショートハンドとなって、値も2つまで（overflow-x　overflow-y の順で半角スペース区切りで）指定できるという話だったんですが、今のドラフトには「値が2つ」について特に触れておらず、今のところどのブラウザも ショートハンドとしての扱いは無いようです。（2017年5月記）

ちなみに、新しい値「clip」でサンプルを作ってみました。
これは「overflow: clip」としたので「x方向も y方向もクリップ」というショートハンドになるんでしょうね。今のところ実装してるブラウザは無いみたいですけど。（2017年5月記）

overflow: clip　サンプルテキスト： Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

次回予告

overflow:hiden は、今回の記事にも書いたように レイアウトで欠かせないのでよく使います。
overflow-y は個人的によく使ってたんですが、これはまだ正式な仕様じゃなかったんですねw
とにかく今後、仕様があまり複雑にならないことを祈ってます（笑）

さて次回は、floatプロパティについて。
今回の記事にも出てきましたが、テキストを回り込ませるのに使ったり、ボックスを左右に並ばせることができるので、レイアウトによく使うプロパティです。