ログイン

問題44 スクロールを実装しよう

HTML_CSSの問題

HTML_CSS

スクロール機能を実装できるようになれば、限られたスペースなどでテキストを表示することができます。 ひとつの機能として把握しておきましょう。

スクロールを実装しよう

問題

スクロールを実装してみましょう!
見本動画を参考にしてCSSに記述し実装してください。

自分の環境に書くコード

              <div>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
¥HTML¥
            
              div {
    width: 200px;
    margin: auto;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              <div>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
¥HTML¥
            
              div {
    width: 200px;
    margin: auto;
    height: 200px;
    overflow-y: auto;
}
¥CSS¥
            
答えのアイコン

解説

スクロールを実装するには、
スクロールしたい親クラスにheight(高さ)を指定してあげます。
縦スクロールであれば overflow-y: auto
横スクロールであれば overflow-x: auto
を指定してあげましょう。
ログインして解答を見る
overflow: scroll;というように記述すると、上下と左右両方のスクロールを表示することもできます。

他にもスクロールに関するプロパティがいくつか用意されているので、気になったら調べてみましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!