##前回の話
前回の話
前回はHTMLは積み木・コーディングは数だよって話をしました。
##今回の話
今回は、これが正しいというわけではないけどCSSのスタイルでこういう使い分けをするよって話をしま。
CSSはHTMLの見た目を担当しているもので、positionとかwidthとかcolorとかDOMのスタイルを指定してくれます。
このプロパティはたくさんあって覚える気も起きないと思う人もいると思います。
私も大して覚えているわけではないですが、プロパティが英語なので何のプロパティなのかもわかりやすいし、snippetという予測変換みたいなものもあるので苦悩しないかな。
まあ…、数をこなしていると自然と覚えます。
##余白の指定 (margin, padding, border)
webデザインとかやっていると余白の調整は避けては通れないものだと思います。
「ここ1pxずれてる」とか「上下左右中央になってない」とか言われたり…
そんな余白を空けたりする時に使うプロパティはみなさん何を使われているでしょうか？
私はなんとなくここにはルールを設けて使っていて、参考程度に聞いてもらえたら嬉しいです。
###margin
marginはそもそも余白という意味で要素の上下左右の余白を設定することができます。
そのため、paddingのように要素の内側に余白を作るのではなく、「要素の外側に余白」を作ります。
このことから、要素と隣接する要素に余白を設けたい時なんかには、このmarginを使用するようにしています。
###padding
paddingは詰めるという意味で、要素内の余白を詰める、ということ。
余白を詰めるといいますが、paddingを設定しなければ要素内の余白は元から無いですよね。
なので、paddingは「要素の内側に余白」を作ると認識するのが良いかも。
###border
borderは境界線という意味で、要素の境界線を指定することができます。
境界線の幅を指定するなどできますが、一般的には要素の装飾的要素として扱われるのがほとんどなので、今回の余白という意味合いではおまけとして紹介しました。
私は背景の色とその上の要素の色が被っている時なんかに、borderを指定して要素の視認化のために使用したりします。
###box-sizingの設定もしよう（padding,border）
paddingやborderを設定した時、widthとheightをpxで指定したのにpaddingやborderで設定したpx分だけwidthとheightが大きくなってしまったりしませんか？
それは、box-sizing: content-boxの設定がされているためです。
content-boxの場合、指定したwidthとheightは「contentの大きさ」をboxとして保持するもので、その大きさの中にはpaddingとborderは含まれていません。そのため、要素の大きさはそのままに余白であるpaddingとborderの指定した分だけ大きくなってしまうのです。
それじゃあ、「widthとheightのpxを指定した大きさのまま、paddingとborderも指定したい」という時はどうしたらいいのか。
そんな時はbox-sizing: border-boxを設定します。
border-boxの場合は、borderまでの要素をboxとして大きさを保持します。
要素のboxは content → padding → border の順に構成されています。
content-boxではcontentまでをboxとし、border-boxはborderまでをboxとします。
「widthとheightのpxを指定した大きさのまま、paddingとborderも指定したい」時にはborder-boxを使うことで解決ができます。
図がないとよくわからないと思いますが、GoogleChromeのディベロッパーツールにはこの要素のboxを確認することができます。
これで視覚的にどんな感じにboxが構成されているのかが見れるのでわかりやすいですね。
##サンプル
それでは説明はこんな感じですが、実際に上記の説明からどんな風に余白をつけているのか、codepenで作った簡単なサンプルですがみてみましょ。
See the Pen MARKUP margin padding border by Kido Yuta (@sutobu000) on CodePen.
要素内の要素との余白にはpadding、隣り合わせる要素にはmarginを使っています。
borderは背景で要素が見難くならないようにするアクセント的使い方をしている感じです。
また、margin: 0 autoの場合には要素は左右の幅を均等に保とうとするので、中央配置ができます。ただし上下中央配置はできないので注意です。
上下のheightの指定はmarkupする中では意外と大変な要因かもしれませんね。
##まとめ
余白の意味をちゃんと理解すべき
marign, padding, borderと3つのプロパティを簡単に説明しましたが、
名前の意味を辿って、「この時はこれを使うべきだな」っていうのを身につければ良いのではないかと。
というのも、他のプログラミング言語でもちゃんと英語の意味を理解していれば使い方とかが理解できるもので。
CSSのプロパティなんかは特にそれが出ている気がしますね。
backgroundやopacityなんかも意味から何のプロパティかわかりますね。
じゃあ、英語を勉強すればいいの？、というとそうではなく、意味を知った上で使い方もちゃんと理解することが大事です。
意味がわかっても使い方がわからないんじゃ、取扱説明書の概要だけ読んだに過ぎませんから。
習得するにはやっぱり自分でサイトを作って見るのが一番です。
作ってみて、ここはどのプロパティを使うかを学んでいくのが良いかと。
他のサイトなんかも最高の参考書なのでディベロッパーツールで見るといいですね。
個人的には以下のまとめサイトをみたりします
他にもCSSをもっと学びたいとか、問題形式でやってみたい！とかいう人は「CSS Battle」がおすすめ。
https://cssbattle.dev/
出された画像をhtmlとcssを使って同じ画像を作成し、一番少ないコードの字数で書いた人が評価されるというもの。
自分のマークアップ力を測るのにもいいかもしれませんね。SEOとかは全く関係ないですので、これを実際にwebサイトで使うのは考えものですが…
次回は、もらったデザインからマークアップをする中でどこに注意を払っているのか
そのあたりの話をできたらいいなと。お楽しみに。
→次回