HTMLタグ・CSS｜CSS辞典｜スクロール付きエリア overflow

Home≫CSS辞典≫スクロール付きエリア overflow

スクロール付きエリア overflow

≪ リストまとめて指定 list-style	【 HOME 】	スクロールバー色 scrollbar ≫

スクロール付きエリア（サンプル）
サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字	サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字	サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字
▼	▼	▼
サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字	サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字	サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字
※ 上が通常の状態で、下が実際に効果を反映したサンプルです。

スクロール付きエリア（詳細情報）
字体	overflow:★;
指定	★の部分に下記の「」内の効果を指定していきます。「hidden」文字がエリアからはみ出た場合は表示しない。「scroll」スクロールバーをつけることができる。「visible」文字がはみ出したら、はみ出たまま表示する。「auto」自動で設定する。
効果	テキストエリアのような、スクロールバーがついているエリアを作ることができる。
例１	<div style="width:170;height:80;overflow:auto;"> <font color="#ff0000">サンプル用の文字</font> <font color="#00ff00">サンプル用の文字</font> <font color="#0000ff">サンプル用の文字</font> <font color="#ffaa00">サンプル用の文字</font> </div>
結果	サンプル用の文字サンプル用の文字サンプル用の文字サンプル用の文字
解説	textareaタグと違って、枠内でタグなどを使うことができます。

≪ リストまとめて指定 list-style	【 HOME 】	スクロールバー色 scrollbar ≫

練習用書き込みフォーム（サンプル表示）
<div style="width:170px; height:80px; overflow:hidden;"> <font color="#ff0000">サンプル用の文字</font><br /> <font color="#00ff00">サンプル用の文字</font><br /> <font color="#0000ff">サンプル用の文字</font><br /> <font color="#ffaa00">サンプル用の文字</font><br /> <font color="#ff0000">サンプル用の文字</font><br /> <font color="#00ff00">サンプル用の文字</font><br /> <font color="#0000ff">サンプル用の文字</font><br /> <font color="#ffaa00">サンプル用の文字</font><br /> </div> <br /> <div style="width:170px; height:80px; overflow:scroll;"> <font color="#ff0000">サンプル用の文字</font><br /> <font color="#00ff00">サンプル用の文字</font><br /> <font color="#0000ff">サンプル用の文字</font><br /> <font color="#ffaa00">サンプル用の文字</font><br /> <font color="#ff0000">サンプル用の文字</font><br /> <font color="#00ff00">サンプル用の文字</font><br /> <font color="#0000ff">サンプル用の文字</font><br /> <font color="#ffaa00">サンプル用の文字</font><br /> </div> <br /> <div style="width:170px; height:80px; overflow:auto;"> <font color="#ff0000">サンプル用の文字</font><br /> <font color="#00ff00">サンプル用の文字</font><br /> <font color="#0000ff">サンプル用の文字</font><br /> <font color="#ffaa00">サンプル用の文字</font><br /> <font color="#ff0000">サンプル用の文字</font><br /> <font color="#00ff00">サンプル用の文字</font><br /> <font color="#0000ff">サンプル用の文字</font><br /> <font color="#ffaa00">サンプル用の文字</font><br /> </div>

練習用書き込みフォーム（サンプル表示）

<div style="width:170px; height:80px; overflow:hidden;">
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
</div>

<div style="width:170px; height:80px; overflow:scroll;">
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
</div>

<div style="width:170px; height:80px; overflow:auto;">
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
サンプル用の文字 
</div>

スクロール付きエリア overflow｜CSS辞典｜HTMLタグ・CSS

スクロール付きエリア overflow