[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というアプリケーションを使った実践編もご用意しております。

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

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

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

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

メセナアワード受賞!

 
バンフートレーニングスクールの母体は
株式会社 帆風(ばんふう)という会社なのはご存知ですか?
印刷・DTP・WEBなどを取り扱う総合デジタル会社です。

その株式会社 帆風が、このたび
公益社団法人メセナ協議会が主催する「メセナアワード2012」において、
2008年より青森県八戸市で行ってきた「帆風美術館」の活動が評価され
「四季のそよかぜ賞」を受賞しました!!

メセナアワードとは、企業や企業財団による
優れたメセナ(芸術文化支援)活動に対して顕彰されるものです。
芸術文化活動への資金提供や自主企画の実施、
地域に根ざした取り組みなど、
芸術文化の振興につながるあらゆる活動を対象としています。
これまで165件の活動を表彰。
創意工夫に満ちた取り組みを広く紹介し、
社会の関心を集めてきた大変名誉ある賞です。

 

さて、このような名誉ある賞を受賞した
「帆風美術館」とは・・・?

印刷会社として株式会社帆風が長年培ったカラーマネジメント技術を、
美術の領域で利用した「デジタル光筆画」という技法により
つくられた作品を展示する、複製画専門の美術館です。
 
 
そんな確かな技術経験を持つ会社が運営する
『パソコンスクール』で学ぶ安心短期間・低価格で。
バンフートレーニングスクールなら可能です。

パソコンスクールをご検討中の方、
まずは無料体験レッスン&スクール説明会へ!!
http://www.vanfu-vts.jp/lesson_e/index.html

イラストレーターとフォトショップが無料で体験できます。
入学前のご来校で、不安もすっきり解消!!

 

 

 

バンフートレーニングスクールは
「初心者でも短期間でマスター」できる講座カリキュラム!

直接指導だから理解度が違う!

イラストレーター (Illustrator) / フォトショップ (Photoshop)
WEB基礎 (HTML+CSS) / ドリームウィーバー (Dreamweaver)
インデザイン (InDesign) / フラッシュ(Flash)

短期間×低価格×バンフートレーニングスクール
=仕事で使える制作スキルがすぐ身につく!!
―☆入学金0円教材費0円☆ ―

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

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

12月のスケジュールとハロウィン

 
 
ちびっこ限定でモテ期継続到来中のスタッフ「な」です。

 
さて、10月に入り早いもので今年も残り3ヶ月となりました。
スクールでも12月のスケジュールを公開し、
年末に向けて加速度あげて開講中!
https://www.vanfu-vts.jp/cgi-bin/course/schedule.php 
 
 
年末は何かと忙しい季節。
予定は早めにたてて、
気持ちよく一年を締めくくりたいですね!
ご希望の日程がすでにお決まりの方は、
お早めのご予約が確実にご受講頂けるのでオススメです!
 
 
と、年末の話をしてしまいましたが、
スクール内は10月ということで
季節にあわせてちょっぴりハロウィン仕様です。

Halloween

さりげな~く飾ってありますので、
スクールにお越しの際は探してみてくださいね。

 
 
 

バンフートレーニングスクールは
「初心者でも短期間でマスター」できる講座カリキュラム!

直接指導だから理解度が違う!

イラストレーター (Illustrator) / フォトショップ (Photoshop)
WEB基礎 (HTML+CSS) / ドリームウィーバー (Dreamweaver)
インデザイン (InDesign) / フラッシュ(Flash)

短期間×低価格×バンフートレーニングスクール
=仕事で使える制作スキルがすぐ身につく!!
―☆入学金0円教材費0円☆ ―

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

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