実践コーディングスキル - 第5章 Lesson3

第20回:overflowを使ってスクロール窓を作ろう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

スクロールできる新着情報一覧を作成する方法を解説します。
ここでは、overflowプロパティを利用して、ボックスからはみ出た部分の文字をスクロールさせます。



この動画で学べること

・borderでリストの下に点線を表示させる方法
・overflowプロパティで記事一覧をスクロールさせる方法



borderでリストの下に点線を表示させる方法

<li>タグの下の点線を、border-bottomを使って作っていきましょう。
線の種類をdotted(点線)にして1pxの線を作ります。
また、行の幅が狭いので、行間の指定もしてください。




div#left ul li {
font-size: 13px;
font-weight: nomal;
color: #927e7a;
border-bottom: 1px dotted #b5b3b3;
line-height: 32px;
}



overflowプロパティで記事一覧をスクロールさせよう

では次に、ボックスからはみ出た記事一覧をどうするか、というCSSを書いていきたいと思います。
ここで使うのは、overflowプロパティです。
今回は、はみ出た部分をスクロールさせるという指定をしていきましょう。


div#left ul{
overflow: scroll;
width: 555px;
height:145px;
}



では保存してブラウザで見てみましょう。
指定した横幅と縦幅からはみ出た部分が隠れ、スクロールできるようになりました。