質問: エックスサーバー にワードプレス を導入し、ストークというテーマを適用してサイト作成をしている初心者です。(ネット上にある情報で勉強しながらなので完全に素人です) 今はサイトのレイアウトを整えてる途中なのですが、ウインドウの幅を767px にするとデザインが崩れてしまいます。 具体的にいうと、ヘッダーとフッターにおけるメニュー部分だけが崩れます。 特にヘッダーは通常だとロゴが画面左上にあり、その右側にメニューのテキストが並ぶ構造なのですが、767px にすると ロゴ メニューテキスト メニューテキスト メニューテキスト といった感じに崩れてしまいます(フォントサイズの指定などは有効になっている) ちなみに766px 以降はスマホや小さいタブレットを想定したデザインになりますし、768px以降はPCや大きめタブレットを想定したデザインに問題なくなります。 なので、何故767px のレイアウトだけが崩れてしまうのかを教えていただけますと助かります。 ブラウザはクロームを使っていて、検証機能を使ってwidth767pxで調べました。 また、ストークを使っている方の外部ブログで検証をしてみた結果もレイアウト崩れが起きましたので、自分のサイトだけが崩れるというわけではなさそうです。 レスポンシブデザイン、メディアクエリ、カラム、詳細度といった知識は多少ありますが、可能であれば詳細に説明していただけますと幸いです。よろしくお願いいたします。
回答: kei344さん、x_xさんの回答内容を元に調べ直したところ原因と解決方法がわかりましたので記載しておきます。(メディアクエリの仕様に関する技術的な改善アプローチではなく、あくまで今回のケースに対する原因と改善方法です。) まず原因としてはx_xさんの回答にあるようにwidthが767.5pxになるとメディアクエリで指定したCSSが適用されなくなりレイアウトが崩れるといったものでした。 しかし、ブラウザの検証機能で指定した数値は 767px であり、767.5pxではありません。 ということは何か別の要因がwidth幅の計算結果をおかしくしているということになります。 そのためパソコン本体の設定を調べ直したところ、「ディスプレイの拡大率」が影響しているということがわかりました。既定値では150%になっている倍率を100%や200%にしたあとに、 767px で検証するとレイアウトは崩れませんでした。 ただし、拡大率を100%にするとアイコンやタスクバーなどが全体的に小さくなり、200%にすると逆にデカくなりすぎるので、試す際にはデスクトップ上にあるファイル等をまとめておくことをオススメします。(並び順もぐちゃぐちゃになるので注意) 解決方法の流れとしては、 「コントロールパネル」→「デスクトップのカスタマイズ」→「ディスプレイ」 という項目まで進み、「すべてのディスプレイで同じ拡大率を使用する」にチェックを入れたあと、100%や200%などのキリの良い倍率を選択して「適用」ボタンをクリックといった感じになります。 ちなみにディスプレイの拡大率を100%以上にしている場合、ソフトウェアによっては本来表示されるはずの部分が表示されなくなるなどの問題が起きます。 一時的に画面を大きくして見たい場合には、Windowsキーを押しながら+キーまたは-キーを押すことで「拡大鏡」というツールが使えるので、そちらをオススメします。