Loading...

第4回 フォント関係のプロパティ - CSS Level 1 - ブロガー向けCSS入門

f:id:nasust:20161212143136j:plain


この記事は以下のブロガー対象としています。

  • ブログをカスタマイズしたい
  • 全くCSSの知識が無い

こんにちはnasustです。
今回はCSS Level 1の範囲内のプロパティについて解説します。

font-family

font-familyの値は2種類あります。

  • family-name ⋯ フォント名を指定する
  • generic-family ⋯ フォントの種類を指定する

font-familyはOSとバージョンによって値が違います。
その為、ベストな指定方法は毎年変わります。
以下の記事を参考に指定した方が無難です。

2020年まで使えるfont-familyおすすめゴシック体 - Qiita

family-name

※スペースが含まれる場合"で囲みます。

generic-family

以下のタイプを指定できます。

font-style

  • normal ⋯ 通常
  • italic ⋯ イタリック体
  • oblique ⋯ 斜体

html 例:


<p style="font-style:italic;">あいうえお</p>
<p style="font-style:oblique;">あいうえお</p>

表示例:


あいうえお

あいうえお


font-variant

  • normal ⋯ 通常
  • small-caps ⋯ スモールキャップで表示します。

html 例:


<span style="font-variant:small-caps;">abcABCDEFG</span>

表示例:


abcABCDEFG


font-weight

  • normal ⋯ 標準の太さ
  • bold ⋯ 太文字
  • bolder ⋯ 相対的に太くします
  • lighter ⋯ 相対的に細くします
  • 100
  • 200
  • 300
  • 400 ⋯ normalと同じ
  • 500
  • 600
  • 700 ⋯ blodと同じ
  • 800
  • 900

<span style="font-weight:normal;">normal あいうえお ABCFEFG</span><br/>
<span style="font-weight:blod;">bold あいうえお ABCFEFG</span><br/>
<span style="font-weight:bolder;">bolder あいうえお ABCFEFG</span><br/>
<span style="font-weight:lighter;">lighter あいうえお ABCFEFG</span><br/>
<span style="font-weight:100;">100 あいうえお ABCFEFG</span><br/>
<span style="font-weight:200;">200 あいうえお ABCFEFG</span><br/>
<span style="font-weight:300;">300 あいうえお ABCFEFG</span><br/>
<span style="font-weight:400;">400 あいうえお ABCFEFG</span><br/>
<span style="font-weight:500;">500 あいうえお ABCFEFG</span><br/>
<span style="font-weight:600;">600 あいうえお ABCFEFG</span><br/>
<span style="font-weight:700;">700 あいうえお ABCFEFG</span><br/>
<span style="font-weight:800;">800 あいうえお ABCFEFG</span><br/>
<span style="font-weight:900;">900 あいうえお ABCFEFG</span><br/>

表示例:


normal あいうえお ABCFEFG
bold あいうえお ABCFEFG
bolder あいうえお ABCFEFG
lighter あいうえお ABCFEFG
100 あいうえお ABCFEFG
200 あいうえお ABCFEFG
300 あいうえお ABCFEFG
400 あいうえお ABCFEFG
500 あいうえお ABCFEFG
600 あいうえお ABCFEFG
700 あいうえお ABCFEFG
800 あいうえお ABCFEFG
900 あいうえお ABCFEFG


font-size

  • 数値
    • px ⋯ pxはピクセル単位で絶対的な大きさで指定します。
    • em ⋯ emは通常のフォントの高さを1として相対的な大きさを指定します。
    • ex ⋯ xの高さを1として相太的な大きさを指定します。
  • % ⋯ 100%を通常の大きさとして、相対的な大きさを指定します。
  • キーワード
    • 絶対的なサイズ
      • xx-small
      • x-small
      • small
      • mediam
      • large
      • x-large
      • xx-large
    • 相対的なサイズ
      • larger
      • smaller

※注意: emとexは親要素のフォントの大きさの影響を受けます。親要素が2emで小要素1emである場合、小要素の文字は親要素と同じ2emで表示されます。

html 例:


<span style="font-size:1em;">あいうえお ABCDEFG</span><br>
<span style="font-size:1ex;">あいうえお ABCDEFG</span><br>
<span style="font-size:12px;">あいうえお ABCDEFG</span><br>
<span style="font-size:2em;">あいうえお ABCDEFG</span><br>
<span style="font-size:2ex;">あいうえお ABCDEFG</span><br>
<span style="font-size:xx-small;">あいうえお ABCDEFG</span><br>
<span style="font-size:x-small;">あいうえお ABCDEFG</span><br>
<span style="font-size:small;">あいうえお ABCDEFG</span><br>
<span style="font-size:medial;">あいうえお ABCDEFG</span><br>
<span style="font-size:large;">あいうえお ABCDEFG</span><br>
<span style="font-size:x-large;">あいうえお ABCDEFG</span><br>
<span style="font-size:xx-large;">あいうえお ABCDEFG</span><br>
<span style="font-size:larger;">あいうえお ABCDEFG</span><br>
<span style="font-size:smaller;">あいうえお ABCDEFG</span><br>

表示例:


font-size:1em; あいうえお ABCDEFG
font-size:1ex; あいうえお ABCDEFG
font-size:12px; あいうえお ABCDEFG
font-size:2em; あいうえお ABCDEFG
font-size:2ex; あいうえお ABCDEFG
font-size:xx-small; あいうえお ABCDEFG
font-size:x-small; あいうえお ABCDEFG
font-size:small; あいうえお ABCDEFG
font-size:medial; あいうえお ABCDEFG
font-size:large; あいうえお ABCDEFG
font-size:x-large; あいうえお ABCDEFG
font-size:xx-large; あいうえお ABCDEFG
font-size:larger; あいうえお ABCDEFG
font-size:smaller; あいうえお ABCDEFG


font

フォントのスタイルを一括で設定します。

書式: font: [font-style font-variant font-weight]? font-size font-family

例:

font: bold italic large 2em serif;

color

フォントの色を指定します。
指定方法は以下の通りです。

  • カラー名
    • black
    • gray
    • silver
    • white
    • blue
    • navy
    • teal
    • green
    • lime
    • aqua
    • yellow
    • red
    • fuchsia
    • olive
    • purple
    • maroon
  • RGB16進数 ⋯ #RRGGBB 又は #RGB
  • RGB10進数 ⋯ rgb( r , g , b )

html 例:


<span style="color:red;">color:red; あいうえお</span><br>
<span style="color:#FF0000;">color:#FF0000;あいうえお</span><br>
<span style="color:rgb(255,0,0);">color:#rgb(255,0,0);あいうえお</span><br>

表示例:


color:red; あいうえお
color:#FF0000;あいうえお
color:#rgb(255,0,0);あいうえお



次回

第5回 カラーと背景のプロパティ CSS level 1 - ブロガー向けCSS入門 - nasust life blog

ブロガー向けWEBデザイン入門に戻る