検索

キーワード


【HTML/CSS】フォント種類・フォントサイズ指定について

  • 公開日:2020-09-27 22:00:35
  • 最終更新日:2020-11-17 17:44:22
【HTML/CSS】フォント種類・フォントサイズ指定について

こんにちは。駆け出しエンジニアの竹前です。

ここでは、フォント種類・サイズ指定について説明します。

HTMLやCSSについて勉強している方の参考になれば幸いです。


font要素とは

HTMLだけでフォントの種類やサイズを変更するには、font要素を使用します。

フォントサイズを変更するには、font要素にsize属性を指定します。

size属性の値は1~7の数値(デフォルト値は3)、または現在のフォントサイズに対して「+1」「-2」のように相対値を指定することもできます。

また、フォントの種類を変更するには、font要素にface属性を指定します。

face属性の値に、変更したいフォント名を指定します。フォントは優先度順にカンマ区切りで複数指定することができます。

<font size="1">フォントサイズ1</font><br>
<font size="3">フォントサイズ3(デフォルト)</font><br>
<font size="5" face="MS 明朝">フォントサイズ5,MS 明朝</font><br>
<font size="7" face="MS ゴシック,MS Pゴシック">フォントサイズ7,MS ゴシック</font>


フォントサイズの変更例


font要素の注意点

このようにfont要素を使ってフォントの種類・サイズを変更することができますが、HTMLは段落、改行などの文書構造を定義するものです。

また、HTML5ではfont要素は廃止されています

そのため、フォントの種類やサイズの変更などのページの装飾を行う場合はCSSを使用します。


CSSでフォントの種類を変更する方法

CSSでフォントの種類を変更する場合、font-familyプロパティを設定します。

font-familyの値は、フォント名で指定する方法とキーワードで指定する方法があります。

キーワードで指定する場合は、以下の値を指定することができます。

  • sans-serif:ゴシック体系
  • serif:明朝体系
  • cursive:草書体・筆記体などの手書き文字
  • fantasy:装飾系
  • monospace:等幅系

フォントは優先度順にカンマ区切りで複数指定することができます。

複数指定することによって、指定したフォントが各ブラウザで使えない場合の対応をすることができます。


h1 {
	font-family: serif;
}
p {
	font-family: "MS ゴシック", "MS Pゴシック", sans-serif;
}


font-familyプロパティを使ってフォントを変更した例


CSSでフォントサイズを変更する方法

CSSでフォントサイズを変更する場合、font-sizeプロパティを設定します。

値の指定方法は複数あります。


1. 数値で指定

数値で指定する場合、代表的な単位は以下のようなものがあります。

  • px:px(ピクセル)を基準に指定する方法です。
  • %:親要素に指定されたフォントサイズに対する割合を指定する方法です。
  • em:%と同様、親要素に指定されたフォントサイズに対する割合を指定する方法です。1emで100%です。
  • rem:html要素に指定されたフォントサイズに対する割合を指定する方法です。1remで100%です。


2. キーワードで指定

フォントサイズを表すキーワードで指定します。

キーワードは以下の7段階で指定することができます。

  • xx-large (最も大きい)
  • x-large
  • large
  • medium (標準サイズ)
  • small
  • x-small
  • xx-small (最も小さい)

また、親要素を基準としたキーワードを指定することもできます。

  • larger:親要素に指定されたフォントサイズより1段階大きくなります。
  • smaller:親要素に指定されたフォントサイズより1段階小さくなります。
.test1 { font-size: 15px; }
.test2 { font-size: 0.8rem; }
.test3 { font-size: xx-large; }
.test4 { font-size: medium; }
.test5 { font-size: xx-small; }
.test6 { font-size: larger; }
.test7 { font-size: smaller; }


CSSでフォントサイズを変更した例


【著者】

たけまえ

駆け出しエンジニアの竹前です。 私自身が勉強したことをもとに、難しい内容はできるだけ簡単になるように読みやすく、分かりやすい記事を心がけています。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ