おすすめ記事
フォント
スポンサーリンク

あらすじ

font(フォント)とは、ウェブサイトを作る上では重要な要素です。
 
そんなフォントCSSでは自由に操ることができてしまいます。

 

今回は具体的にどのような要素を変更することができるのかをご紹介していきたいと思います。

 

  • フォントの書式を指定するfont-family
  • フォントのサイズを指定するfont-size
  • フォントのスタイルを指定するfont-style
  • フォントの大文字の表示方法を指定するfont-variant
  • フォントの太さを指定するfont-weight

といった項目でご紹介します。

 

そもそもCSSが分からない!といった方はこちらをご覧ください

 

スポンサーリンク

フォントの書式を指定するfont-family

 

明朝体

 

font-familyとはCSSにて特定のフォントをホームページやウェブサイトなどに反映する際に使用するプロパティです。

 

実際の記述方法は以下です。

 

具体例1
font-family: “MP ゴシック”, Arial, Helvetica, Sans-serif;

 

memo
"MP ゴシック"のように2つの文字で構成されている場合は必ず""で囲ってあげる必要があります。

 

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プロパティです。

 

memo
デフォルトのフォントサイズは16pxです。

 

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(斜体)ですが、その違いは何でしょうか。

 

Wikipedia(ウィキペディア)によると

ほとんどの場合上部が右に傾いているので、しばしば斜体と混同ないし同一視されるが、実際は両者は異なる概念である。

 

といったことが書かれています。

 

このことから、イタリック体斜体は異なる概念だということはわかったかと思います。

 

また、斜体とは単純にフォントを斜体にしたもので、イタリック体はその斜体に、よりよく見せるために加工を加えたものと言われています。

 

フォントの大文字の表示方法を指定するfont-variant

 

大文字 フォント

 

font-variantではフォントの小文字を大文字に変更し、サイズはそのまま小文字と同じサイズに変更するsmall-capsと呼ばれる値を使用する際に使うプロパティです。

 

実際の記載方法

font-variant: small-caps;

 

表示のされ方

HELLO WORLD

といった具合になります。

 

フォントの太さを指定するfont-weight

 

太さ

 

font-weightとはフォントの太さを決めることのできるプロパティです。

 

  • normal:通常の太さで表示
  • bold:太字で表示
  • 100から900までの100ずつの数字:400を通常の太さとし、400よりも小さい数字であれば細く、400よりも大きい数字であれば太く表示

 

といった方法で太さを指定することができます。

 

また、lighterbolderを値に指定することで、一段階細くしたり、太くしたりすることができます。

 

まとめ

いかがだったでしょうか。

 

フォントとは奥が深く、ウェブサイトにとっては重要な要素であることはいうまでもありません。

フォントによってはサイトのイメージも変わってしまうといってもいいくらいです。

 

ぜひ、フォントに関するCSSを網羅して、ウェブサイト製作に役立ててください。

 

 

スポンサーリンク

Twitterでフォローしよう!

おすすめの記事