前回はcolorプロパティでテキストの色を変えてみましたが、これからは様々なプロパティを紹介していきます。
ここでは、頻繁に使われるものを中心に紹介していきます。
font-family
font-familyは、使用するフォントを指定するプロパティです。
端末によって、使用できるフォントは異なります。例えば、メイリオというフォントはWindowsに入っていますが、Macには入っていません。
そのため、font-familyは複数指定することが多いです。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<p class="text">テキスト</p>
</body>
<!-- 省略 -->style.cssには、以下のように記述します。
.text {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}ヒラギノ角ゴシックは、MacやiPhoneなどに入っているフォント、メイリオはWindowsなどに入っているフォントです。
sans-serifは、いずれのフォントも端末に存在しなかった場合に、「平たい角の端を持つ字形」であるサンセリフ体のフォントを大体で使用するという指定になります。
ヒラギノやメイリオ以外でよく使われるフォントには、以下のようなものがあります。
- 游ゴシック
- 游明朝
- Noto Sans Japanese
Noto Sans JapaneseはPCにデフォルトで入っていないため、無料で利用できるWebフォントのGoogle Fontsを利用します。
font-size
font-sizeは名前の通り、フォントサイズを指定するプロパティです。
HTMLはそのままで、style.cssに以下のように記述します。
.text {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 30px;
}文字サイズが大きくなりました。
font-sizeを指定していない場合、p要素の文字サイズは16pxになります。16pxが30pxになって文字が大きくなります。
font-weight
font-weightは、文字の太さを指定するプロパティです。
HTMLはそのままで、style.cssにfont-weightを追加してください。
.text {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 30px;
font-weight: bold;
}文字が太くなりました。font-weightの初期値はnormalです。
h1のようにデフォルトが太字の要素を普通の太さにする場合は、font-weight: normalを指定します。
boldは数値で書くことができます。
.text {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 30px;
font-weight: 700;
}700にすると、boldと同じ太さになります。normalの太さは400です。
フォントの太さは2通りだけではありません。例えば、Noto Sans Japaneseというフォントは、太さが9段階あり、100~900の範囲で指定ができます。
font-style
font-styleは、その名の通りフォントのスタイルを指定するプロパティです。
.text {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 30px;
font-weight: 700;
font-style: italic;
}font-styleをitalicにすると、文字が斜体になりました。font-styleの初期値はnormalです。
line-height
line-heightは、行の高さを指定するプロパティです。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="content">
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</div>
</body>
<!-- 省略 -->保存したらリロードして一度line-heightを指定していない状態での行の高さを確認してみてください。
次に、style.cssに以下のコードを追加してください。
.content p {
line-height: 2;
}行の高さが高くなりました。line-heightの初期値はブラウザによって異なります。おおよそ 1.2 がデフォルトになります。
line-heightの数字に単位をつけない場合、フォントサイズを基準とした高さになります。
デフォルトのフォントサイズは16pxなので、行の高さは16×2で32pxになります。
文字サイズに応じて相対的に高さが変わるので、単位をつけないで数字のみを指定するのが一般的です。
text-align
text-alignは、テキストや画像の水平方向の配置を指定するプロパティです。
CSSを以下のように書き換えてみてください。
.content p {
text-align: center;
}ブラウザを確認すると、テキストの配置が中央寄せになりました。
text-align: leftが左寄せで、何も指定しない場合はデフォルトでleftになります。
text-align: rightを指定すると、右寄せになります。