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

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

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

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

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

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

今回は、この<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.0

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.0

色をつける

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

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

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

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

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

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

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

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

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


そんな多くのスキルどうやって身につければいいの?
自分には無理なんじゃないか・・・

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

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

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

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

無料体験レッスンを申し込む

まとめ

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー