ログイン
問題44

スクロールを実装しよう

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

アイコン画像

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

スクロールを実装してみましょう!
見本動画を参考にして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!!
LINEの友達追加でお役立ち動画をGET!!

閉じる