【初心者向け】HTMLで文字サイズ変更に挑戦しよう!【複数パターン有り】
  • facebookページ
  • twitterページ
  • 2020.06.26

    【初心者向け】HTMLで文字サイズ変更に挑戦しよう!【複数パターン有り】

    HTMLで文字サイズを変更する方法はいくつか存在します。

    HTML5からはCSSプロパティで文字サイズを変更する方法が推奨されていますが、従来の方法も含めて一度おさらいしておきましょう。

    HTMLのfontタグで文字サイズを変更する


    まずはHTML4までで主流に使われていたfontタグでの文字サイズ変更について、ご紹介していきたいと思います。

    基本的な記述方法

    fontタグには「size」属性が設定可能で、1~7までの数値を指定することで文字サイズを変更可能です。

    サンプルコード

    実際にfontタグにsize属性を指定すると、それぞれの値で下記のように表示されます。

    index.html

    Webブラウザに表示した結果が下記の通りです。

    HTMLのbig・smallタグで文字サイズを変更する


    HTMLでは、bigタグとsmallタグを利用することでも文字サイズの変更が可能です。

    基本的な記述方法

    bitタグ・smallタグ両方とも記述方法は同じでタグ内部に記述されたテキストがbitタグではひと回り大きく、smallタグではひと回り小さく表示されます。

    サンプルコード

    では実際にbigタグとsmallタグを使用したサンプルコードを指定して動作を確認してみましょう。

    index.html

    Webブラウザに表示した結果が下記の通りです。

    複数指定により文字サイズの変更も可能

    ちなみに上述したbigタグとsmallタグは複数指定することにより、fontタグのsize属性と同じく文字サイズを指定することも可能です。

    index.html

    Webブラウザに表示した結果が下記の通りです。

    HTML5からの推奨CSSプロパティで文字サイズを変更する


    続いてHTML5からの推奨であるCSSプロパティを使用した文字サイズ変更をご紹介していきます。

    文字サイズの変更には「font-size」プロパティを利用することが可能です。

    基本的な記述方法

    font-sizeプロパティの基本的な記述方法は下記の通りです。

    サイズ指定の方法にはいくつかの単位が設定可能

    font-sizeプロパティに指定するサイズには複数の単位が指定可能です。

    よく利用される単位を1つずつ確認していきましょう。

    パーセント(%)

    パーセント指定では親要素のサイズに対して、何パーセントの割合を指定するかを設定します。

    ポテパンダの一言メモ

    画面サイズに対してではなく、親要素に対するパーセンテージであることに注意

    ピクセル(px)

    一般的にブラウザで文字サイズを指定しなかった場合には16pxのテキストが表示されます。

    ピクセルは環境に依存しない単位のため、ブラウザの設定により文字の大きさが変更されるような影響を受けません。

    エム(em)

    基本的にはパーセントと同じ考え方です。

    例えばパーセントで50%の場合、エム(em)指定では0.5emとなり、200%では2emのように記述します。

    サンプルコード

    では実際にfont-sizeプロパティに対して、各単位を指定したテキストの表示内容を確認してみたいと思います。

    index.html

    style.css

    Webブラウザに表示した結果が下記の通りです。

    ポテパンダの一言メモ

    2行目と3行目のテキストには同じfont-size:80%を指定していますが、文字サイズが異なることをご確認頂けます。
    2行目は親要素の指定なし=16px、3行目はdivタグに指定した32pxから計算して80%の文字サイズとなるため、このような違いが生まれます。

    さいごに:HTMLの文字サイズ変更はCSSで実装する基本を忘れずに


    本記事では、HTMLの文字サイズを変更する方法についてご紹介してきました。

    いくつかのパターンをご紹介しましたが、HTML5からはデザインに関する部分は外部CSSファイルに切り分けて記述する方法が推奨されています。

    これからプログラムを作成する方は、基本的にはCSSのfont-sizeプロパティを利用して文字サイズの変更を行うようにしましょう。



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

    この記事をシェア

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









    ABOUT US

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

    READ MORE