【HTML】フォントの調整方法を解説!Webフォントでおしゃれにしよう
  • facebookページ
  • twitterページ
  • 2020.05.01

    【HTML】フォントの調整方法を解説!Webフォントでおしゃれにしよう

    フォントの調整方法

    HTMLでフォントの種類や大きさ、色を変える際は、fontタグを使って調整できます。

    もしくはCSSで指定することも可能です。

    文字の色を指定していない場合は、黒がデフォルトになります。

    ただし、HTML5ではfontタグは廃止される予定です。

    フォントの種類一覧

    フォントは次のように「大まかな種類」か「フォント名」で指定することが可能です。

    【大まかな種類】

    • sans-serif(ゴシック体系)
    • serif(明朝体系)
    • cursive(筆記体系)
    • fantasy(装飾系)
    • monospace(等幅系)

    【フォント名】

    • MS ゴシック
    • MS Pゴシック
    • MS 明朝
    • MS P明朝
    • Arial
    • Century
    • Century Gothic
    • Comic Sans MS
    • Courier
    • Courier New
    • Impact
    • Symbol
    • Times New Roman
    • Verdana

    フォント名は上記以外にもありますが、ここでは主要なものを紹介しています。

    大まかな種類でフォントを指定する場合は、CSSのfont-familyプロパティを使います。

    フォント名で指定する場合は、fontタグのface属性かCSSのfont-familyプロパティが使えるので覚えておきましょう。

    フォントの指定方法

    フォントの指定方法は前述したように、HTMLのfontタグを使うかCSSで指定可能です。

    ここではもう少し詳しく、フォントの指定方法を解説します。

    HTMLのfontタグでフォントを指定

    fontタグを使うには、フォントを調整したい文字をfontタグで囲めばOKです。

    フォントの調整をします

    fontタグでは、次の属性が指定可能です。

    • size:フォントのサイズを指定
    • color:フォントの色を指定
    • face:フォントの種類を指定

    それぞれの指定方法をみていきましょう。

    「size」でフォントのサイズを指定

    フォントサイズの指定は次のように記述します。

    値には1〜7の絶対値か、-2〜+2の相対値で指定可能です。

    サンプルコードでフォントサイズを比較してみましょう。

    ■表示結果

    「size」でフォントのサイズを指定

    デフォルトサイズは3になります。

    「color」でフォントの色を指定

    フォントの色の指定は次のように記述します。

    色は16進数かカラーネーム(red、orangeなど)で指定可能です。

    「face」でフォントの種類を指定

    フォントの種類の指定は次のように記述します。

    CSSでフォントを指定

    CSSでフォントを調整したい場合は、次のプロパティを指定します。

    • font-size:フォントのサイズを指定
    • font-color:フォントの色を指定
    • font-family:フォントの種類を指定

    それぞれの指定方法をみていきましょう。

    「font-size」でフォントのサイズを指定

    フォントサイズの指定は次のように記述します。

    フォントサイズは、絶対値のpx、ptや、相対値のrem、emなどで指定可能です。

    「font-color」でフォントの色を指定

    フォントの色の指定は次のように記述します。

    HTMLでの指定同様に、16進数(カラーコード)とカラーネームで指定できます。

    他にもrgb、rbgaでも指定可能です。

    詳しくは次の記事でも解説していますので、参考にしてみてください。

    【関連記事】

    ▶︎【HTML】文字色を変える。font colorについて解説してみる。

    「font-family」でフォントの種類を指定

    フォントの種類の指定は次のように記述します。

    フォント名にスペースが含まれている場合は、ダブルクォーテーション( ” )かシングルクォーテーション( ‘ )で囲みます。

    HTML同様に、複数のフォントを指定する場合はカンマ(,)で区切りましょう。

    フォントを太字にする

    フォントを太字にするには、次の3つの方法があります。

    1.<b>タグを使う
    2.<strong>タグを使う
    3.font-weightプロパティを使う

    それぞれ解説しますね。

    1.<b>タグを使う

    <b>タグは次のように記述して使います。

    <b>タグのbとは「Bold(太字)」の略です。

    見た目を装飾して太字にしたい場合は、<b>タグを使うとよいでしょう。

    2.<strong>タグを使う

    <strong>タグは次のように記述して使います。

    strongは「強調」という意味です。

    見た目だけでなく文字の意味も強調するという意味合いがあるので、重要な意味を持たせたい文字の場合は<strong>タグを使いましょう。

    3.font-weightプロパティを使う

    font-weightプロパティは次のように記述して使います。

    値は「normal(初期値)」「bold」もしくは100(細い)〜900(太い)で指定可能です。

    3.font-weightプロパティを使う

    フォント位置を変える

    フォント位置を変えるには、text-alignプロパティを使います。

    値には「left」「center」「right」が指定可能です。デフォルト値はleftになっています。

    一部だけフォント変更するには?

    一部だけフォント変更することはできますか?

    はい、可能です。フォントを変えたい要素ごとにフォントを指定してみましょう

    一部だけフォントを変えたい場合は、次の2通りの方法で変更できます。

    1. 変えたい要素にcalssを設定し変更する
    2. 変えたい要素にタグをつけ、styleで変更する

    1.変えたい要素にcalssを設定し変更する

    classを設定してフォントを変更する場合は、次のような記述になります。

    複数の箇所で細々とフォントを変えたい場合は、classを設定すると管理しやすくなります。

    2.変えたい要素にタグをつけ、styleで変更する

    今度は、タグをつけ、styleを指定して変更してみましょう。

    classを設定してフォントを変更する場合は、次のような記述になります。

    フォントを変更する部分がひとつだけなど、限られている場合はこのように指定してもよいでしょう。

    フォントをおしゃれにアレンジ

    HTMLでは、Webフォントを指定することもできます。

    Webフォントとは、インターネットを参照して表示できるフォントのことです。

    気に入ったフォントがあれば、読み込ませるだけで表示できます。

    ただし、外部データを読み込むので表示が遅くなる場合もあるので注意が必要です。

    英語フォントは「Google Fonts」から、日本語フォントは「Google Fonts 日本語早期アクセス」から使えます。

    サンプルコードで読み込み方法やフォントを確認してみましょう。

    <head>内に読み込ませたいフォントのリンクを設定します。

    後はCSSにfont-familyを指定すればOKです。

    ■表示結果

    フォントをおしゃれにアレンジ

    まとめ

    HTMLのフォントについて解説しました。

    フォントはタグでも指定可能ですが、HTML5では廃止予定にあるためCSSで設定するのがおすすめです。

    Google Fontsを利用することで、おしゃれなフォントの指定もできますので、ぜひ好みにあったフォントでWebサイト制作をしてみてください!



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE