ヨスのCSS講座

【CSS講座】STEP4: 文字の種類は「font-family」で変更しよう!

ではCSSを使って、文字の種類を変更する方法を紹介します。

こちらの例文を見てください。

わたしはハンバーグが好きです。

文字の種類の変え方

  1. 以前のSTEPでやったように、上の文字にある「ハンバーグが好き」の上でメニュー「検証」を選択します。

  2. 出てきたウィンドウにあるCSSの「font-family」で文字の種類を変えます。

    
    .ex span {
    font-size: 20px;
    color: red;
    font-weight: bold;
    font-family: "MS ゴシック",sans-serif;
    }
    

    「"MS ゴシック",sans-serif」「"MS 明朝",serif」にしてみましょう。文字が「明朝体」になります。

    以下も試してみてください。

    ゴシック体 "MS ゴシック",sans-serif
    明朝体 "MS 明朝",serif
    ヒラギノ角ゴ Pro "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"
    メイリオ "メイリオ", Meiryo
    游ゴシック "游ゴシック" , "Yu Gothic"

    このフォントはあくまでPCに入っているフォントを読み込みます。なので、そのPCに指定したフォントがなければ初期状態のままです。以下をご参考に。

    • 「メイリオ」はWindows Vista以降から
    • 「ヒラギノ角ゴ Pro」はMac OS X以降から
    • 「游ゴシック」は、Windows8.1以降、MacOS10.9以降から

ご注意ください!

「font-family」はむやみやたらと変えるのはオススメしません。あくまでやり方を知っておくだけで大丈夫です。

大抵の場合、以下のように一箇所(body { } )で全フォントの指定を1回だけやります。

body { font-family : "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif ; }

※たくさんのフォントが連なっているのは、優先順位が高い順です。もし一番前のフォントがPCに入っていない場合は、次に記述されているフォントを読み込みます。

【STEP5】文字の間隔を変える

← 前のページ

CSSの基本はこちらです

CSSの基本についてはこちらの記事にまとめています。