学習内容

サルワカの読み進め。(STEP6〜7まで)

理解した点

max-width、min-widthについて max-widthを設定すると設定した値以上に大きくならない、min-widthを設定すると設定した値以上に小さくならない。これらの考え方はレスポンシブデザイン(サイトを読み込む端末に応じて要素の幅などを変えること)を使う際に効果を発揮します。
画像の縦横比を保つ方法 height: auto; max-widthにより、画像の縦横比がおかしくなった場合はheight: auto;とすることで、縦横比を保ったまま、画像を表示できます。 (PCではちゃんと表示されたのに、スマートフォンではいびつな形で表示されてしまったという場合に使います)
margin、paddingについて marginとは要素の内側の余白、paddingとは外側の余白のこと。 margin、paddingを設定した要素に対してheight、widthを設定すると内側の要素のみに適用されます。この時、paddingはwidthには含まれません。例えば、要素のwidthを150pxとし、左右のpaddingを20pxずつにした場合、要素の全体の幅は合計で190となります。また、padding、marginは%で指定することもでき、その場合は親要素の
marginの相殺について縦に並んでいる2つの要素にmargin-bottomとmargin-topが設定されている場合、値が大きい方のmarginしか適用されなくなってしまいます。(例えば、margin-bottomが20pxの要素1とmargin-topが30の要素2が縦に並んだ場合、適用されるmarginはtopの30pxになります) 相殺が起きるのはmargin同士のみで、padding同士、marginとpadding間では起きません。
margin-leftとmargin-rightの値をautoにすることで要素を中央配置できるただし、これが適用されるのはブロック要素のみです。

分からなかった点、疑問に思った点

なぜ、margin同士のみ相殺が起こってしまう?

備忘録

上下左右全てにmargin、paddingを指定する場合は以下のように記述する。 margin(or padding) : 上方向の値, 右方向の値, 下方向の値, 左方向の値 →左側から、時計回りの順番に書くと覚える。

所感

padding、marginについては理解があやふやな部分があったため、じっくり読み進めました。特に、marginの相殺は初めて学習した事柄であり、以前に外部の学習サイトでCSSを書いていて、きちんとmarginを設定しているはずなのに表示がおかしい事があったので、心の中で「これが原因かも!」って叫んでしまいました。 max-width、min-widthについてもレスポンシブデザインはwebサイトを作る上で重要になってくるものなので、しっかりマスターしたいです。