https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

はみ出る部分を表示させる

{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>

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

■ その他の項目

枠線の太さを指定する
枠線の種類を指定する
枠線の色を指定する
個別の枠線を一括に指定する
ボックスの横幅、高さを指定する
外側、内側の余白を指定する
背景色や画像を指定する
背景画像の表示方法を指定する
背景画像の表示位置を指定する
ボックスを並べる
ボックスの配置方法を指定する
背景画像の表示領域を指定する
枠線の4隅の角丸を指定する
枠線の4隅の角丸を個別に指定する

スタイルシート一覧のページに戻る