見よう見まねで結構古くからＨＰ造りをしています。
今は、レスポンシブデザインでのショップ作り中です。
ＨＰ造りながら、色々なブラウザでも表示状態を確認していますが、
いつもいつもＩＥの常用者でGoogle Chromeでの表示確認を怠っていました。
現在のＨＰはパソコン画面では、ＩＥ，サファリ、ファイアーフォックスで綺麗にレイアウトが出来ています。
ただ、Google Chrome ブラウザだけパソコン画面では、
トップから２段目の折り畳みのアコーディオンメニューが上下に２段になってしまいます。
他のブラウザでは問題なく１段に収まります。
http://www.waterplanet.jp/
何分、ネットでの独学勉強のＨＰ造りなので、このChrome表示の修正を思い付きません。
どなたか、独学勉強の者に判り易く、適切なアドバイスをして戴ければ有難いです。
どうかご協力を宜しくお願い致します。
山田と言います。
No.1
4973
2154
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; }
ウラジーミル
2017/02/08 20:53:47
2
1
1
1
1
1
0
ありがとうございます。
2017/02/09 23:04:07今、style002x.cssを改良しましたが、どうも上手く行きません。
私のやりかたが悪いのかも知れません。一応今現在の見え方は、下記です。
http://www.waterplanet.jp/01-ima.jpg
なかなか難しくですが、何とか改善したく思っています。
もし、追加でアドバイスが在れば是非お聞かせ下さい。
山田
きれいに横にそろえたいんですよね。
2017/02/10 13:41:14Flexbox を使うと良いと思います。
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html