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

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

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¥

期待する画面

解答と解説（画像の横スライドを実装しよう）

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

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

補足

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

white-spaceは要素内のホワイトスペース(余白部分)を調整するプロパティです。
プロパティ値にnowrapを指定することで、行の折り返しを行なわずホワイトスペースを詰めるという設定ができます。
つまり、デフォルトでは画面幅が小さかった際に折り返し表示されていましたが、折り返さないように指定することができます。

HTML/CSS学習のコース一覧へ戻る

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

LINE登録して動画を視聴する

HTML/CSS学習におすすめのコース