【HTML入門】知っておきたい！太字にするbとstrongの違い

こんにちは！侍エンジニアブログ編集部のシホです！

HTMLで文字を太くする場合、<b>タグと<strong>タグを使います。

「どっちも太くなるしいいじゃん、結局同じでしょ？」

と思っている方も多いんじゃないでしょうか。

この２つは同じ見た目にはなりますが、それぞれに意味があって用途が異なってきます。

今回は、この<b>タグと<strong>タグの違いを説明したうえで、CSSを用いて太字にする方法も解説しちゃいます！

ぜひ参考にしてみてください！

HTMLで文字を太字にする方法

HTMLではb要素とstrong要素を使って、 太字 のように文字を太くすることができます。

どういう時に使うかというと、文章中で強調した箇所に使います。

では、実際にタグの違いと使い方を見てみましょう。

b要素とstrong要素の使い方

bとは「Bold（太字）」の略ですで、strongはそのまま「強調」という意味です。

<b> 〜 </b>または<strong> 〜 </strong>で太字にしたい部分を囲みます。

See the Pen NMwqrw by Shiho Sakai (@shiho-sakai) on CodePen.

b要素とstrong要素の違い

b要素を使って太字にするのと、strong要素を使って太字にするのではどちらも同じ見た目になりますが、意味が違ってきます。

上のサンプルコードで、あえて「太く」と「強調」と書きましたが、

b要素は「見た目を装飾する」
strong要素は「意味を強調する」

という意味を持っています。

基本的にHTMLは構造や内容そのものを表すので、意味を強調したい場合はstrongを使い、装飾したい場合はなるべくbタグは使わず、CSS（スタイルシート）で記述するようにしましょう。

CSSで文字を太さを変える方法

太くする

「font-weight」プロパティに「bold」を指定して文字を太字にします。

See the Pen wjPKGY by Shiho Sakai (@shiho-sakai) on CodePen.

色をつける

続いて、太字にしてさらに文字に色をつける方法を説明します。

文字を赤太字にする場合を例に見てみましょう。

文字に色を付ける場合は、「color」プロパティに「色（英語表記orカラーコード）」を指定します。

See the Pen RyjWgy by Shiho Sakai (@shiho-sakai) on CodePen.

ウェブサイト制作スキルで自由に働くには

今回解説したHTMLはウェブサイトを制作する上で習得必須の大事なスキルです。しかし、HTMLのみでは仕事数がとても少なく、ウェブサイト全般と比べると約10倍もの案件数の差があります。

そのため、HTMLにくわえてCSSやJavaScript、PHPやWordPressなどのスキルも学ぶことで案件数は一気に多くなり、単価の高いお仕事を請けられる可能性が高まります。他に身につけるべきスキルは「プログラミング学習診断アプリ」で解説していますので、見てみてください。

実際にクラウドワークスでも、お客様のご要望に応えるため、またスキルが少ないと大量のページを作るなどのお仕事が多くなってしまう点から、複数技術の習得を以下のようにすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト（1ページあたり単価）・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript（AJAX）を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用：CrowdWorks

そんなあなたにはプログラミングスクールでの学習がおすすめです。経験者から教わることで独学では学べないレベルのスキルが身につき、仕事を請けられるイメージが一気に湧きます。

弊社「侍エンジニア」では、あなた専用の学習カリキュラムを用意し、現役エンジニアとマンツーマンで学んでいくことで、挫折することなく短期間で複数のスキルを身につけることができます。

結果として、受講期間中に案件獲得に成功し、講師と一緒に納品してフリーランスエンジニアへの第一歩を歩み始めた方もいらっしゃいます。柔軟にカリキュラムが組めるのもマンツーマン指導の弊社ならではの特徴です。

無料カウンセリングでは効率的な学習方法や今後のキャリアプランのご提案もさせていただきますので、理想の働き方はあるけど何をどう学べばいいか分からないという方は是非お越しください。オンラインでも受講可能です。

無料カウンセリングを申し込む

まとめ

いかがでしたでしょうか。

・強調する意味をもたせるために太字にする場合はHTMLのstrong要素を使う
・文字を太字に装飾したいときはCSSを使う

の二点をぜひ覚えておいてください！