CSSスキル - 第6章 Lesson7

指定範囲からはみ出た文字をスクロールさせる方法

   

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

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

指定したボックスの範囲内からはみ出た文字をコントロールするために、overflowプロパティを利用します。
ここでは、スクロールできる「お知らせ一覧」を作成する方法を初心者向けに解説しています。



この動画で学べること

・要素がボックスに収まりきらないときにスクロールさせる方法



要素がボックスに収まりきらないときにスクロールさせる方法

要素がボックスに収まりきらないときにスクロールさせるためには、overflowというプロパティを使います。
値に指定できるものには4つの種類があります。
・hidden(はみ出た部分を消す)
・scroll(スクロールさせ、常にスクロールバーを出す)
・visible(デフォルト値で、はみ出た部分を出す)
・auto(必要であればスクロールバー、スクロールバーを出す)


今回は、スクロールさせたいので、「scroll」を使います。
このように書きましょう。



div#news_box {
overflow: scroll;
}




保存してブラウザで見てみましょう。
スクロールバーが出て、スクロールできるようになりました。
また、「scroll」ではなく、「auto」でも指定できるので、その方法も見てみましょう。
autoを使うの場合は、必ず高さを指定しなければなりません。
今回は、すでにnews_boxという<div>タグに200pxの高さを指定しているので書き足す必要はありませんが、この点は必ず覚えておいてください。
では、このように書いていきましょう。




div#news_box {
overflow: auto;
}




保存してブラウザで見てみましょう。
この方法でもスクロールができるようになりました。