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



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

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

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

http://www.waterplanet.jp/

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

山田と言います。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2017/02/08 17:57:57
  • 終了:2017/02/12 11:28:30

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4595ベストアンサー獲得回数19342017/02/08 22:33:49

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;
}
他3件のコメントを見る
id:pocopenman

ありがとうございます。
今、style002x.cssを改良しましたが、どうも上手く行きません。
私のやりかたが悪いのかも知れません。一応今現在の見え方は、下記です。
http://www.waterplanet.jp/01-ima.jpg

なかなか難しくですが、何とか改善したく思っています。
もし、追加でアドバイスが在れば是非お聞かせ下さい。

山田

2017/02/09 23:04:07
id:a-kuma3

きれいに横にそろえたいんですよね。
Flexbox を使うと良いと思います。
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

2017/02/10 13:41:14
  • id:fin-suomi
    ウラジーミル 2017/02/08 20:53:47
    100%÷5=20%でひとつのメニューボタンの幅を20%か19%としてみては?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません