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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

Q&A

解決済

2回答

4256閲覧

横スクロールの表示不具合について

chef

総合スコア15

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

1グッド

1クリップ

投稿2018/03/20 06:23

編集2018/03/21 19:35

困っていること

自作しているWordPressテーマのデバイスによる表示不具合についての質問です。
これまで、ブラウザ間の表示不具合はあれど、デバイスで表示が大きく変わることはない(小さな変化はあれど)と認識していたのですが、Windowsユーザーの方から「横スクロール」の表示がおかしいとご指摘を受けました。

確認したこと

MacでIE含むすべての主要ブラウザでの表示を確認(外部ツール活用)、iPhone・Androidで表示を確認したところ、特に問題はありませんでした。

発生している問題

こちらが正常の横スクロール。
正常の横スクロール

こちらが表示がおかしい横スクロール。(Windowsユーザーから共有されたもの)
表示がおかしい横スクロール

※下の画像でメニューの下に無骨なスクロールバーが表示されていますが、これがおかしい表示です。

実装しているコード

必要なコードだけ記述します。
ID、クラス名、カラー変更のCSSなどを除き、ほぼすべてのコードを記述しました。
どこで不具合が発生しているのでしょうか…?

html

1<nav> 2<div class="scroll-wrapper"> 3<div class="scroll"> 4<ul class="scroll-content"> 5<li><a>メニュー1</a></li> 6<li><a>メニュー2</a></li> 7<li><a>メニュー3</a></li> 8</ul> 9</div> 10<!-- 左のボタン --> 11<a class="leftbutton" href="#"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a> 12<!-- 右のボタン --> 13<a class="rightbutton" href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a> 14</div> 15</nav>

css

1.scroll-wrapper { 2 position: relative; 3} 4.scroll { 5 overflow-x: scroll; 6 overflow-y: hidden; 7 -webkit-overflow-scrolling: touch; 8} 9.scroll-content { 10 display: inline-block; 11 white-space: nowrap; 12} 13nav li { 14 list-style-type: none; 15 display: inline-block; 16} 17/* ボタンデザインは割愛 */

※jQueyも割愛

実現したいこと

異なるブラウザ間・デバイス間で同じ表示にしたいのですが、どうすればよいでしょうか?
ベンダープレフィックス的なものを付ける必要はありますか?

defghi1977👍を押しています

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

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

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

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

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

kszk311

2018/03/20 06:30

記載のコードだけでは足りないですね。リスト部分のそのままのHTMLとCSSは最低限ないと答えられないと思います。
chef

2018/03/20 06:44

ご回答ありがとうございます!ということは、このコードだとすべてのデバイス・ブラウザで同じ見た目と動作になるということでしょうか?(他の関係ありそうなコードは後で追加させていただきます)
guest

回答2

0

Windowsのスクロールバーはなかなか厄介なので
こんな感じで直らないですかね。

css

1 .scroll { 2 overflow: hidden; 3 -webkit-overflow-scrolling: touch; 4 height: 55px; 5 } 6 .scroll-content { 7 overflow-x: scroll; 8 overflow-y: hidden; 9 height: 72px; 10 padding-bottom: 17px; 11 display: inline-block; 12 white-space: nowrap; 13 }

一応参考URL
https://codepen.io/naru0504/pen/dYpLJg

投稿2018/03/20 07:35

kszk311

総合スコア3404

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

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

chef

2018/03/21 01:39

ご回答ありがとうございます! 検証するためにParallelsを導入してみたんですが、Windowsだとoverflowプロパティで強制的にスクロールバーが表示されてしまうんですね。恥ずかしながら初めて知りました。 いただいた回答ですが、早速試してみました。 スクロールバーの高さ分ずらすことで非表示にしていますが、高さが動的に変わる場合の良い解決方法はないでしょうか? jQueryのプラグインなどでもいいのですが、テーマ側で高さを指定すると、コンテンツ内容によって高さが変わった場合に対処できなくなるためです。 ちなみに、こちらのページを参考に検証してみたところ、高さの指定なしでFirefox以外の主要ブラウザでスクロールバーを非表示できました。 https://st40.xyz/one-run/article/105/ 後はFirefox対策だけできればいいのですが、何か良い方法がないか探しています。
guest

0

ベストアンサー

FireFoxについては非推奨のプロパティ値overflow: -moz-scrollbars-none;でスクロールバーを(現状)消せます.

が, その副作用として標準操作によるスクロールが不可能となってしまうため, 別途スクリプトなどを使ってスクロール位置の制御を補う必要があるようです.

参考
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
https://stackoverflow.com/questions/20997183/how-to-hide-scrollbar-in-firefox

投稿2018/03/21 01:52

defghi1977

総合スコア4756

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

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

chef

2018/03/21 19:33

ご回答ありがとうございます! Firefox対策として参考にさせていただきました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問