問題
44
HTML_CSS
スクロールを実装しよう
スクロール機能を実装できるようになれば、限られたスペースなどでテキストを表示することができます。 ひとつの機能として把握しておきましょう。
HTML_CSSの問題に挑戦しよう！
問題
「スクロールを実装しよう」
スクロールを実装してみましょう!
見本動画を参考にしてCSSに記述し実装してください。
あらかじめエディタに書くコード
<div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
¥HTML¥
div {
width: 200px;
margin: auto;
}
¥CSS¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
スクロールを実装するには、
スクロールしたい親クラスにheight(高さ)を指定してあげます。
縦スクロールであれば overflow-y: auto
横スクロールであれば overflow-x: auto
を指定してあげましょう。
補足
overflow: scroll;というように記述すると、上下と左右両方のスクロールを表示することもできます。
他にもスクロールに関するプロパティがいくつか用意されているので、気になったら調べてみましょう。
