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

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

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

 

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

 

 

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

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

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

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

 

文字の強弱を変更する方法・その１（HTML上での方法）

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

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

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

 

[PR] Webデザインで副業する学習方法を動画で公開中

文字の強弱を変更する方法・その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では初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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