Webサイト運営において、HTMLで文字サイズに変化を与えることは、伝えたい内容をユーザーに伝えるために重要な役割を担っています。
そこで本記事では、HTMLで文字サイズを変更する方法を解説しています。また、文字サイズの変更方法以外にも、知っておきたい文字操作の方法についても紹介しています。これからHTMLを学びたい方は、ぜひご覧ください。
目次
HTMLで文字サイズを変更する方法
HTMLでの文字サイズ変更は、スタイルシート（CSS）で行うのが一般的です。以前は、HTMLタグを使用した文字サイズ変更もされていましたが、HTML5で廃止となりました。
CSSを使用した文字サイズの変更方法を学び、ユーザビリティの高いWebサイト制作を目指しましょう。
スタイルシート（CSS）で文字サイズを変更する
Webページに表示される文字の大きさを変更するには、スタイルシート（CSS）の使用が現在では一般的です。
CSSで文字サイズを指定するにはfont-sizeプロパティを使用します。書き方は、次の通りです。
See the Pen
mdEWqoG by sho-go (@sho-go)
on CodePen.
上記のようにclass別にfont-sizeプロパティでピクセルサイズを指定することで、文字サイズにメリハリをつけることができます。
タイトル部分の文字サイズは大きくして、フッター部分やコピーライトを小さくするなど、ユーザーに伝えたい内容が伝わりやすくなるようなサイト構成にすると良いでしょう。
なお、CSSでの文字サイズの指定方法には次の4種類があります。
- px（ピクセルサイズを指定する）
- %（他要素を元に相対したサイズ指定をする）
- em（他要素を元に相対したサイズ指定をする）
- rem（ルート要素を元に相対したサイズ指定をする）
px表記は絶対値を使った指定方法で、%とemの違いはパーセントで書くかどうかの違い（250%なら2.5em）です。また、emとremの違いは参照する要素が違います。各Webサイトで使いやすい方法で文字サイズを指定しましょう。
【廃止】fontタグで文字サイズを変更する
文字サイズを変更する方法として、以前はfontタグを使う方法もありました。しかし、fontタグはHTML5で廃止となりました。
文字サイズの変更は、スタイルシートを使って行いましょう。
【廃止】bigタグとsmallタグで文字サイズを変更する
文字サイズを変更する方法として使われていたbigタグとsmallタグも、fontタグ同様HTML5で廃止となりました。
文字サイズの変更は、スタイルシートを使って行いましょう。
HTMLで文字操作する方法
HTMLでは、文字サイズ以外にも様々なフォント操作をできます。こちらも以前はfontタグを使うのが主流でしたが、HTML5で廃止となったためスタイルシート（CSS）を使って指定しましょう。
CSSを使った代表的な文字操作の方法について解説するので、ぜひ参考にしてください。
文字カラーを指定する
文字色を指定するには、colorプロパティを使用します。書き方は、次の通りです。
See the Pen
bGeqYJy by sho-go (@sho-go)
on CodePen.
値にカラーネームかカラーコードを指定することで、文字色を変更することができます。
例えば、商品の通常価格を黒文字で表記して、割引価格を赤文字にするなど、色から受ける印象も考慮して文字カラーを指定するとより効果的です。
フォントの種類を指定する
フォントの種類を指定するには、font-familyプロパティを使用します。書き方は、次の通りです。
See the Pen
pobedXJ by sho-go (@sho-go)
on CodePen.
フォントの種類の値と指定した「serif」は明朝体、「sans-serif」はゴシック体のことなので、フォントを指定した文字列がそれぞれの書体で表示されます。
使い方として一般的なのは、他サイトから引用した文言や会社の企業理念など、周りの文章とは一線を画したいときに使用します。フォントによって与える印象は変わるので、サイトのメインターゲットに合ったフォントを使うのも有効です。例えば、子供向けのサイトや若い女性のブログサイトであれば、可愛い文字のフォントを使うことでサイト全体の雰囲気も良くなるでしょう。
文字を太字にする
文字の太さを指定するには、font-weightプロパティを使用します。書き方は、次の通りです。
See the Pen
bGeqYPP by sho-go (@sho-go)
on CodePen.
一般的に文字を太字にしたい場合、font-weightプロパティの値に「bold」を指定します。
font-weightプロパティの値には、上記で紹介した方法以外にも直接文字の太さを指定する方法もあります。「100、200、300、400、500、600、700、800、900」の9段階の中から指定でき、400が標準の太さです。boldが700を指定した場合と同じで、数値が大きいほど太字になります。
フォントによって対応していない数値もあり、文字の太さが変更されない場合もあります。font-weightプロパティを使用するときは、文字の太さが変更されているかサイトの表示を確認するようにしましょう。
まとめ
いかがでしたでしょうか？
HTMLでフォントサイズを変更するのは簡単です。フォントサイズを大きくし、目立たせることは、読者に伝えたいことを伝えやすくする効果があります。
また、フォントカラーやフォントの種類、太字などを活用して、周りの文章と差別化することにも挑戦しましょう。
サイトが読者に伝えたいことを伝えやすく表現して、よりユーザビリティの高いサイトにしましょう。
