overflow/はみ出た時の表示方法

overflowプロパティを使うと枠からはみ出た時の表示方法を指定出来ます。

説明

 overflowは枠からはみ出た時に隠す、スクロールバーを表示してスクロールさせる等の表示方法を設定出来ます。

overflow説明

構文

 overflowプロパティの構文は以下の通りです。

overflow: 表示方法;

 表示方法は以下が指定出来ます。

【表示方法の指定】
表示方法 説明
visible はみ出して表示(デフォルト)
hidden 隠す(表示しない)
scroll スクロールバーが表示され、スクロールで表示
auto 自動(通常は縦のみスクロールバー表示)

visible利用例

 overflowのvisible利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
height:4em;
line-height:100%;
overflow: visible;
}

<div>
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目<br>
6行目
</div>

 上記では高さをheigthで4em(文字)に設定し、分かり易さのためline-heightで100%を指定しています。100%を指定する事で文字の高さとラインの高さが同じになるためです。

1行目
2行目
3行目
4行目
5行目
6行目

 下の方の行がはみ出て表示されます。

 尚、height等高さ関連の指定をしていない場合は、通常は以下のように自動で高さが調整されるため、はみ出る事はありません。

1行目
2行目
3行目
4行目
5行目
6行目

hidden利用例

 hiddenを指定した時の例は以下の通りです。

div {
height:4em;
line-height:100%;
overflow: hidden;
}

<div>
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目<br>
6行目
</div>

 上記を表示すると以下になります。

1行目
2行目
3行目
4行目
5行目
6行目

 5,6行目が隠れて表示されません。

scroll利用例

 scrollを指定した時の例は以下の通りです。

div {
height:4em;
line-height:100%;
overflow: scroll;
}

<div>
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目<br>
6行目
</div>

 上記を表示すると以下になります。

1行目
2行目
3行目
4行目
5行目
6行目

 スクロールバーが表示されます。

 因みに、行数が2行等、4emに満たない場合でも以下のようにスクロールバーが表示されます。

1行目
2行目

auto利用例

 autoを指定した時の例は以下の通りです。

div {
height:4em;
line-height:100%;
overflow: auto;
}

<div>
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目<br>
6行目
</div>

 上記を表示すると以下になります。

1行目
2行目
3行目
4行目
5行目
6行目

 縦方向のスクロールバーが表示されます。

 因みに、行数が2行等、4emに満たない場合はスクロールバーが表示されません。

1行目
2行目

留意点

 スマートフォンではデフォルトでスクロールバーが表示されないため、スクロール出来るのか分かり辛い場合があります。

 このため、枠を設けるか説明を入れる等でスクロール出来る事を示すと分かり易くなります。

【以下はスクロール可能です】
1行目
2行目
3行目
4行目
5行目
6行目

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)