cssフォントの設定方法を覚えよう!【font関連】

フォントの設定方法

cssでのフォントの設定方法です。 fontに関する設定全般について紹介していきます!

フォントとは、pcで文字を表示したり印刷したりする時の文字の形の事です。 pcには予めゴシック体や明朝体などのフォントが入っているので、フォント名やフォントサイズをcssやhtmlで指定してあげるだけで、好きな形の文字を表示する事が出来るのです。 ではそれぞれの設定方法をご紹介していきますね。

目次
フォントサイズの設定
font-weightの設定方法
font-familyの指定方法
font-styleの設定方法
font-variantの設定
line-heightの設定方法
fontプロパティ(まとめて設定)

フォントサイズの設定

フォントサイズの指定方法

font-sizeプロパティでは、フォント(文字)の大きさを設定することができます。 フォントサイズは下のようなプロパティを使ってpxなどの単位を付けて指定することができます。

プロパティ 意味
font-size フォントサイズ(文字の大きさ)を設定する
p{
  font-size:10px;
}

フォントサイズを設定する時の単位には下のような種類があります。

単位 読み方
px ピクセル
pt ポイント
em エム
cm センチメートル
mm ミリメートル

emをよく見かけることがあると思います。 でもemってイマイチわかりづらいですよね。 なのでemの意味を簡単に説明しますね。

例えば、あらかじめ親要素のフォントサイズを12pxに設定していたとします。 そして親要素の中のpタグなどのフォントサイズを「font-size: 1.5em;」のように記述したとします。 この場合pタグのフォントサイズは、親要素のフォントサイズ12pxの1.5倍の18pxで表示されるということです。

といっても、親要素が~って説明だとイマイチわかりづらいと思うので、詳しくはフォントサイズのページにて紹介します。 またフォントサイズで使える単位や表示例についてもそちらで詳しく紹介します。

font-weightの設定方法

font-weightプロパティは、フォント(文字)の太さを指定する時に使います。 太さは100~900の9段階から指定できるほか、normal、boldなどのキーワードでも指定することができます。

プロパティ 意味
font-weight フォント(文字)の太さを設定する
p{
  font-weight:bold;
}
指定できるキーワード 太さ
normal 通常の太さ(数値の場合400相当)
bold 太字(数値の場合700相当)
lighter 親要素に設定した値より1段細くなる(数値の場合-100)
bolder 親要素に設定した値より1段太くなる(数値の場合+100)

bolder、lighterは、この説明だとちょっとわかりづらいですよね。 なので詳しくはfont-weightのページでご紹介します。

他にも各キーワードや数値での表示例なども紹介します。

font-familyの指定方法

font-familyプロパティでは、フォントの種類(文字の形の種類)指定することができます。

メイリオやMS Pゴシックなど指定するフォントの種類は、カンマ(,)で区切って複数並べる事ができます。

プロパティ 意味
font-family フォントの種類を指定する
p{
  font-family:'MS ゴシック', meiryo ,sans-serif;
}
指定できるフォントのキーワード フォントの種類
sans-serif ゴシック系フォント
serif 明朝系フォント
cursive 草書体・筆記体系フォント
fantasy ポップ系フォント
monospace 等幅フォント

MS ゴシックのようにフォント名の中にスペースがあるものは、シングルクォーテーション「’」もしくはダブルクォーテーション「”」で囲みます。 スペースがないフォント名には、基本的に必要ないです。

それと複数のフォントを指定する事ができますが、左側のフォントから優先されて適用されます。 詳しくはfont-familyのページで紹介します。

他にもfont-familyの種類なども掲載します。

font-styleの設定方法

font-styleプロパティは、名前の通りフォントのスタイルを設定する時に使いますw フォントのスタイルというのは標準であったり、イタリックだったり、斜体だったりというのです。

まあ、フォントを傾けるか傾けないかの設定ができるプロパティです。

プロパティ 意味
font-style フォントのスタイルを設定する
p{
  font-style:normal;
}
font-styleの値 意味
normal 標準のフォント(初期値)
italic 続け書き書体のフォント
oblique 立体を斜めにしたような字体のフォント

表示例

フォントスタイル(normal)
フォントスタイル(italic)
フォントスタイル(oblique)

font-variantの設定

font-variantプロパティは、フォントをスモールキャップする時に使います。

英語の文章などで、通常サイズの大文字と小さいサイズの大文字の組み合わせを見かけた事はないですか? そういうような、通常の大文字より小さいサイズの大文字表現されるような事をスモールキャップといいます。

※小文字の表示形式が小文字サイズの大文字になっている物のこと。
プロパティ 意味
font-variant フォントのスモールキャップを設定する
p{
  font-variant:small-caps;
}
<p>ABCDEFGabcdefg</p>

表示例

ABCDEFGabcdifg

line-heightの設定方法

line-heightプロパティは、行の高さを設定する時に使います。

例えばfont-size:14px;を指定していて、line-height:20px;のように指定するとします。 この場合、line-heightの20px(行の高さ)からフォントサイズの14pxを引いた残りの6pxが、行間として上下に3pxずつ割り当てられるという事です。

ちなみに、指定したフォントサイズの値(~pxなど)よりline-heightの値(行の高さ)が小さい場合は、行が重なって表示されます。

プロパティ 意味
line-height 行の高さを設定する
p{
  line-height:10px;
}

line-heightで指定できる値は「normal」「pxなどの単位」「1などの実数」「%」の種類があります。 表示例や注意点などの詳しい説明は下のページで紹介します。

fontプロパティ(まとめて設定)

fontプロパティでは、 「font-style」「font-weight」「font-variant」「font-size」「line-height」「font-family」などのfontに関する設定をまとめて行う事ができます。

p{
  font: bold 10px/1.5 "MS 明朝";
}

fontプロパティでまとめて設定を行う際は「font-size」「font-family」は省略できませんので注意して下さい。

記述する順番は「font-style」「font-weight」「font-variant」「font-size」「line-height」「font-family」の順番になります。 このうち「font-style」「font-weight」「font-variant」の3つは、順不同となるので自由に入れ替えて大丈夫です。

fontプロパティについて詳しくは下記ページで紹介しますね(^^♪

以上がfont関する設定全般になりますが、いかがでしたでしょうか?

今回はあまり掘り下げずに、よく使う部分だけピックアップしてみました! (詳しい説明は各ページに記載してます)

fontの設定はcssやhtmlでもかなり使う事が多いので、それぞれの記述方法を覚えておくと便利ですよー(#^^#) 以上「cssフォントに関する設定全般」でしたー(^^)/