問題

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;というように記述すると、上下と左右両方のスクロールを表示することもできます。

他にもスクロールに関するプロパティがいくつか用意されているので、気になったら調べてみましょう。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET