@mediaquery safariでの表示崩れ。ひとりごとというか備忘録

web関連の話が多くて申し訳ないのですが、

備忘録として・・

前回、勉強がてら作った
おかんの絵集みたいなホームページ




WEBデザインレベルまだ初級のうちですが、

ま〜〜〜〜〜〜！
ブラウザ(IEとか、SAFARI / GOOGLE CHROME / FIRE FOX)
によって、表示がたまに崩れることがあるんですよ。

一番多いのが、IE = INTERNET EXPLORERなんですけどね。
もうIEはちょっぴりウンザリです。

しかしシェアがやはり多いようですね〜。
だから諦めきれない。

それでよくIEに苦戦してるんですが、

今回初めて SAFARI(パソコン) での表示が崩れていてびびった〜。

もう、慣れてきたし
個人的なサイトやし、と思って確認とってなかったら・・

---------------------------以下　事件簿---------------------------

 

☝うちは、こうなってると思ってた☝ 

(少なくともFIRE FOX / CHROMEではなっていた。)

下: SAFARI (PC)での表示。

(スマホは、スマホ対応のページにしてるのでまた別なんです) 

☝っひょぇ〜〜〜〜〜〜〜〜〜！！！！☝

タテ並び・・・・・

そして謎の3:2配列・・・・・・・・

(ちなみに、タブレットで見るとこの感じになってるはず・・)

以下より備忘録。

1. @mediaquery
   (メディアクエリ = webサイトを閲覧している画面サイズに合わせて
   デザインを変更する為のコードみたいなもの。)
   
   上記のおかんのサイトも、
   
   
   • ウィンドウの幅を狭めたり
   • スマホで見たり
   で、表示が変わります。(ちなみに一応タブレットにも対応させたつもり)
   
   
   CSS
   (HTML=webサイトのコードにデザインを組み込む為のコードみたいなもの)
   で、その@mediaqueryという指示を入れるのですが、
   
   (見ている人の画面の幅がA以上なら、背景は黒。とかできる)
   
   
   下記みたいに文字を入力していくのですが、
   

   @media screen and (/*サイズの指定*/) {
   /* ここに変更後の記述 */
   }

   
   
   最後の。。。。
   } ☜こいつ〜〜〜！！！
   を忘れていただけでした。
   
   (備忘録の項目「１.」で終わっとん)
   

   
   

以上です。


意味不明な記事ですが、
うっかり@mediaquery 表示崩れで
検索してくれる人がいることを祈ります。

(絶対おらん)