スクロールバー付の表示エリアを作成するには、overflowを使用します。
overflowは、divタグや pタグなどに使用できます。
overflowの種類
overflowに指定できる値には以下4種類あります。
値 | 意味 |
---|---|
scroll | 表示する文字に係らず常にスクロールバーを表示する。 |
visible | 表示する文字がはみ出てもスクロールバーを表示せずに そのまま表示する。(デフォルト) |
hidden | 表示する文字がはみ出たらその分は表示しない。 |
auto | 表示する文字がはみ出た場合のみスクロールバーを表示する。 |
サンプル
例)表示する文字に係らず常にスクロールバーを表示する
1 2 3 4 5 6 |
div.sample{ width:150px; height:60px; border:1px solid #808080; overflow:scroll; } |
1 2 3 4 |
<div class="sample"> ABCDE<br> ABCDE </div> |
ABCDE
ABCDE
文字が枠に収まっていますが、スクロールバーは表示されます。
例)文字がはみ出てもスクロールバーを表示しない(デフォルト)
1 2 3 4 5 6 |
div.sample{ width:150px; height:40px; border:1px solid #808080; overflow:visible; } |
1 2 3 4 5 |
<div class="sample"> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ </div> |
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
文字が枠からはみ出ていますが、スクロールバーは出ずにそのまま表示されます。
例)表示する文字がはみ出たらその分は表示しない
1 2 3 4 5 6 |
div.sample{ width:150px; height:45px; border:1px solid #808080; overflow:hidden; } |
1 2 3 4 5 |
<div class="sample"> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ </div> |
文字が枠からはみ出ても、スクロールバーは表示されず枠からはみ出た分は表示されません。
例)表示する文字がはみ出た場合のみスクロールバーを表示する
1 2 3 4 5 6 |
div.sample{ width:150px; height:80px; border:1px solid #808080; overflow:auto; } |
1 2 3 4 |
<div class="sample"> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ </div> |
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
表示する文字が横方向のみ枠からはみ出ているので、横スクロールバーのみ表示されます。
備考
- デフォルトでは文字がはみ出てもスクロールバーは表示されないので、スクロールバーを表示させたい場合は上記例のように明示的に指定する必要があります。
コメント