はじめに
こんにちは、Janckです。
ちょっと聞いてくださいよ！！
最近、プログラミングの勉強もかねてサイト制作をしているんですけど、最近になってハチャメチャな壁にぶつかったんですよ！！！！！
「純白の悪魔」 著者/Janck
あれは雪が肌に強く吹き付ける荒れた日のこと
僕はようやくHTMLでの作業を終わらせ、サイト制作をCSSの作業に移しはじめていた。
「よし、CSSもがんばるぞーーーー。野郎ども血反吐をはいてでも歩を進めろ！！」
そう、ご覧の通り僕はギリギリだ。まるで学校で大の方をしたくないためずっと我慢し続け、あともう少しで家につくのに家が見えた瞬間今までにない便意が襲い掛かっている62歳無職の小学生、石田哲郎のように。
そんなギリギリのメンタルで僕は初めてのCSSに挑んだ。
Youtubeを凝視しすぎてスマホを透過できるようになったり、参考書を見すぎて右腕が列海王の腕を移植した愚地克巳のようになったりと確実に僕は成長していた。
だが、そいつは突然現れた。
「どうしてだよ！！なんで上下左右に空白ができるんだよ！！」
そう、奴が現れたのだ。純白の悪魔が。
僕は必死に抵抗した
「なんちゅうことするんだ貴様！！(カスミン) 消えろ消えろ消えろーー！！！(シンジ)」
こんなにキャラが渋滞するぐらい抵抗した。
さて、この戦いには思いもよらないラストが待ちかまえているのだが、それはまた別のお話で (つづく)
と、こんな感じの壁にぶつかりました(笑)
ということで今回はサイト制作をしているときに上下左右に余白が出てきた時の対処法を書いていこうと思います。
余白の消し方
結論から言います。
margin: 0px;
padding: 0px;
}
これをCSSに書くだけです。ちなみに「*」は半角英数字の「＊」です。
試しにやってみましょう。
このように先ほどのコードをCSSに書き込みます。すると...
なんということでしょう、あんなに目障りだった余白が綺麗に取り除かれているではありませんか。と、こんな感じで余白を取り除くことができます。
余白の原因
ではなぜ余白ができてしまったのか。
どうやら、Google Chrome 等のブラウザにはデフォルトのスタイルがあり、それが勝手に適用されていたみたいです。
余白を消せた理由
それは先ほど登場したこのコードに秘密があります。
margin: 0px;
padding: 0px;
}
「*」 はすべての要素に適用させるという特殊スキルを持っています。
要素というのはHTML内にある
のことです。
そして、「margin: 0px;」 と 「padding: 0px;」 は簡単に言うとこれを適用された要素は自分の持っている範囲いっぱいまで画像などを表示できるという能力を持っています。
図にするとこんな感じ
赤斜線・・・元々の要素の範囲 / 青斜線・・・ブラウザのデフォルトの範囲
紫・・・画像などが写っている範囲
まずコードを入れていない場合はこうなっています。ブラウザのデフォルトのせいで要素の範囲が制限されています。
ではコードを入れてその制限をぶち壊すと
要素の範囲が元々の範囲に戻るので余白が消えるということです。
まとめ
今回は上下左右に余白が出た時の対処法について書いてみました。図などで説明したのは初めてだったのですがどうだったでしょうか。
まぁ最悪、余白が消えた原因は分からなくていいので「このコードをCSSにぶち込めばいいんだ」と思ってくれたら嬉しいです。（笑）
ちなみに僕はこの余白を消すまでに２時間悩みました（笑）
少しでも皆さんの役に立てたのであれば２時間苦しんだ意味があったなと思います。（笑）
最後まで見ていただきありごとうございました。
