ホーム
CSSプロパティ一覧
fontプロパティの値（CSS）

fontプロパティの値（CSS）

2020.03.01
スポンサーリンク
Photo by Jantine Doornbos on Unsplash
Photo by Jantine Doornbos on Unsplash
スポンサーリンク

fontプロパティの値（CSS）

font-style

値（パラメータ）内容
normal標準（初期値）
italicイタリック体
oblique斜体
入力例font-style: italic;
表示例
normalが標準
italicがイタリック体
obliqueが斜体

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-style: normal;">normalが標準</div>
<div style="font-style: italic;">italicがイタリック体</div>
<div style="font-style: oblique;">obliqueが斜体</div>

サンプルコード（CSS別記） 

/*CSSコード*/
.font-style-normal {
  font-style: normal;
}
.font-style-italic {
  font-style: italic;
}
.font-style-oblique {
  font-style: oblique;
}

<!--HTMLコード-->
<div><span class="font-style-nomal">normalが標準です</span></div>
<div><span class="font-style-italic">italicがイタリック体です</span></div>
<div><span class="font-style-oblique">obliqueが斜体です</span></div>

サンプルコード（CSS別記） の表示

normalが標準です
italicがイタリック体です
obliqueが斜体です

font-variant

値（パラメータ）内容
normal使用しない（初期値）
small-caps使用する
入力例font-variant: small-caps;
表示例normalだとHelloはHelloのまま
small-capsの場合はHelloがHelloになる

上記表示例のサンプルコード（HTML埋め込み） 

<div>normalだとHelloは<span style="font-variant: normal">Hello</span>のまま</div>
<div>small-capsの場合はHelloが<span style="font-variant: small-caps">Hello</span>になる<div>

サンプルコード（CSS別記） 

/*CSSコード*/
.font-variant-normal {
  font-variant: normal;
}
.font-variant-small-caps {
  font-variant: small-caps;
}

<!--HTMLコード-->
<div>normalだとHelloは<span class="font-variant-normal">Hello</span>のままです</div>
<div>small-capsの場合はHelloが<span class="font-variant-small-caps">Hello</span>になります<div>

サンプルコード（CSS別記） の表示

normalだとHelloはHelloのままです
small-capsの場合はHelloがHelloになります

font-weight

＜一般的な値＞

値（パラメータ）内容
normal標準（初期値）（400と同等）
bold太字（700と同等）
入力例font-weight: bold;
表示例
これが標準
これが太字

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-weight: normal;">これが標準</div>
<div style="font-weight: bold;">これが太字</div>

サンプルコード（CSS別記） 

/*CSSコード*/
.font-weight-normal {
  font-weight: normal;
}
.font-weight-bold {
  font-weight: bold;
}

<!--HTMLコード-->
<div>
  <span class="font-weight-nomal">これが標準です</span><br>
  <span class="font-weight-bold">これが太字です</span>
</div>
<div class="font-weight-nomal">これが標準だよ</div>
<div class="font-weight-bold">これが太字だよ</div>

サンプルコード（CSS別記） の表示

これが標準です
これが太字です
これが標準だよ
これが太字だよ

＜数値指定＞

値（パラメータ）内容
100一番細い（使用しても画面上で表現できない）
200（使用しても画面上で表現できない ）
300（使用しても画面上で表現できない ）
400normalと同等
500（使用しても画面上で表現できない ）
600（使用しても画面上で表現できない ）
700boldと同等
800（使用しても画面上で表現できない ）
900一番太い（使用しても画面上で表現できない）
入力例font-weight: 700;
表示例
これが400
これが700
これが900

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-weight: 400">これが400</div>
<div style="font-weight: 700">これが700</div>
<div style="font-weight: 900">これが900</div>

サンプルコード（CSS別記）

/*CSSコード*/
.font-weight-400 {
  font-weight: 400;
}
.font-weight-700 {
  font-weight: 700;
}
.font-weight-900 {
  font-weight: 900;
}

<!--HTMLコード-->
<div>
  <span class="font-weight-400">これが400です</span><br>
  <span class="font-weight-700">これが700です</span><br>
  <span class="font-weight-900">これが900です</span>
</div>

サンプルコード（CSS別記） の表示

これが400です
これが700です
これが900です

＜相対指定＞

値（パラメータ）内容
lighter（親要素の文字に対して）一段細い
bolder（親要素の文字に対して）一段太い
入力例font-weight: bolder;
表示例強調の太字（strong）だった親要素「これは重要です」に
lighterを適用すると「これは重要です」になる

上記表示例のサンプルコード（HTML埋め込み） 

強調の太字（strong）だった親要素「<strong>これは重要です</strong>」に<br>
lighterを適用すると「<strong><span style="font-weight: lighter">これは重要です</span></strong>」になる

サンプルコード（CSS別記）

/*CSSコード*/
.font-weight-lighter {
  font-weight: lighter;
}

<!--HTMLコード-->
強調の太字（strong）だった親要素「<strong>これは重要なのです</strong>」に<br>
lighterを適用すると「<strong><span class="font-weight-lighter">これは重要なのです</span></strong>」になる
強調の太字（strong）だった親要素「これは重要なのです」に
lighterを適用すると「これは重要なのです」になる

font-size

＜数値+単位指定（相対単位）＞ 0の時のみ単位を省略できます）

値（パラメータ）内容
任意の数値+px1px（ピクセル）は画面上の表示の最小単位
任意の数値+em1emは1文字分の大きさ
入力例font-size: 14px;
表示例
これが14px
これが20px
これが1em
これが2em

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-size: 14px;">これが14px</div>
<div style="font-size: 20px;">これが20px</div>
<div style="font-size: 1em;">これが1em</div>
<div style="font-size: 2em;">これが2em</div>

サンプルコード（CSS別記）

/*CSSコード*/
.font-size-14px {
 font-size: 14px;
}
.font-size-20px {
 font-size: 20px;
}
.font-size-1em {
 font-size: 1em;
}
.font-size-2em {
 font-size: 2em;
}

<!--HTMLコード-->
<div>
  <span class="font-size-14px">これが14pxです</span><br>
  <span class="font-size-20px">これが20pxです</span><br>
  <span class="font-size-1em">これが1emです</span><br>
  <span class="font-size-2em">これが2emです</span>
</div>

サンプルコード（CSS別記） の表示

これが14pxです
これが20pxです
これが1emです
これが2emです

＜数値+単位（絶対単位）＞ 0の時のみ単位を省略できます）

値（パラメータ）内容
任意の数値+mmミリメートル
任意の数値+cmセンチメートル
任意の数値+inインチ（1インチは約2.54cm）（1インチは72pt）
任意の数値+ptポイント（1pt≒0.35mm）（10.5ptは3.70mm）
入力例font-size: 10.5pt;
表示例
これが4.90mm（14pt）
これが1cm
これが0.5in（1.27cm）
これが10.5pt（3.70mm）

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-size: 4.9mm;">これが4.90mm（14pt）</div>
<div style="font-size: 1cm;">これが1cm</div>
<div style="font-size: 0.5in;">これが0.5in（1.27cm）</div>
<div style="font-size: 10.5pt;">これが10.5pt（3.70mm）</div>

サンプルコード（CSS別記）

/*CSSコード*/
.font-size-mm {
  font-size: 4.9mm;
}
.font-size-cm {
  font-size: 1cm;
}
.font-size-in {
  font-size: 0.5in;
}
.font-size-pt {
  font-size: 10.5pt;
}

<!--HTMLコード-->
<div>
  <span class="font-size-mm">これが4.90mm（14pt）です</span><br>
  <span class="font-size-cm">これが1cmです</span><br>
  <span class="font-size-in">これが0.5in（1.27cm）です</span><br>
  <span class="font-size-pt">これが10.5pt（3.70mm）です</span>
</div>

サンプルコード（CSS別記） の表示

これが4.90mm（14pt）です
これが1cmです
これが0.5in（1.27cm）です
これが10.5pt（3.70mm）です

＜絶対指定＞

値（パラメータ）内容
xx-smallx-smallより小さいサイズ
x-smallsmallより小さいサイズ
small小さいサイズ
medium標準サイズ（初期値）
large大きいサイズ
x-largelargeより大きいサイズ
xx-largex-largeより大きいサイズ
入力例font-size: large;
表示例
これがxx-small
これがmedium
これがxx-large

上記表示例のサンプルコード（HTML埋め込み）

<div style="font-size: xx-small;">これがxx-small</div>
<div style="font-size: medium;">これがmedium</div>
<div style="font-size: xx-large;">これがxx-large</div>

サンプルコード（CSS別記）

/*CSSコード*/
.font-size-xxsmall {
  font-size: xx-small;
}
.font-size-medium {
  font-size: medium;
}
.font-size-xxlarge {
  font-size: xx-large;
}


<!--HTMLコード-->
<div>
  <span class="font-size-xxsmall">これがxx-smallです</span><br>
  <span class="font-size-medium">これがmediumです</span><br>
  <span class="font-size-xxlarge">これがxx-largeです</span>
</div>

サンプルコード（CSS別記）の表示

これがxx-smallです
これがmediumです
これがxx-largeです

＜相対指定＞

値（パラメータ）内容
smaller小さめのサイズ
larger大きめのサイズ
入力例font-size: larger;
表示例
小さめのサイズ
大きめのサイズ

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-size: smaller;">小さめのサイズ</div>
<div style="font-size: larger;">大きめのサイズ</div>

サンプルコード（CSS別記）

/*CSSコード*/
.font-size-smaller {
  font-size: smaller;
}
.font-size-larger {
  font-size: larger;
}


<!--HTMLコード-->
<div>
  <span class="font-size-smaller">小さめのサイズです</span><br>
  <span class="font-size-larger">大きめのサイズです</span>
</div>

サンプルコード（CSS別記）の表示

小さめのサイズです
大きめのサイズです

（line-height）

値（パラメータ）内容
normal標準（初期値）

＜数値+単位指定（相対単位）＞ 0の時のみ単位を省略できます）

値（パラメータ）内容
任意の数値+px1px（ピクセル）は画面上の表示の最小単位
任意の数値+em1emは1文字分の大きさ

＜数値+単位（絶対単位）＞ 0の時のみ単位を省略できます）

値（パラメータ）内容
任意の数値+mmミリメートル
任意の数値+cmセンチメートル
任意の数値+inインチ（1インチは約2.54cm）（1インチは72pt）
任意の数値+ptポイント（1pt≒0.35mm）（10.5ptは3.70mm）
入力例line-height: 14px;
表示例
これがnormal
これが20px
これが2em
これが9.8mm(28pt)
これが1cm
これが0.5in（1.27cm）
これが72pt（1in・25.4mm）

上記表示例のサンプルコード（HTML埋め込み）

<div style="line-height: normal;">これがnormal</div>
<div style="line-height: 20px;">これが20px</div>
<div style="line-height: 2em;">これが2em</div>
<div style="line-height: 9.8mm;">これが9.8mm(28pt)</div>
<div style="line-height: 1cm;">これが1cm</div>
<div style="line-height: 0.5in;">これが0.5in（1.27cm）</div>
<div style="line-height: 72pt;">これが72pt（1in・25.4mm）</div>

font-family

＜総称指定＞

値（パラメータ）内容
sans-serifゴシック体系
serif明朝体系
cursive筆記体系
fantasy装飾系
monospace等幅系
入力例font-family: sans-serif;
表示例
ゴシック体系：HelloHELLO
明朝体系：HelloHELLO
筆記体系：HelloHELLO
装飾系：HelloHELLO
等幅系：HelloHELLO

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-family: sans-serif;">ゴシック体系：HelloHELLO</div>
<div style="font-family: serif;">明朝体系：HelloHELLO</div>
<div style="font-family: cursive;">筆記体系：HelloHELLO</div>
<div style="font-family: fantasy;">装飾系：HelloHELLO</div>
<div style="font-family: monospace;">等幅系：HelloHELLO</div>

サンプルコード（CSS別記）

/*CSSコード*/
.font-family-sans-serif {
  font-family: sans-serif;
}
.font-family-serif {
  font-family: serif;
}
.font-family-cursive {
  font-family: cursive;
}
.font-family-fantasy {
  font-family: fantasy;
}
.font-family-monospace {
  font-family: monospace;
}


<!--HTMLコード-->
<div>
  <span class="font-family-sans-serif">ゴシック体系：HelloHELLOです</span><br>
  <span class="font-family-serif">明朝体系：HelloHELLOです</span><br>
  <span class="font-family-cursive">筆記体系：HelloHELLOです</span><br>
  <span class="font-family-fantasy">装飾系：HelloHELLOです</span><br>
  <span class="font-family-monospace">等幅系：HelloHELLOです</span>
</div>

サンプルコード（CSS別記）の表示

ゴシック体系：HelloHELLOです
明朝体系：HelloHELLOです
筆記体系：HelloHELLOです
装飾系：HelloHELLOです
等幅系：HelloHELLOです

＜具体名指定＞

値（パラメータ）内容
MS ゴシックMS ゴシック体
MS PゴシックMS Pゴシック体
MS 明朝MS 明朝体
MS P明朝MS P明朝体
centurycentury体

（値にスペースが含まれる場合は、””または”で囲みます）
（指定したフォントの書体が表示できなかったときのために、次候補を設定しておけます。カンマで区切り複数入力できます。総称指定を最後にすると意図せぬ書体を防止できます）

入力例font-family: “MS ゴシック”,sans-serif;
表示例
ＭＳ ゴシック：ホームページ作成のmorph
ＭＳ Ｐゴシック：ホームページ作成のmorph
ＭＳ 明朝：ホームページ作成のmorph
ＭＳ Ｐ明朝：ホームページ作成のmorph
century：ホームページ作成のmorph

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font-family: 'ＭＳ ゴシック';">ＭＳ ゴシック：ホームページ作成のmorph</div>
<div style="font-family: 'ＭＳ Ｐゴシック';">ＭＳ Ｐゴシック：ホームページ作成のmorph</div>
<div style="font-family: 'ＭＳ 明朝';">ＭＳ 明朝：ホームページ作成のmorph</div>
<div style="font-family: 'ＭＳ Ｐ明朝';">ＭＳ Ｐ明朝：ホームページ作成のmorph</div>
<div style="font-family: century;">century：ホームページ作成のmorph</div>

サンプルコード（CSS別記）

/*CSSコード*/
.font-family-msgo {
  font-family: "ＭＳ ゴシック";
}
.font-family-mspgo {
  font-family: "ＭＳ Ｐゴシック";
}
.font-family-msmi {
  font-family: "ＭＳ 明朝";
}
.font-family-mspmi {
  font-family: "ＭＳ Ｐ明朝";
}
.font-family-century {
  font-family: century;
}


<!--HTMLコード-->
<div>
  <span class="font-family-msgo">ＭＳ ゴシック：ホームページ作成のmorphです</span><br>
  <span class="font-family-mspgo">ＭＳ Ｐゴシック：ホームページ作成のmorphです</span><br>
  <span class="font-family-msmi">ＭＳ 明朝：ホームページ作成のmorphです</span><br>
  <span class="font-family-mspmi">ＭＳ Ｐ明朝：ホームページ作成のmorphです</span><br>
  <span class="font-family-century">century：ホームページ作成のmorphです</span>
</div>

サンプルコード（CSS別記）の表示

ＭＳ ゴシック：ホームページ作成のmorphです
ＭＳ Ｐゴシック：ホームページ作成のmorphです
ＭＳ 明朝：ホームページ作成のmorphです
ＭＳ Ｐ明朝：ホームページ作成のmorphです
century：ホームページ作成のmorphです

font

値（パラメータ）内容
font-styleで使用する値文字のスタイルを定義します。
font-variantで使用する値文字のスモールキャピタルを定義します。
（英文字の小文字部分を大文字の縮小形で表示）
font-weightで使用する値文字の太さを定義します。
font-sizeで使用する値（必須）文字のサイズを定義します。
line-heightで使用する値行の高さを定義します。
font-familyで使用する値（必須）文字の書体を定義します。
入力順1.font-style　2.font-variant　3.font-weight
4.~5.順不同(font-size font-family)
line-heightは/をつけてfont-sizeの後ろに記述
入力例font: italic small-caps bold 20px/150% fantasy;
表示例
ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph

上記表示例のサンプルコード（HTML埋め込み） 

<div style="font: italic  normal  normal 14px 'ＭＳ ゴシック';">ホームページ作成のmorph</div>
<div style="font: italic  small-caps  normal 14px 'ＭＳ ゴシック';">ホームページ作成のmorph</div>
<div style="font: italic  small-caps  bold 14px 'ＭＳ ゴシック';">ホームページ作成のmorph</div>
<div style="font: italic  small-caps  bold 20px 'ＭＳ ゴシック';">ホームページ作成のmorph</div>
<div style="font: italic  small-caps  bold 20px/150% 'ＭＳ ゴシック';">ホームページ作成のmorph</div>
<div style="font: italic  small-caps  bold 20px/150% fantasy;">ホームページ作成のmorph</div>

サンプルコード（CSS別記） 

/*CSSコード*/
.font-1 {
  font: italic  normal  normal 14px 'ＭＳ ゴシック';
}
.font-2 {
  font: italic  small-caps  normal 14px 'ＭＳ ゴシック'
}
.font-3 {
  font: italic  small-caps  bold 14px 'ＭＳ ゴシック'
}
.font-4 {
  font: italic  small-caps  bold 20px 'ＭＳ ゴシック';
}
.font-5 {
  font: italic  small-caps  bold 20px/150% 'ＭＳ ゴシック';
}
.font-6 {
  font: italic  small-caps  bold 20px/150% fantasy;
}

<!--HTMLコード-->
<div>
  <span class="font-1">ホームページ作成のmorph</span><br>
  <span class="font-2">ホームページ作成のmorph</span><br>
  <span class="font-3">ホームページ作成のmorph</span><br>
  <span class="font-4">ホームページ作成のmorph</span><br>
  <span class="font-5">ホームページ作成のmorph</span><br>
  <span class="font-6">ホームページ作成のmorph</span>
</div>

サンプルコード（CSS別記）の表示

ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph
ホームページ作成のmorph
CSSプロパティ一覧に戻る

タイトルとURLをコピーしました