7.文字のデザインをカスタマイズする

2019年6月7日2020年2月21日イチから学ぶHTML＆CSS その1

スタイルシート（CSS）を使って文字の大きさや色を指定します。

文字サイズの変更（font-size）

記事タイトル文字の大きさを変更します。文字サイズは「font-size」で指定します。単位はピクセル（px）を使い、値は40px（ピクセル）とします。
タイトルは見出しタグのh1でくくられているので、その部分に指定をおこないます。

h1 {font-size:40px}

CSSファイルに書き込む場合、要素の追加や削除がしやすいように下記のように書き込みます。

h1 {
	font-size: 40px;
}

行の高さの変更（line-height）

行の高さを変更すると、行間に最適な広がりができて文章が読みやすくなります。
本文は段落タグpでくくられているので、その部分に指定をおこないます。
数値は基本形を1とし、0.1単位で調整します。

p {
	line-height: 1.5;
}

文字フォントの種類を変更（font-family）

文字フォント（文字の形）を変更します。文字フォントはなんでもいいというわけではなく、ウェブページに表示可能なものを指定します。
たとえば、ウェブページを表示させるパソコンに対象のフォント用ファイルが入ってなければ、そのフォントは表示されず代替のフォントが選ばれます。どれかが選ばれるように複数のフォントを指定し、左から優先で選択されます。
全体に反映させる場合はbodyタグに指定します。

body {
	font-family: 'メイリオ', sans-serif;
}

まとめて表示

下記をCSSファイルに入力します。

body {
	font-family: 'メイリオ', sans-serif;
}

h1 {
	font-size: 40px;
}

p {
	line-height: 1.5;
}

ページでみる表示

CSSが反映すると、メリハリのある見やすい表示になります。