問題
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が届きます
スクロールを実装するには、
スクロールしたい親クラスにheight(高さ)を指定してあげます。
縦スクロールであれば overflow-y: auto
横スクロールであれば overflow-x: auto
を指定してあげましょう。
補足
overflow: scroll;というように記述すると、上下と左右両方のスクロールを表示することもできます。
他にもスクロールに関するプロパティがいくつか用意されているので、気になったら調べてみましょう。
