おまかせホーマン講座用マニュアル > イチから学ぶHTML&CSS > 7.文字のデザインをカスタマイズする

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

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

文字サイズの変更

タイトル文字の大きさを変更します。
大きさは40px(ピクセル)とします。
タイトルは見出しタグのh1でくくられているので、その部分に指定をおこないます。

h1 {font-size:40px}

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


h1 {
	font-size: 40px;
}

行の高さの変更

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


p {
	line-height: 1.5;
}

文字フォントの種類を変更

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


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

まとめて表示


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

h1 {
	font-size: 40px;
}

p {
	line-height: 1.5;
}

関連ページ