CSS

CSSで文字スタイルを変えるパート1 【フォント・サイズ・太さ】

どうも、つよぽんです!

今回はCSSで文字スタイルを変更する方法について解説します。今回の記事と次回の記事、全部で2部構成で文字スタイルを変更するプロパティを紹介していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSで特定のフォントを指定したい
  • CSSで文字サイズを変更したい
  • CSSで文字の太さを変更したい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSでテキストのスタイルを変更するパート1CSSでテキストのスタイルを変更する方法を学びます。パート1とパート2の2部に分けて解説します。今回はパート1の内容で「font-family」「font-size」「font-weight」の解説となります。...

CSSで文字スタイルを変更する」第1部で話していく内容は次のとおりです。

今回の内容
  1. CSSのfont-familyでフォントスタイルを変更する
  2. CSSのfont-sizeを使って文字サイズを変更する
  3. CSSのfont-weightを使って文字の太さを変更する

第2部の記事は以下のリンクから確認することが出来ます。

あわせて読みたい
CSSで文字スタイルを変えるパート2【行間・配置・装飾】CSSで文字スタイルを変更する方法について解説します。全2部構成で話を進め、今回は第2部となります。第2部ではテキストの「行間」「配置」「装飾」の変更方法について解説します。...

 

CSSのfont-familyでフォントスタイルを変更する

CSSで文字のフォントスタイルを変更するには「font-family」プロパティを使います。

下の画像を確認すると、font-familyプロパティの値に応じて文字のフォントスタイル(=見た目)が変更しているのがわかるかと思います。

CSSのfont-familyを使ってフォントスタイルを変更するサンプルCSSのfont-familyを使ってフォントスタイルを変更するサンプル

上の画像で使っているコードは以下のリンク先からも確認ができます。

font-familyのサンプル

上の画像のサンプルでは、1例として次のようなフォントを使っています。

フォントスタイル例
  • serif
  • sans-serif
  • cursive

他にも利用できるフォントの種類はたくさんあるので、どんな文字スタイルを利用できるか知りたい方はMDNのドキュメントにまとめられている「font-family」を一度確認してみると良いでしょう。

CSSのfont-sizeを使って文字サイズを変更する

CSSで文字のサイズを変更するには「font-size」プロパティを使います。

下の画像を確認すると、font-sizeプロパティの値に応じて文字の文字の大きさが変更しているのがわかるかと思います。

CSSのfont-sizeを使って文字サイズを変更するサンプルCSSのfont-sizeを使って文字サイズを変更するサンプル

上の画像で使っているコードは以下のリンク先からも確認ができます。

font-sizeのサンプル

上の画像では、文字サイズの大きさを表す単位として「px」「%」「em」「rem」を利用しています。

それぞれの単位の意味は次のとおりです。

各単位の意味
  • px : どんなブラウザ環境でも同じ大きさとなるように絶対値で指定できる
  • % : 親要素の文字サイズからの相対値で指定できる(例: 親要素の文字サイズが10pxの場合、150%を指定すると15pxとなる)
  • em : 親要素の文字サイズからの相対値で指定できる(例: 親要素の文字サイズが10pxの場合、1.5emを指定すると15pxとなる)
  • rem : HTMLのルートである「html」要素で指定された文字サイズからの相対値を指定できる(例: html要素の文字サイズが10pxの場合、1.5remを指定すると15pxとなる)

他にも利用できる単位の種類はたくさんあるので、どんな単位を利用できるか知りたい方はMDNのドキュメントにまとめられている「font-size」を一度確認してみると良いでしょう。

CSSのfont-weightを使って文字の太さを変更する

CSSで文字の太さを変更するには「font-weight」プロパティを使います。

下の画像を確認すると、font-weightプロパティの値に応じて文字の文字の太さが変更しているのがわかるかと思います。

CSSのfont-weightを使って文字の太さを変更するサンプルCSSのfont-weightを使って文字の太さを変更するサンプル

上の画像で使っているコードは以下のリンク先からも確認ができます。

font-weightのサンプル

上の画像のサンプルではfont-weightプロパティに「normal」「bold」「800」をセットしていますが、大きく分けて2種類の方法でセットできます。

2種類のセット方法
  1. 「normal」「bold」のように英単語を使ったセット方法
  2. 「100」「800」のように数値を使ったセット方法

利用できる英単語の種類数値の範囲があるので、どんな値が利用できるか知りたい方はMDNのドキュメントにまとめられている「font-weight」を一度確認してみると良いでしょう。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. CSSで文字のフォントスタイルを変更する場合は「font-family」プロパティを使う
  2. CSSで文字サイズを変更する場合は「font-size」プロパティを使う
  3. CSSで文字の太さを変更する場合は「font-weight」プロパティを使う

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSでテキストのスタイルを変更するパート1CSSでテキストのスタイルを変更する方法を学びます。パート1とパート2の2部に分けて解説します。今回はパート1の内容で「font-family」「font-size」「font-weight」の解説となります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です