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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

687閲覧

スマホ閲覧時に、コンテンツを横にスクロールさせたい

fukuko

総合スコア10

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/05 04:11

編集2019/03/05 05:18

スマホで閲覧したときに、画像つきのコンテンツを横にスクロールさせたい

PCでは一列に横に並んでいるコンテンツを、
スマホで閲覧した際に、コンテンツが2つ並び、それ以降はスクロールをさせたいです。
イメージ説明

発生している問題・エラーメッセージ

・横ではなく縦に並んでしまう
・他の画像やテキストもいっしょにずれる

試したこと

他サイト様などのコードもコピペなどで試していますが、
うまく表示ができません。

追記です。

ありがとうございます。
コードは以下を使用しました。
cssがPCとスマホ用に分かれており、どちらに記述すればいいのか迷っています。
(もともとあったデータ・コードに私が手を加えている状況です)

画像やテキストは恐らく指定が重複してしまっていて、
今回表示をさせたい場所とは別の場所がずれてしまいます。
イメージ説明

<div class="nav-wrap"> <div class="scroll-nav"> <ul> <li> <a href="url" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text</p></li> <li><a href="URL" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text </p></li> <li> <a href="URL" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text</p></li> <li><a href="URLl" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text </p></li> <li><a href="URL" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text</p></li> </ul> </div> <div class="next-btn">></div> </div>
.nav-wrap { position: relative; } .scroll-nav { width: 100%; background: #555; /* メニューの背景色 */ overflow-x: auto; -webkit-overflow-scrolling: touch; /* 慣性スクロール */ } .scroll-nav ul { max-width: 1060px; /* メニューの最大幅 */ min-width: 770px; /* メニューの最小幅 */ height: 40px; line-height: 40px; margin: 0 auto; list-style: none; padding-right: 25px; /* 右側の固定分余白を空ける */ } .scroll-nav ul li { float: left; width: 20px; /* メニューの個別の幅 */ text-align: center; } .scroll-nav ul li:hover { background: #222; /* マウスホバー時の背景色 */ } .scroll-nav ul li a { display: inline-block; color: #fff; /* メニューの文字色 */ text-decoration: none; } .next-btn { /* 右側に固定する部分 */ position: absolute; top: 0; right: 0; width: 25px; /* 固定部分の幅 */ height: 40px; /* メニューの高さに合わせる */ line-height: 40px; background: #fff; color: #555; } @media only screen and (min-width: 771px) { /* PCサイズでの指定 */ .scroll-nav ul { padding: 0; } .scroll-nav ul li { width: 14.2%; /* メニューの個別の幅 */ } .next-btn { display: none; /* 右側の固定部分を非表示 */

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

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

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

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

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

m.ts10806

2019/03/05 04:13

[発生している問題・エラーメッセージ]が確認できる、コードをご提示ください。 ※コピペで現象確認できるように全体の流れがわかるものが望ましいです なお、コード提示はマークダウンのcode機能を利用してくださいね。 https://teratail.com/help#about-markdown
Lhankor_Mhy

2019/03/05 04:15

「他の画像やテキストもいっしょにずれる」とは、具体的には何が起きていますか? 一緒にスクロールする、という理解で合っていますか?
Lhankor_Mhy

2019/03/05 10:39

当方の環境では、ご提示のコードで「横ではなく縦に並んでしまう」が再現しませんでした。
guest

回答1

0

自己解決

こちら解決いたしました。
やはり他場所に記載されていたコードが反映されてしまっていたため、
画像・テキストが綺麗に表示されていませんでした。
(削除しましたところ、全て希望通りに表示いたしました)

お騒がせしました。
ありがとうございました。
これからも参考にさせて頂きます。

投稿2019/03/07 02:27

fukuko

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問