こちらで掲載しているコードや画像は ウェブカツ の動画内で使われたものを引用しています。
スポンサーリンク
Lesson7「画面を作ろう！」
HTMLファイル内にはHTMLタグだけ、CSSファイル内にはCSSだけと住み分けすると後からも見やすく、修正しやすくなる
vertical-align: middle;はインライン要素、テーブルタグに対してだけ使え、親要素に対して上下中央に揃えることが出来るもの
floatを使ったら、親要素で必ずoverflow: hidden;を使って回り込みを解除する
CSS3から使えるようになったbox-sizing: border-box;を使うことでpaddingやborderの幅も指定したwidth内に自動で納めてくれる
widthに100％を指定すると「親要素のwidth幅いっぱい」という指定になる
Lesson8「画面をを作ろう！part2」
画像を縦に並べて表示するのに親要素を設けその親要素に対して余白を指定し、さらにそれぞれの画像に余白を設けるとき最後の画像に親要素分と子要素分の余白が付くので最後の子要素の余白を付けないようにするには:lastchildを子要素につけ余白をなくすことが出来る。
親要素の高さ（height）と行の高さ（line‐height）を同じにすると文字位置を中央揃えに出来る
