ログイン

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

HTML_CSSの問題

HTML_CSS

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

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

問題

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

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」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!