【CSSの基本】不自然な余白と小さくなる文字の不具合にはrebootを設置しよう

CSSコーダー初心者が+αできるようにまとめました。
▶っていうまとめページもいずれつくる

 

サイトってHTMLっていうテキストファイルを読み取って、
そこにCSSとかを使って見やすくおしゃれにしていく。

そこはわかってると思うんですけど、それってパソコン・スマホ本体じゃなくて
ブラウザアプリがやってることは知ってましたか?

chrome/safari/firefox/Opera/IE/ME…とかとか
サイトを開くためのブラウザが何種類もあるのはなんとなく知ってるはず。

でも厄介なことに

各ブラウザによって若干見え方が違うんです。

HTMLタグを目印にブラウザが各々スタイルを勝手に決めてくれてるんです…
ブラウザによって全然違う値が入ってることもあるんです…

しかもそれが統一される日は来ないだろう・・・😣

CSSがあったとしても、書き忘れたところはブラウザの設定が反映されちゃうから
ついつい変なところに余白がつきがちです。

游ゴシック体もwindowsのブラウザとMacのブラウザで違うってさ。

 

神を宿したいデザイナーにとってこの微妙なズレがこわいね。

chromeのデベロッパーツールで
user agent stylesheet ってとこあるんだけど、いま話してるのこれのこと。

最近知ったんだけど、
iOSchromeだと入力フォームのかどが丸くなったりするらしいね。
( どうしてなんだスティーブ )

 

だいたいの人はchrome使ってるんだからchromeで見ればもういいじゃん!

って言いたいんだけど、どんな年代のどんなバージョンを使ってるかわかんないんだ。
とくに企業さん。

※飛ばしてOK こんなに違う見え方

さてこれがみんな使ってる(であろう)chromeでの見え方

chrome

 

そうそうこんな感じ。いつものサイトだ。

当たり前だけど、HTMLだけで表示すると内容だけのシンプルフルなページがでる。

ソースはこんなの。※画像のトリミングめんどくさいからそこだけ変えました

 

で、次にwindowsユーザーはやたらとPCにおすすめされるMEではこう

Microsoft Edge

まず文字化けで気持ち悪いことになってる。

まあこれぐらいならmetaタグ一行でなんとでもなるんだけど、
問題は次よ。

Internet Explorer

う~ん萎えますわ。

字が小さいし細いしオシャレ感ZEROだよねこれ。

 

と、Chrome優遇したけどChromeも余白があちこちついててめんどくさいのは事実。
画像の横みたら隙間がちょっとあるのがわかると思う。。

Rebootしよう

なんか知らんけど余白がつく。

なんか知らんけど字が小さくなる。

今回伝えたいことは
”なんか知らんけどそういういらん仕様”をさっぱりさせたいとき
Reboot.cssを導入しちゃいましょう。

コピペですぐに使えるよ!

詳しくはリンクに飛ぶかググって見てほしいんだけど

いちいちレイアウト崩れ修正するより断然楽。

ちなみにReset.cssっていうのもあるんだけど
ほんとに全部リセットしちゃうから、
h1タグとpタグが同じサイズになったりとかしてやりすぎ感が否めないでござるよ。

めんどいからとりあえず・・・

 

ちょっと動かしたいぐらいの軽いコーディングなら

だけでも書いておけば、とりあえずは見せられるものは作れる。ズボラだけど

 

なんでもそうだけど気になったらググるのが鉄則!
よっぽどマニアックじゃない限り対処方法はでてくるし、
出なかったら、それはCSSコーダーとして頭ひとつでるチャンスだと思うよ。

未分類
スポンサーリンク
シェアする
nullをフォローする
なるのプログラミング備忘録

コメント