width,heightを使って高さを設定したコンテンツを入れる箱に、
サイズを超えるもの、画像やテキストを入れるとどうなるのか。
今回はその事態に起きてしまった時に対処する情報を
書いていきます。
多くのブラウザでは、テキストを大量に書いて
箱からはみ出すような事態が起きた場合、テキストの場合では
下にはみ出します。このはみ出した場合に、どのように
はみ出した部分を表示するかを設定するのがoverflowプロパティです。
このプロパティに指定できるのは以下の通りです。
値 | 説明 |
visible | デフォルト値。内容が箱からはみ出して表示される。 |
scroll | ボックスにスクロールがつき、はみ出る部分がスクロールで表示される。 |
hidden | はみ出る部分のコンテンツは表示しない。 |
auto | ほとんどのブラウザで、scrollと同じ。 |
「scroll」を設定すると擬似的にテキストエリアとして
使うことができますが、スマートフォンで見た場合
スクロールバーが表示されず、はみ出る部分のコンテンツが
隠れてしまうので、気をつけましょう。
1 2 3 4 5 6 7 8 9 |
*{margin:0;padding:0;} #container{ width:200px; height:200px; background-color:#f0f0f0; margin:0 auto; overflow:scroll; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <div> <p>いままで、様々なCSSのプロパティを学んできました。今回はoverflowプロパティを今回学習します。divタグで大きさを指定して、その中にテキストを打ち込んでいくと文字がそのdivの外にはみ出てしまいます。背景が白で周囲と同化しているなら問題はありませんが、周囲と色が異なるとレイアウトが崩れてしまいます。</p> </div> </div> </body> </html> |