人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

●HP作成中。Chromeブラウザのみレイアウトが崩れます。 CommentsAdd Star


見よう見まねで結構古くからHP造りをしています。
今は、レスポンシブデザインでのショップ作り中です。
HP造りながら、色々なブラウザでも表示状態を確認していますが、
いつもいつもIEの常用者でGoogle Chromeでの表示確認を怠っていました。

現在のHPはパソコン画面では、IE,サファリ、ファイアーフォックスで綺麗にレイアウトが出来ています。

ただ、Google Chrome ブラウザだけパソコン画面では、
トップから2段目の折り畳みのアコーディオンメニューが上下に2段になってしまいます。
他のブラウザでは問題なく1段に収まります。

http://www.waterplanet.jp/

何分、ネットでの独学勉強のHP造りなので、このChrome表示の修正を思い付きません。
どなたか、独学勉強の者に判り易く、適切なアドバイスをして戴ければ有難いです。
どうかご協力を宜しくお願い致します。

山田と言います。

●質問者: pocopenman
●カテゴリ:インターネット
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

Chrome だけ、適用されてるフォントが違うと思います。
style-brown-2016.css で body に指定されている font-family が効いておらず、ブラウザの設定で指定されているフォントが利用されています。

style-brown-2016.css には、@charset "utf-8" と書かれてますが、Shift_JIS で書いてないでしょうか。
フォント名の「ゴシック」が化けてて、ブラウザの設定(游明朝?)の方が利用されているんだと思います。

IE や Firefox なんかは、ブラウザの設定が「MS Pゴシック」なので、たまたま意図通りに表示されているように見える。

style-brown-2016.css を UTF-8 で記述するか、日本語が入らない MS PGothic で指定すれば、Chrome も表示が同じになるはずです。

body {
 font-family: MS PGothic;
 font-size: 12px;
}

a-kuma3さんのコメント
質問の回答としては、外部スタイルシートの文字コードが原因ということなのですが、ショップのページということなので、MS Pゴシックが入っていない環境も考慮したいところです。 フォントは、Webフォントを使う方が良いかもしれません(多少、重たくなりますが)。 もしくは、padding を緩くして固定幅にするか、でしょう。

pocopenmanさんのコメント
a-kuma3さん、ありがとうございます。 早速、「style-brown-2016.css を UTF-8 で記述」を行いました。 しかしながら、レイアウト崩れの現状は変わりませんでした。 今は、他の方のアドバイスからスタイルシートの修正を行っています。 タブレットサイズでの表示が今一良く無いですが、改良途中経過です。 またスマホサイズでもメニュー表示が使えない状態です。 http://www.waterplanet.jp/test.html 修正はまだまだですが、諦めずに頑張ります。 ありがとうございます。

a-kuma3さんのコメント
今の状態だと、style002.css (test.html の方は style002x.css ですか)の、以下の指定がメニューに効いています。 >|css| .animenu { font: 13px Arial, Helvetica; } ||< この指定を外せば、Chrome でも収まりますよ。

pocopenmanさんのコメント
ありがとうございます。 今、style002x.cssを改良しましたが、どうも上手く行きません。 私のやりかたが悪いのかも知れません。一応今現在の見え方は、下記です。 http://www.waterplanet.jp/01-ima.jpg なかなか難しくですが、何とか改善したく思っています。 もし、追加でアドバイスが在れば是非お聞かせ下さい。 山田

a-kuma3さんのコメント
きれいに横にそろえたいんですよね。 Flexbox を使うと良いと思います。 http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ