ログイン
問題9

画像の横スライドを実装しよう

この問題では、画像を横スクロールで操作できる横スライドを実装します。 少し簡単な問題にはなりますが、初級の復習を兼ねて挑戦してみましょう。

アイコン画像

問題9:画像の横スライドを実装しよう

横スクロールができるスライドを実装してみましょう。

CSSファイルに追記して、見本を参考に実装してください。

エディターのアイコンあらかじめエディタに書くコード

                <div class="wrap">
    <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
    <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
    <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
    <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
</div>
¥HTML¥
              
                .wrap {
    background-color: #000;
}
.logo {
    display: inline-block;
}
¥CSS¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              <div class="wrap">
  <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
  <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
  <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
  <div class="logo"><img src="https://ninjacode.work/assets/img/kv.png"></div>
</div>
¥HTML¥
            
              .wrap {
  background-color: #000;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.logo {
  display: inline-block;
}
¥CSS¥
            

コメントのアイコン解説

まず親要素の中に横スクロールしたい画像や要素を用意します。

その親要素に対して
overflow-x: scroll;
white-space: nowrap;
を付与することで横スクロールが出来上がります!

また、縦にスクロールしたい場合は
親要素に overflow-y: scroll; を付与してあげましょう。
ログインして解答を見る

コメントのアイコン補足

横スクロールを実装するには、overflow-x:scroll;を使用しました。
同時に設定したwhite-space: nowrap;について簡単に説明しておきます。

white-spaceは要素内のホワイトスペース(余白部分)を調整するプロパティです。
プロパティ値にnowrapを指定することで、行の折り返しを行なわずホワイトスペースを詰めるという設定ができます。
つまり、デフォルトでは画面幅が小さかった際に折り返し表示されていましたが、折り返さないように指定することができます。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる