HTML_CSS
Googleでログイン問題9：画像の横スライドを実装しよう
横スクロールができるスライドを実装してみましょう。
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;について簡単に説明しておきます。
white-spaceは要素内のホワイトスペース(余白部分)を調整するプロパティです。
プロパティ値にnowrapを指定することで、行の折り返しを行なわずホワイトスペースを詰めるという設定ができます。
つまり、デフォルトでは画面幅が小さかった際に折り返し表示されていましたが、折り返さないように指定することができます。
同時に設定したwhite-space: nowrap;について簡単に説明しておきます。
white-spaceは要素内のホワイトスペース(余白部分)を調整するプロパティです。
プロパティ値にnowrapを指定することで、行の折り返しを行なわずホワイトスペースを詰めるという設定ができます。
つまり、デフォルトでは画面幅が小さかった際に折り返し表示されていましたが、折り返さないように指定することができます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
その親要素に対して
overflow-x: scroll;
white-space: nowrap;
を付与することで横スクロールが出来上がります!
また、縦にスクロールしたい場合は
親要素に overflow-y: scroll; を付与してあげましょう。