HTMLで文字の太さを細字にする方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで文字の太さを細字にする方法について解説しています。ここでは主にfont-weightによる文字の強弱の付け方を説明します。キーワードで指定する場合、数値で指定する場合それぞれの書き方を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLで文字の太さを細字にする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

文字の太さを細字にする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLで文字の太さを細字にする方法

サイト作成では必ず登場する、HTMLで文字の太さを細字にする方法について解説してみます。

サイト内で、コンテンツ情報の重要性を伝えるには、強弱を持たせると良いでしょう。紙媒体の書籍でも重要なことは太字にしたり、大きくしたり、文字色を変えたりしています。これと同じです。

全体的には、標準・細字とし、強調したいところを太くするのがベターです。

 

文字の強弱を変更する方法・その1(HTML上での方法)

プログラミングやアプリ開発を学べるオンラインスクール <strong>TechAcademy(テックアカデミー)</strong>です。現役のプロのパーソナルメンターが学習をサポートするオンラインブートキャンプを開催。
プログラミングやアプリ開発を学べるオンラインスクール <b>TechAcademy(テックアカデミー)</b>です。現役のプロのパーソナルメンターが学習をサポートするオンラインブートキャンプを開催。

strongタグ、bタグで囲うことで、文字は太くなり、それ以外の箇所は標準テキストで表示されます。 fontタグでも強弱をつけることができますが、HTML5では、文書構造はhtml、修飾要素はcssと分けるようにしているので、fontは廃止される予定です。fontタグを使わないようにしましょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

文字の強弱を変更する方法・その2(CSS上での方法)

p{
font-weight:bold;
}

強弱をつけるには、「font-weightプロパティ」を用います。weight=重さ、太さという意味です。font-weightプロパティの後のセレクタによって、文字の太字・細字の設定ができます。

太字のフォント情報があるのであれば、一回り太い太字として表示しますが、細字のフォント情報がない場合は、標準フォントに置き換えられます。

キーワードで指定するfont-weight

キーワードで指定した場合の種類はnormal(通常)/bold(太く/700と同じ値)/lighter(相対的に一段階細く)/bolder(相対的に一段階太く)と、4段階あります。normalは通常の太さで、初期値はこれに設定されています。値にboldと設定すると太字になります。

codepenでプロパティに各キーワードを入れてみました。実際の表示を確認してみましょう。

p{
font-weight:bold;
}

See the Pen
フォントの強弱をつける2
by Yuka Sato (@yuka-sato)
on CodePen.

数値で指定するfont-weight

数値で指定した場合の種類は100/200/300/400/500/600/700/800/900と、9段階あります。

特に単位は入れずに数字のみを記述します。実際にはブラウザで2種類のみで設定されていることが多く、画面上でも一番下の800のみが太字で表示されています。(値700以上でboldと同様の表示になります)

codepenでプロパティに各数字を入れてみました。実際の表示を確認してみましょう。

p{
font-weight:100;
}

See the Pen
フォントの強弱をつける
by Yuka Sato (@yuka-sato)
on CodePen.

 

文字の強弱を変更する方法・まとめ

強調したいところにはHTML上または、CSSで設定する。太字のフォント情報があるのであれば、一回り太い太字として表示しますが、細字のフォント情報がない場合は、標準フォントに置き換えられます。CSSでの指定は、キーワードと数字があります。一般的にはキーワードが便利です。

今回は、文字の強弱をつける方法を解説してみました。使い方を覚え、ページを作成してみましょう!!

 

監修してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。
制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。