レッスンお疲れさまでした。
本日は、サンプルをもとに文字の大きさや余白の調整を行いました。
文字の大きさは、font-sizeで変更します。
単位は、pxやem、remなどがあります。
pxは古いIEでユーザー側で文字サイズの変更ができなくなってしまいます。
emやremを使うと良いでしょう。
2emは、基準となるサイズの2倍のサイズ、同様に
2remも基準となるサイズの2倍のサイズになります。
emとremは基準となるサイズが異なります。
emは親要素のサイズを継承、remはルートからの計算になります。
ルートであるhtmlのfont-sizeを62.5%にしておくと1.6remが16pxと同じサイズになります。
remは古いブラウザで対応していないので、remとpxを併記します。
文字の種類は、font-familyで変更します。
Webサイトを閲覧している人のPCにインストールされていフォントでないと正しく表示できないので、通常WindowsやMacに標準でインストールされているフォントを指定します。
余白は、marginやpaddingで変更します。
marginは自分と相手の間に隙間を作りますので下の色が出てきます。
paddingは自分自身が大きくなるので自分自身の色が出ます。
状況に応じて使い分けましょう。
全体的に背景が白だとmarginでもpaddingでも同じ結果になりますので、作成中は白以外の色をつけて、色のつき方を確認しながら作業すると良いでしょう。
marginやpaddingは指定する値の数で余白のできる場所が変わります。
値を1つ指定した場合、上下左右に余白ができます。
値を2つ指定した場合、1つ目の値が上下、2つ目の値が左右に余白ができます。
値を3つ指定した場合、1つ目の値が上、2つ目の値が、左右、3つ目の値が下に余白ができます。
値を4つ指定した場合、時計周りに、「上」「右」「下」「左」の順に余白ができます。