こんにちは。水族館に行くと、クラゲの水槽の前でしばらくぼんやりと時を過ごしてしまうサイトウです。
CSSで文字の装飾をしようとした時、決めなければならないことが意外と多いことに気づきます。書体や、文字のサイズや太さなど、たくさん指定することが出てきますよね？
これをひとつひとつコードにしていくと、かなりの量になってしまいます。
実はフォントに関する指定を一括で行うことができる「font」というプロパティがあります。今回は、【font】の
について説明します。派手さはありませんが、使ってみると便利なプロパティです。fontを使用することで、雑然としたコードもすっきりと読みやすくなりますよ。
CSSを学び始めたばかりの方や、見やすいコードを書きたいと思っている方は是非読んでみてくださいね。また、ブログサイトのように文章をたくさんのせるページを作成する方にもおすすめです。
目次
【font】とは
【font】の読み方
「フォント」と読みます。字体や書体と訳されます。
語源はフランス語の「fonte」です。14世紀頃、西洋においては「金属製の活字を作り、枠に収めてインクをつけて紙に印刷する」という活版印刷が主流となりました。そこで用いられる文字が刻印された金属版のセットが語源と言われています。
余談ですが、活版印刷は、味わいがある印刷に仕上がると近年再び注目を集めています。興味のある方はチェックしてみてください。
【font】の説明
文字の装飾をするプロパティは下記のようなものがあります。
- font-weight（文字の太さを指定する）
- font-size（文字の大きさを指定する）
- line-height（行の高さを指定する）
- font-family（フォントの種類を指定する）
- font-style（文字のスタイルを指定する）
- font-variant（スモールキャップを指定する）
これらをまとめて指定することができるのがfontプロパティです。上記の中で、font-styleとfont-variantはどのようなものかわかりにくいですね。
font-styleは、font-familyでフォントの種類を指定した際、通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定するプロパティです。少し文字を傾けたいという時に使用します。例えば、文献の引用部分だけ斜体にしたり、著名人の名言を筆記体にするといった使い方です。
font-variantは、小文字を小さな大文字の形で表示するかどうかを指定するプロパティです。値をsmall-capsにすると、小文字を小さめの大文字に変換します。日本語で生活していると、なぜこれが必要なのかと疑問に思ってしまいますが、欧文では大切なことのようです。
【font】で利用できる値
【font】では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| normal
bold lighter bolder |
font-weightを指定するときに使用します。 |
| px
rem ％ ex |
font-size、line-heightを指定するときに使用します。 |
| フォント名 | font-familyを指定するときに使用します。 |
| normal
italic oblique |
font-styleを指定するときに使用します。normalが初期値です。 |
| normal
small-caps |
font-variantを指定するときに使用します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 3.5以降対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 3.2以降対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
【font】の基本的な使い方
【font】の使い方
- セレクタ（どの部分の）
- プロパティ（何を）
- 値（どのようにするか）
というCSSの基本的なコードの書き方は変わりませんが、fontプロパティを使う時は、２つのルールがあります。
１ font-sizeとfont-familyは必ず指定すること
font-sizeとfont-familyは省略することができません。必ず指定しましょう。
２ 各プロパティの値を指定する際の順序が決まっている
- font-style、font-variant、font-weight（順不同）
- font-size
- line-height
- font-family
の順番でコードを書きます。
|
1 2 3 |
h1{ font: bold 1rem/130% "ＭＳ 明朝"; } |
line-heightを指定する場合には、line-heightの値を記述する前にスラッシュ（ / ）で区切ります。必須項目のfont-sizeとfont-family以外は、必ず指定しなければいけないわけではありません。fontプロパティの中で、設定するプロパティのみをこの順番で記載すればOKです。
ただし、fontプロパティを使用すると、フォント関連のスタイルが一旦リセットされてから、 fontプロパティで指定した値が適用されます。 省略した値は、初期値に戻りますので注意してください。
また、セレクタの中に値をいくつか書くと、セミコロンをつけ忘れてしまいがちです。コードを書いた後は、必ず文末にセミコロンが書かれているかを確認するようにしましょう。
【font】のおすすめの使い方
ブラウザで興味のあるサイトを開いたとき、読みにくいページだなあと感じたことはありませんか？読み始めてはみたものの、途中で読むのをやめてしまったり、別のサイトに移動してしまったことは誰にでもあるはずです。
この読みにくさの大きな原因のひとつが「行間」です。文章が長くなればなるほど、行間が狭く文字が詰まっていると、非常に読みにくくなります。小さな文字がぎっしり書かれている本は、読みたくないという人も多いですよね。
サイトを制作した側からすると、文章が読みにくいという理由で途中でサイトを離れられてしまうのは、避けたい事態です。実は、line-heightプロパティを使って文字と文字の間隔を調整することで、この問題を解決することができます！
See the Pen
bGwdrWq by F Saito (@kero23)
on CodePen.
See the Pen
PoGqKRb by F Saito (@kero23)
on CodePen.
2つを見比べてみていかがでしょうか。印象がかなり違いますね。
読みやすい行間は130%～150%（1.3em～1.5em）と言われていますので、bodyで全体にline-heightを指定しておくのがおすすめです。選択したフォントの種類や文字の大きさによっても読みやすい行間は変わってきますので、表示を確認しながら微調整をしましょう。
ほんの少しの工夫で、文章の伝わり方が違ってきます。line-heightを上手に活用して、文章の読みやすさを向上させましょう。
まとめ
いかがでしたか？今回はCSSのfontプロパティについてご紹介しました。
コードをたくさん書くときは、コードの見やすさが大切になってきます。なぜなら、エラーが生じた時に、どの部分に問題があるのか素早く探し出して対応しなければならないからです。「まとめられるものはまとめて書く」ということを習慣づけておくと、アクシデントにも焦らず対処することができますよ。
ぜひ参考にしてみてくださいね。
参考文献：2019年 SBクリエイティブ株式会社｜1冊ですべて身につくHTML&CSSとWebデザイン入門講座【著】Mana
