
目次
あらすじ
font(フォント)とは、ウェブサイトを作る上では重要な要素です。
そんなフォントをCSSでは自由に操ることができてしまいます。
今回は具体的にどのような要素を変更することができるのかをご紹介していきたいと思います。
- フォントの書式を指定するfont-family
- フォントのサイズを指定するfont-size
- フォントのスタイルを指定するfont-style
- フォントの大文字の表示方法を指定するfont-variant
- フォントの太さを指定するfont-weight
といった項目でご紹介します。
そもそもCSSが分からない!といった方はこちらをご覧くださいfa-arrow-circle-down
フォントの書式を指定するfont-family
font-familyとはCSSにて特定のフォントをホームページやウェブサイトなどに反映する際に使用するプロパティです。
実際の記述方法は以下です。
具体例1
font-family: “MP ゴシック”, Arial, Helvetica, Sans-serif;
font-familyの値には、フォント名を直接指定する方法とフォントのグループで指定する方法の2種類があります。
font名で指定する方法
まず、フォント名で直接指定する際に使用する代表的な日本語のフォント名には
- MP ゴシック
- MP 明朝
- メイリオ
といったものがあります。
また、アルファベットでの有名なフォント名には
- Arial
- Courier
- Times New Roman
- Helvetica
があります。
これらフォント名の中から希望のフォント名を選択してfont-familyの値として指定してあげます。
具体例2
font-family: Courier, “MP 明朝“, “Times New Roman”, Serif;
上記具体例2のようにフォント名を複数指定すると、使用しているOSやパソコンが最初のcourierに対応していない場合、次に指定した"MP 明朝"をフォントとして選択し、"MP 明朝"にも対応していなければ、次のフォントと言った具合に順にユーザーの環境によって選択可能なフォントを自動で選択してくれます。
フォントのグループ名で指定する方法
フォントのグループには
- Sans-serif
- Serif
- Cursive
- Fantasy
- Monospace
の5種類があります。
これらの中から希望のフォントを選択し、font-familyの値として記述します。
具体例3
font-family: sans-serif;
基本的にはこのような記述の仕方はしません。
具体例2のように最初にフォント名を直接指定し、最後にフォントグループを記述するといった書き方がより一般的です。
その理由として、最初に具体的なフォントを指定し、最後にフォントグループを指定することで、指定した全てのフォントが対応していなかった際に、そのフォントにより近いグループを選択しておくことで、ユーザー環境に依存することなく自分の希望したフォントを表示させることができるからです。
フォントのサイズを指定するfont-size
フォントサイズを変更したい際に使用するのがこのfont-sizeプロパティです。
font-sizeを変更する際の値には
- 単位
- パーセント
- 単語
といった方法で指定することができます。
単位
単位には主に
- px(ピクセル)
- em(エム):emとは基準のフォントサイズを1としたサイズのこと。
- ex(エックス):英字の小文字xを1としたサイズのこと。
- vw(ビューポート・ウィドゥス):画面サイズによってフォントサイズを変更できる単位で、1vwはビューポート内の1%の幅で表示します。
といったものがあります。
パーセント
%(パーセント)で指定する方法は、基準となるフォントサイズに%で指定を加えることで、フォントサイズを指定できます。
例えば、デフォルトのフォントサイズは16pxですので、15pxで表示させたい時は
font-size: 94%;
20pxだったら
font-size: 125%;
といった感じです。
キーワード
キーワード(単語)には
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
といった種類があります。
具体例
font-size: large;
mediumを基準値とし、largeになると1.2倍、smallになると1.2倍少なくなるといった具合に、1.2倍ずつ変更することが可能です。
フォントのスタイルを指定するfont-style
font-styleには主に
- normal(通常):通常の文字スタイルで表示します
- italic(イタリック体):イタリック体で表示します。
- oblique(斜体):斜体で表示します。
の3種類を適用することができます。
具体例
font-style: italic;
italic(イタリック体)とoblique(斜体)の違いとは
ほぼほぼ似た書式のitalic(イタリック体)とoblique(斜体)ですが、その違いは何でしょうか。
ほとんどの場合上部が右に傾いているので、しばしば斜体と混同ないし同一視されるが、実際は両者は異なる概念である。
といったことが書かれています。
このことから、イタリック体と斜体は異なる概念だということはわかったかと思います。
また、斜体とは単純にフォントを斜体にしたもので、イタリック体はその斜体に、よりよく見せるために加工を加えたものと言われています。
フォントの大文字の表示方法を指定するfont-variant
font-variantではフォントの小文字を大文字に変更し、サイズはそのまま小文字と同じサイズに変更するsmall-capsと呼ばれる値を使用する際に使うプロパティです。
実際の記載方法
font-variant: small-caps;
表示のされ方
HELLO WORLD
といった具合になります。
フォントの太さを指定するfont-weight
font-weightとはフォントの太さを決めることのできるプロパティです。
- normal:通常の太さで表示
- bold:太字で表示
- 100から900までの100ずつの数字:400を通常の太さとし、400よりも小さい数字であれば細く、400よりも大きい数字であれば太く表示
といった方法で太さを指定することができます。
また、lighterとbolderを値に指定することで、一段階細くしたり、太くしたりすることができます。
まとめ
いかがだったでしょうか。
フォントとは奥が深く、ウェブサイトにとっては重要な要素であることはいうまでもありません。
フォントによってはサイトのイメージも変わってしまうといってもいいくらいです。
ぜひ、フォントに関するCSSを網羅して、ウェブサイト製作に役立ててください。