質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

Q&A

解決済

1回答

1191閲覧

CSSで画像に横スクロールを発生させたい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

0グッド

0クリップ

投稿2020/08/12 03:27

編集2020/08/12 09:25

レスポンシブデザインで、スマホのみ横スクロールで画像を表示したいと思います。
現状
ulタグ以下の画像を横スクロールで表示できるようにしたいのですが。
overflow-x: scroll;が効いているのかよく把握できませんでした。
ulタグのwidthを200%にして限界一杯横幅を広げると、画面全体に横スクロールが発生し、かといって90%にすると折り返しが発生してしまい横並びになりません。

原因がいまいちわからないので、詳しい方教えていただきたいです。よろしくお願いします。

.small-image-area{ overflow-x: scroll; -webkit-overflow-scrolling: touch; padding: 0 0 12px 8px; display: -ms-flexbox; display: flex; white-space:nowrap; width: 200%; }
<section> <div class="product-area"> <div class="product-imagearea"> <p class="mainvisual"> <img src="images/dairku6のコピー.jpg" alt="メインビジュアル"> </p> <p class="model-size">model : 身長174cm 細身<br> 着用サイズ:FREE</p> <ul class="small-image-area"> <li class="smallimage"> <a href=""> <img src="images/dairiku1.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairiku2.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairiku3のコピー.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairiku4のコピー.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairiku5のコピー.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairiku10のコピー.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairku7のコピー.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairku9のコピー.jpg" alt="" class="small-image"> </a> </li> <li class="smallimage"> <a href=""> <img src="images/dairku6のコピー.jpg" alt="" class="small-image"> </a> </li> </ul> </div> コード
@media screen and (max-width:480px) { /*product-area*/ /*全体幅*/ .product-area{ width: 90%; display: block; justify-content: center;; margin: 48px auto 48px; } .product-imagearea{ width: 100%; } .product-text-area{ width: 100%; } /*全体幅*/ /*画像エリア*/ .mainvisual{ width: 100%; margin: 0 auto; } .small-image-area{ overflow-x: scroll; -webkit-overflow-scrolling: touch; padding: 0 0 12px 8px; display: -ms-flexbox; display: flex; white-space:nowrap; width: 100%; } .model-size{ text-align: left; font-size:1.2rem; margin: 12px auto 12px; line-height: 1.3; } .smallimage{ display: inline-block; /* 横並びにする指定 */ } .small-image{ width: 72px; height: 72px; object-fit: cover; } .smallimage a img { display: block; transition-duration: 0.3s; /*変化に掛かる時間*/ } .smallimage a img:hover { transform: scale(1.0); /*画像の拡大率*/ transition-duration: 0.3s; opacity: 0.3;/*変化に掛かる時間*/ } /*/画像エリア*/ } コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

サンプルで確認してみましたが、width: 100%; で横スクロールできました。

css

1 .small-image-area{ 2 overflow-x: scroll; 3 -webkit-overflow-scrolling: touch; 4 padding: 0 0 12px 8px; 5 display: -ms-flexbox; 6 display: flex; 7 white-space:nowrap; 8 width: 100%; /* 200%; */ 9 flex-wrap: nowrap !important; /* なくてもスクロールできたが、念のために追加 */ 10 }

投稿2020/08/12 03:57

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/08/12 09:24

回答ありがとうございます。 頂いたコードをそのままコピペしましたが、うまく行きませんでした。 どういった原因かわかりますでしょうか。googleの検証ツールで確認しています。 現状は画像を添付しています。
hatena19

2020/08/12 09:49

提示されている以外のCSSが影響しているのだと思います。 提示しているだけのコードの場合のサンプルではうまくいきます。 https://codepen.io/hatena19/pen/BaKoboX 症状の再現できるコードを提示してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問