[CSS]画面内の一部だけをスクロール

2012年10月31日(水曜日)

夏が終わってから時間の流れの体感が明らかにおかしいスタッフ「ほ」です。

あれ？今年もあと２ヶ月？って感じです。
それだけ、人生の濃度が薄いってこと？いやいや、そんなはずは…

さて、気を取り直して今日の話題です。

授業後によく受ける質問のひとつに「画面内の新着情報の部分だけをスクロールするようにしたい」といったものがあります。

中に書かれる文字量が増えることでページ全体のレイアウトバランスがおかしくなってしまうのを嫌うときに使う手法ですね。

この対処には、ボックスに対して、あふれた情報をどのように処理するかを決める「overflow」プロパティを利用します。

ソースは以下のような感じになります。


<div style="width:300px;height:150px;overflow:auto;">
<p>更新内容１</p>
<p>更新内容２</p>
<p>更新内容３</p>
<p>更新内容４</p>
<p>更新内容５</p>
<p>更新内容６</p>
<p>更新内容７</p>
<p>更新内容８</p>
<p>更新内容９</p>
<p>更新内容１０</p>
</div>

結果がこんな感じです。

更新内容１

更新内容２

更新内容３

更新内容４

更新内容５

更新内容６

更新内容７

更新内容８

更新内容９

更新内容１０

※ボックスにはサイズをきちんと指定する必要があります。サンプルは見やすく背景色をつけてあります。

overflowプロパティをautoにしていますが、この指定が「必要がある場合だけスクロールバーを表示する」という意味です。
この設定によって、文章が短く、スクロールの必要がない場合にはスクロールバーが表示されません。

反対に常にスクロールバーを表示しておきたい場合は、overflow:scrollと表示することで、スクロールバーを常時表示しておくことが可能です。

覚えてしまえば結構カンタンな設定ですので、ぜひお試しあれ。

バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎！ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

この記事を書いた人
最新の記事

スタッフ「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験認定インストラクター

スタッフブログ