WEBサイトのデザインがwidth767pxで崩れるのは何故なのか？

Question

エックスサーバー にワードプレス を導入し、ストークというテーマを適用してサイト作成をしている初心者です。（ネット上にある情報で勉強しながらなので完全に素人です）

今はサイトのレイアウトを整えてる途中なのですが、ウインドウの幅を767px にするとデザインが崩れてしまいます。
具体的にいうと、ヘッダーとフッターにおけるメニュー部分だけが崩れます。
特にヘッダーは通常だとロゴが画面左上にあり、その右側にメニューのテキストが並ぶ構造なのですが、767px にすると
ロゴ
メニューテキスト
メニューテキスト
メニューテキスト
といった感じに崩れてしまいます（フォントサイズの指定などは有効になっている）

ちなみに766px 以降はスマホや小さいタブレットを想定したデザインになりますし、768px以降はPCや大きめタブレットを想定したデザインに問題なくなります。

なので、何故767px のレイアウトだけが崩れてしまうのかを教えていただけますと助かります。

ブラウザはクロームを使っていて、検証機能を使ってwidth767pxで調べました。
また、ストークを使っている方の外部ブログで検証をしてみた結果もレイアウト崩れが起きましたので、自分のサイトだけが崩れるというわけではなさそうです。

レスポンシブデザイン、メディアクエリ、カラム、詳細度といった知識は多少ありますが、可能であれば詳細に説明していただけますと幸いです。よろしくお願いいたします。

Answer 1

CSSを見てみると、次のような記述があります。

@media only screen and (max-width: 767px) {
  /* 略 */
}

@media only screen and (min-width: 768px) {
  /* 略 */
}

この場合、幅が767.5pxの場合はどちらも適用されないことになります。
ズーム表示していたりすると起こることがあるようです。
https://stackoverflow.com/questions/13634326/how-can-i-avoid-media-query-overlap
https://github.com/twbs/bootstrap/issues/19197

これを避けるには、min-widthとmax-widthを混在させない、notを利用する、Media Queries Level 4 の等号不等号(おそらくまだ使えない)を使うなどの方法が考えられます。
https://drafts.csswg.org/mediaqueries/#mq-range-context

Comments

[TECO]

回答ありがとうございます。
仕組みがわかってスッキリしました。

Answer 2

また、ストークを使っている方の外部ブログで検証をしてみた結果もレイアウト崩れが起きましたので、自分のサイトだけが崩れるというわけではなさそうです。

それであれば単純にテーマ設計に問題があるだけです。
ただ、下記デモページにて問題が再現できませんでした。最新のものをダウンロードして、プラグイン等を全て止めて試してみてはいかがでしょう。

【STORK | 究極のモバイルファーストテーマ】
http://demo-stork.open-cage.com/

Comments

[TECO]

kei344さんへ
ご回答ありがとうございます。

貼っていただいたリンク先のデモページにて、クロームの検証をしてみたところ、やはりメニューが崩れました。
ちなみに高さの数値を変えても変化はなく、やはり 767px にすると崩れます。
別ブラウザに変えて検証しても同じでした。

kei344さんが検証してみた結果、特に問題なしだったとすると使っているパソコン本体の問題という可能性はありますでしょうか？
パナソニック製のノートパソコン（CF-RZ4）を使っており、10.1型です。

[kei344]

モニタのサイズでレイアウトが変わることはまずありません。ディスプレイの解像度設定やブラウザの文字サイズ設定、ズーム設定などで表示が変わることはあります。

[TECO]

返信が遅くなり申し訳ありません。
確認して見たところ、ディスプレイの設定が原因でした。ありがとうございました。

Answer 3

kei344さん、x_xさんの回答内容を元に調べ直したところ原因と解決方法がわかりましたので記載しておきます。（メディアクエリの仕様に関する技術的な改善アプローチではなく、あくまで今回のケースに対する原因と改善方法です。）

まず原因としてはx_xさんの回答にあるようにwidthが767.5pxになるとメディアクエリで指定したCSSが適用されなくなりレイアウトが崩れるといったものでした。
しかし、ブラウザの検証機能で指定した数値は 767px であり、767.5pxではありません。
ということは何か別の要因がwidth幅の計算結果をおかしくしているということになります。
そのためパソコン本体の設定を調べ直したところ、「ディスプレイの拡大率」が影響しているということがわかりました。既定値では150%になっている倍率を100%や200%にしたあとに、 767px で検証するとレイアウトは崩れませんでした。
ただし、拡大率を100%にするとアイコンやタスクバーなどが全体的に小さくなり、200%にすると逆にデカくなりすぎるので、試す際にはデスクトップ上にあるファイル等をまとめておくことをオススメします。（並び順もぐちゃぐちゃになるので注意）

解決方法の流れとしては、
「コントロールパネル」→「デスクトップのカスタマイズ」→「ディスプレイ」
という項目まで進み、「すべてのディスプレイで同じ拡大率を使用する」にチェックを入れたあと、100%や200%などのキリの良い倍率を選択して「適用」ボタンをクリックといった感じになります。

ちなみにディスプレイの拡大率を100%以上にしている場合、ソフトウェアによっては本来表示されるはずの部分が表示されなくなるなどの問題が起きます。
一時的に画面を大きくして見たい場合には、Windowsキーを押しながら+キーまたは-キーを押すことで「拡大鏡」というツールが使えるので、そちらをオススメします。