{overflow:値;}でボックスからはみ出る部分をスクロールで表示する
ことができます。
■ ボックス内に納まらない部分の表示方法
ボックス内のはみ出る部分の内容の見え方については以下の
値を指定します。
値 | 説明 |
visible | ボックスからはみ出して表示します。(デフォルト) |
scroll | はみ出る部分はスクロールして表示します。 |
hidden | はみ出る部分は表示されません。 |
auto | はみ出る部分はスクロールして表示します。(自動) |
【ブラウザ表示】
ボックスに 納まらない部分は スクロール して 見る
ことが できま す。
ボックスに 納まらない部分は 表示されなく なって しま
いま す。
ソース
<p class="box14">
ボックスに納まらない部分は<br>スクロール<br>
して<br>見る
<br>ことが<br>できま<br>す。
</p>
<p class="box15">
ボックスに納まらない部分は<br>表示されなく<br>
なって<br>しま
<br>いま<br>す。
</p>
外部ファイル
p.box14{
border:1px solid;
width:200px;
height:70px;
overflow:scroll;
}
p.box15{
border:1px solid;
width:200px;
height:70px;
overflow:hidden;
}
<body>~</body>に直接記入する場合
<p style="border:1px solid; width:200px; height:70px;
overflow:scroll;">
ボックスに納まらない部分は<br>スクロール<br>
して<br>見る
<br>ことが<br>できま<br>す。
</p>
<p style="border:1px solid; width:200px; height:70px;
overflow:hidden;">
ボックスに納まらない部分は<br>表示されなく<br>
なって<br>しま
<br>いま<br>す。
</p>
■ その他の項目
・
枠線の太さを指定する
・
枠線の種類を指定する
・
枠線の色を指定する
・
個別の枠線を一括に指定する
・
ボックスの横幅、高さを指定する
・
外側、内側の余白を指定する
・
背景色や画像を指定する
・
背景画像の表示方法を指定する
・
背景画像の表示位置を指定する
・
ボックスを並べる
・
ボックスの配置方法を指定する
・
背景画像の表示領域を指定する
・
枠線の4隅の角丸を指定する
・
枠線の4隅の角丸を個別に指定する
スタイルシート一覧のページに戻る
|