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

最終更新日:2017年09月23日  (初回投稿日:2017年05月23日)

今回は 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.

<div id="smp1">
<p>〜サンプルテキスト〜</p>
<p>〜サンプルテキスト〜</p>
<p>〜サンプルテキスト〜</p>
<p>〜サンプルテキスト〜</p>
</div>
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 を指定しています。

<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: relativeleft: -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.

<div id="smp2">
<div class="smp2imgbox">画像とか</div>
<p>〜サンプルテキスト(略)〜</p>
</div>
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.

<div id="smp4_1">
<p>〜サンプルテキスト(略)〜</p>
<p>〜サンプルテキスト(略)〜</p>
<p>〜サンプルテキスト(略)〜</p>
<p>〜サンプルテキスト(略)〜</p>
<p>〜サンプルテキスト(略)〜</p>
</div>
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.

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.