バンフートレーニングスクールのサイトへ

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

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

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

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

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

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

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

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


<div style="width:300px;height:150px;overflow:auto;">
<p>更新内容1</p>
<p>更新内容2</p>
<p>更新内容3</p>
<p>更新内容4</p>
<p>更新内容5</p>
<p>更新内容6</p>
<p>更新内容7</p>
<p>更新内容8</p>
<p>更新内容9</p>
<p>更新内容10</p>
</div>

結果がこんな感じです。

更新内容1

更新内容2

更新内容3

更新内容4

更新内容5

更新内容6

更新内容7

更新内容8

更新内容9

更新内容10

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

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

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

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


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

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

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

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

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

The following two tabs change content below.
スタッフ 「ほ」

スタッフ 「ほ」

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

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ