レッスンお疲れさまでした。

本日は、サンプルをもとに文字の大きさや余白の調整を行いました。

文字の大きさは、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つ指定した場合、時計周りに、「上」「右」「下」「左」の順に余白ができます。