バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[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クリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ