こんにちは。
続けて②の課題へ行きます。
②クロスブラウザについて調べる!です。
早速調べてみました
(ウィキペディアより)
つまり
クロスブラウザとは、
ブラウザによって表示のされ方に違いがあるということ!です。
ちょっと待ってください。
ブラウザによって見え方が変わってしまっては困ります!
せっかくデザインしたおしゃれなフォントも適用されなかったら意味がありません。
では、全てのブラウザで同じように表示されるためには、何をしたらいいのか?
またどんな違いがでてしまうのか?
早速前々回の課題でどのような違いが出るのか試してみました
(左:chrome 中:IE 右:Firefox)
分かりにくいと思いますが、見比べてどうでしょうか??
フォントの違い、左上からの空き具合、などでしょうか。。
Chromeは滑らかなフォントに対して、IE、Firefoxのフォントは細い印象です。
それに対して、師匠からの補足説明が来ました↓
開発者はChromeが多い、見る人はIEかedgeが多い。
windowsは Edge、IE11、 chrome、 firefox。
Macは Safari 、chrome、 firefoxのクロスブラウザ対応が求められる。
最近は、iPhone、iPhone safari、Android Chromeでモバイルのクロスブラウザが求められている。
正しいコーディングをしていればそんなに遭遇しないと思う。
下手なコーディングだと、ブラウザごとに記述をたくさん変えなければならなくなるよ。
windowsだと、メイリオって言うフォントがあるから、それを指定するといいね。
やはり、師匠の課題はChromeで表示されたものをスクリーンショットしたようです。
課題2「テーブル」で、師匠の完成例とフォントが違う気がしたのはこの為でした!(師匠:Chrome、私:IE)
ということで、まずは、CSSに初期設定をします。
*{margin:0; padding:0;}
*・・・全称セレクタと言い、全ての要素という意味。
margin・・・要素間の間隔。
padding・・・要素内の余白。
この初期設定をすることで、ブラウザごとの元から設定されている余白がなくなります!
フォントの誤差は、
メイリオというフォントで師匠の課題に近づけてみます!
↓
↓
ちょっと見にくいですね。。ごめんなさい。下のようになります↓
↓
↓
css
body{font-family:'メイリオ',Meiryo,ヒラギノ角ゴPro W3,'Hiragino Kaku Gothic Pro,Sans-serif;"}
はい、これで出来ました!