CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで文字を太字にする方法：font-weightプロパティの使い方を徹底解説

CSSでテキストを太字にするには、font-weightプロパティを使用します。font-weightはフォントの「太さ」を決定するプロパティで、キーワードまたは数値を使って、テキストをどの程度太く表示するかを指定できます。

Webサイトをレイアウトする際、特定の要素に注目させたい場面はよくあります。その最も基本的な方法のひとつが、強調したいテキストのfont-weightを上げることです。これは、いわゆる「文字を太くする」処理にあたります。

この記事では、font-weightプロパティの基本から設定方法、指定できるさまざまな値まで、具体例とともに詳しく解説します。

CSS font-weightプロパティとは

font-weightプロパティは、画面上に表示されるテキストの太さを設定します。キーワードまたは数値のどちらかを使って、CSSに対してテキストの太さを指示できます。

font-weightプロパティの構文は以下のとおりです。

font-weight: weightOfFont;

weightOfFontの部分には、スタイルを適用する要素に設定したいフォントの太さを表す値を記述します。font-weightプロパティには複数の種類の値を指定でき、要素ごとに異なる太さを柔軟に設定できます。

font-weightの数値スケール

フォントファミリーには、100〜1000の太さスケールがあると考えてください。数値が大きいほど、フォントは太くなります。

ただし、使用するフォントファミリーによっては、スケール全体が用意されていない場合もあります。事前に使用したいフォントの仕様を調べておけば、サイト上で意図した通りの細さ・太さで表示されることを確認できます。

以下のコードは、人気の高いフォント「Arial」について、数値とキーワードの両方を使って、どの程度細く・太くできるかを示したものです。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>font-weightサンプル</title>
   <style>
     body {
       font-family: 'Arial';
       font-size: 3rem;
     }
 
     span {
       font-size: 1.5rem;
     }
 
     p:nth-child(1) {
       font-weight: normal;
     }
     p:nth-child(2) {
       font-weight: bold;
     }
     p:nth-child(3) span {
       font-weight: bolder;
     }
     p:nth-child(4) span {
       font-weight: lighter;
     }
     p:nth-child(5) {
       font-weight: 100;
     }
     p:nth-child(6) {
       font-weight: 200;
     }
     p:nth-child(7) {
       font-weight: 300;
     }
     p:nth-child(8) {
       font-weight: 400;
     }
     p:nth-child(9) {
       font-weight: 500;
     }
     p:nth-child(10) {
       font-weight: 600;
     }
     p:nth-child(11) {
       font-weight: 700;
     }
     p:nth-child(12) {
       font-weight: 800;
     }
     p:nth-child(13) {
       font-weight: 900;
     }
   </style>
 </head>
 <body>
   <p>Hello World! <span>-- Normal</span></p>
   <p>Hello World! <span>-- Bold</span></p>
   <p>Hello World!
     <span>-- Bolder
     <br>
     -- 子要素は親要素より太くなる
     </span></p>
   <p>Hello World! <span>-- Lighter
     <br>
     -- 子要素は親要素より細くなる
     </span>
   </p>
   <p>Hello World! <span>-- 100</span></p>
   <p>Hello World! <span>-- 200</span></p>
   <p>Hello World! <span>-- 300</span></p>
   <p>Hello World! <span>-- 400 'normal'</span></p>
   <p>Hello World! <span>-- 500</span></p>
   <p>Hello World! <span>-- 600</span></p>
   <p>Hello World! <span>-- 700 'bold'</span></p>
   <p>Hello World! <span>-- 800</span></p>
   <p>Hello World! <span>-- 900</span></p>
 </body>
</html>

bolderとlighterは実際には何を意味するのか

ここで特に注意すべき点は、bolderとlighterが文字通り「より太い」「より細い」を意味するわけではないということです。「bolder」は「boldよりもさらに太い」という意味ではありません。

この文脈でのbolderとlighterは、親要素との相対的な関係における太さを意味します。子要素にbolderを指定すると、親要素より1段階相対的に太いウェイトになり、lighterの場合は逆に1段階細いウェイトになります。

相対的なfont-weightと実際のfont-weightの対応は次のとおりです。

相対的なfont-weight実際のfont-weight
thin100
normal400
bold700
heavy900

この表をもとに、ブラウザは子要素を親要素より1段階太く（または細く）表示します。たとえば、親要素のfont-weightが400である場合、子要素にfont-weight: bolder;を指定すると、子要素のfont-weightは700になります。

これは、子要素が親要素より1段階相対的に太いウェイトになるためです。なお、親要素がすでに最も太い（または最も細い）ウェイトに達している場合は、これらの相対値を指定しても何も変化しません。

CSS font-weightの実践例

ここで、地元の切手収集愛好会「シアトル・スタンプ・クラブ」のWebサイトをデザインすると仮定しましょう。愛好会から、「Aboutページの『私たちについて』という見出しを太字にしてほしい」という依頼を受けました。これにより、訪問者の注意を見出しに引きつけることができます。

また、クラブの歴史を紹介する文章ブロックも追加してほしいとのことです。この文章は通常のfont-weightで表示しつつ、特に注目させたいフレーズだけを太字にします。

このような文章ブロックは、以下のコードで作成できます。

<html>

<p>2009年に設立されたシアトル・スタンプ・クラブは、切手収集の奨励と普及を目指すコミュニティです。クラブは<span>初心者から熟練者まで誰でも歓迎</span>しており、毎月のミーティングでは、メンバー同士が切手を見せ合ったり、最新ニュースを語り合ったり、共通の趣味を通じて交流を深めたりしています。現在、クラブには<span>250人のメンバー</span>がいます。</p>

<style>

span {
	font-weight: bolder;
}

HTMLファイルでは、<p>タグで囲まれた段落を定義し、CSSで太字にしたいフレーズを<span>タグで囲んでいます。

続いてCSSファイルでは、すべての<span>タグのfont-weightをbolderに設定するスタイルルールを定義しました。これにより、<span>タグで囲まれたテキストは、親要素よりも太く表示されます。

コードを実行すると、段落は通常のfont-weightで表示され、<span>タグで囲まれた部分だけが太字になります。この例では、「初心者から熟練者まで誰でも歓迎」と「250人のメンバー」というフレーズが<span>タグで囲まれています。

可変フォント（Variable Fonts）を使った太字指定

CSS Fontsの最新仕様では、可変フォント（variable fonts）と呼ばれる新しいフォントが利用可能になりました。可変フォントは、1〜1000の間の任意の数値をfont-weightとして受け取れるフォントです。ブラウザ対応が完全に整ったのは2020年5月頃と比較的新しいため、まだ馴染みのない方も多いかもしれません。可変フォントについて詳しく知りたい方は、専用の入門ガイドを参照することをおすすめします。

まとめ

このチュートリアルでは、CSSのfont-weightプロパティと、それがフォントの太さにどのような影響を与えるかについて解説しました。

bolderとlighterは、親要素のfont-weightから1段階相対的に離れたウェイトを意味するという点も学びました。実際にコードを動かしてさまざまなfont-weightの値を試すことで、それぞれの太さがどのように見えるかを確認できたはずです。font-weightを使いこなせば、フォントのスタイリングはもう思いのままです！

CSSの学習をさらに進めたい方は、CSSの学び方に関するガイドもぜひ参考にしてください。また、CSSに頼らずHTMLだけでテキストを太字にしたい場合は、HTMLで太字を作成する方法のガイドをご覧ください。

  1. RGBAを使ったCSSの透明度設定方法をわかりやすく解説

    CSSで要素の透明度を表現する場合、rgba() 関数を使うのが一般的です。RGBにアルファチャンネル（alpha）を加えたこのカラーモデルでは、第4パラメータで色の不透明度（opacity）を細かく指定できます。 RGBAカラーの基本 rgba() は次の4つの値で構成されます。 R（赤）・G（緑）・B（青）：それぞれ0〜255、または0〜100%の数値で指定します。 A（アルファ／透明度）：0.0（完全な透明）〜1.0（完全な不透明）までの小数で指定します。例えば「0.5」なら半透明になります。 通常の rgb() では透明度を扱えませんが、rgba() を使えば背景色だけを半透明にで

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ