|
トップページ > スタイルシートリファレンス > overflow
★スタイルシートリファレンス
|
overflow･････はみ出た内容の表示方法を指定する
     
 
   
 
overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。 overflowプロパティは、デザインやインターフェースの好みで、 擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。 ■値
■使用例スタイルシート部分は外部ファイル（sample.css）に記述。p.sample1 {width:200px; height:60px; background-color:#ee0000; overflow:visible;}p.sample2 {width:200px; height:60px; background-color:#ee0000; overflow:scroll;} p.sample3 {width:200px; height:60px; background-color:#ee0000; overflow:hidden;} p.sample4 {width:200px; height:60px; background-color:#ee0000; overflow:auto;} HTMLソース<html><head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1"> <b>visible</b><br> ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。<br> Default. Content is not clipped and scroll bars are not added. </p> <p class="sample2"> <b>scroll</b><br> 入りきらない内容はスクロールして見られるようになります。<br> Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object. </p> <p class="sample3"> <b>hidden</b><br> はみ出た部分は表示されません。<br> Content that exceeds the dimensions of the object is not shown. </p> <p class="sample4"> <b>auto</b><br> ブラウザに依存します（一般的にはスクロールして見られるようになります）。<br> Content is clipped and scrolling is added only when necessary. </p> </body> </html> ↓↓↓ ブラウザ上の表示
visible
scroll
hidden
auto ■関連項目
overflow････････････････はみ出た内容の表示方法を指定する
overflow-x･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） overflow-y･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） position････････････････ボックスの配置方法（基準位置）を指定する top････････････････････上からの配置位置（距離）を指定する bottom････････････････下からの配置位置（距離）を指定する left････････････････････左からの配置位置（距離）を指定する right･･･････････････････右からの配置位置（距離）を指定する display･････････････････要素の表示形式（ブロック・インライン）を指定する float･･･････････････････左または右に寄せて配置する clear････････････････････回り込みを解除する z-index･･････････････････重なりの順序を指定する visibility･････････････････ボックスの表示・非表示を指定する clip･････････････････････ボックスを切り抜き表示（クリッピング）する direction････････････････文字表記の方向（左右）を指定する unicode-bidi･････････････Unicodeの文字表記の方向を上書きする writing-mode････････････文字表記の方向（縦横）を指定する（IE独自の仕様） |
|
トップページ > スタイルシートリファレンス > overflow
|
©2009 HTMQ