サイトの見た目に関係する難しそうな縦横幅と余白の勉強
今回勉強して、プログラミングって本当にちゃんと理解していないと実際にコーディングするときにコードが出てこなくてただの役立たずになると思った。それが基礎ならなおさら。CSSの勉強を始めて2日目にして早速？マークがちょっと出て危なかった。調べたら割とwidthとheight、paddingとmargin付近の勉強で一度つまずく人が多いっぽい。プロパティと値を覚えるのと基本的な使い方はそこまでむずかしくはないと思ったけど、コーディングのルールみたいなものがめんどくせえなと感じた。
あとで書くけど一番なんだこれって思ったのは、marginの上下の余白の話。要素が縦に並んでて両方にmarginを指定した場合、上の要素のmairgin-bottom:20pxと下の要素のmargin-top:10pxは合計で30pxはなく、この場合大きい方のmargin-bottomの20pxのみ指定される。
分かってればいいけど使いにくいと思った。さらに、borderを設定した場合はまたややこしくなる。box-sizing:boder-boxというコードを入れないと大変になる場合がある。というか、要素からborderで設定した枠線の分だけはみ出るという結果になったりする。横方向の話だと、margin、width、paddingの合計が100%ちょうどにしている時に更に、borderを設定すると100%+borderになるので別でコードを追加して、100%の中にborderも含まれるようにする必要がある。
余白や枠線のサイズを％で指定しなかった場合は、問題ないんだけど今スマホでもPCでも美しくWebサイトを見れないとSEO的にもよろしくないので％が便利なのはすでに理解した。なのでこのようなめんどくさい知識もきちんと勉強しないといけない。
とにかくアウトプットしていこう。
widthとheight
昨日も書いたと思うけど今回勉強した内容にもいろいろでてきたので再度復習を兼ねて書いていこうと思う。
width
要素の横幅を指定できるプロパティ
height
要素の縦幅を指定できるプロパティ
今回新たに分かったのは現代ではスマホでも見ることを考える必要があるのでここを％で指定することが多い。pxを使用することが多いと思ったけど実際は％で指定することが多そうだ。一回現役エンジニアの上官に質問してみようと思う。
以下適当にまとめ
- 要素がdisuplay:inline状態だと指定できないので忘れないようにしよう。
- デフォルトでinlineなタグは<a><img><span>。
- デフォルトでblockなタグは<p><div><ul><h1~h6>。
- inlineの要素は中身のサイズ＝幅だと思っておこう。
- 子要素は親要素より自動で大きくなることは無い。
- widthのデフォルトauto時は横限界まで幅は大きくなる。
- heightのデフォルトのauto時は縦限界まで大きくならず、中身のサイズで決まる。
- bodyのwidthは指定されていないとブラウザのサイズになる。％で指定するときは親要素基準なので重要。指定しなければ見ている端末によって横幅が変わる。
min-widthとmax-width
なにかとサイト作成時に役立ちそうなminとmaxさん。まだ実際効果を実感できてないなので、きちんと理解できてない感はあるけど忘れないようにはしておきたい。この二つは言わずともpxで指定する必要がある。％で指定している場合はブラウザサイズによっては小さくなりすぎたり大きくなりすぎたりすることがあるため。ただ画像には％で指定することがある。
min-width
これ以上は小さくならないという最小値を指定できる。
PCなど大きいブラウザで見るときはちょうどいいサイズだけど、スマホで見たらちょっと小さすぎるなってときに指定してあげると便利。
画像などが画面からはみ出てしまうとき(親要素より大きくなる時)はmax-width:100%を指定する。％で指定すると縦長になったり縦横比率がおかしい画像が出来上がることが多いので、そういう時はheight:autoを指定してあげると治る。
max-width
これ以上は大きくならないという最大値を指定できる。
スマホなど小さいブラウザで見るときはちょうどいいサイズだけど、PCでみたらちょっとでけえなって時に便利。
※min-height、max-heightも存在するけどあまり活躍しないらしい。縦横比がおかしいなと感じたらheightの方をautoで指定してあげるとバランスがよくなる。
widthとheightの今回の勉強はここまで。今後新たに新しい使い方や注意点が出てきたら書いていこうと思う。
marginとpadding
要素周りの余白を指定できる。
padding
要素の中の余白を指定できる。要素の一部として含まれる。
margin
要素の外の余白を指定できる。要素に含まれない。
要素の中央から外側に順に
要素中央(テキストなど)ーwigth、heightーpaddingーmargin
上下左右はborderと同じで
top(上)、bottom(下)、lef(左)、tright(右)で指定できる。
padding-topなど。
まとめて指定したい時は
p{padding or margin:10px 5px 10px 5px;}
左から順に上、右、下、左と指定できる。
上下、左右のまとめて指定の場合は
p{padding or margin:10px 5px;}
左が上下、右が左右。
%で余白を指定したい場合は
- 基準は親要素
- paddingの余白指定はNG
- width、padding、marginの合計値が100％になる必要がある。
- borderを同時に使うならbox-saizing:border-boxを忘れないように。
marginの相殺
上にも書いたが、margin同士がぶつかるとは合計値ではなく、大きい方が優先され、小さい方は消される。これは忘れないようにしたい。
今回の勉強まとめ
レイアウトにめちゃくちゃ重要そうな内容ばかりだったので実践では忘れないようにしたい。ただ実際使ってみるといろいろ発見がありそうなので使ってみて再度勉強していきたい。
今回の落書きは長すぎるので結果だけ
