TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでstrongタグが効かない原因と対処法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLでstrongタグが効かない原因と対処法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで太字で強調するstrongタグが効かない原因と対処法について解説しています。タグが適用されない場合の原因とそれぞれの対処法、使用時の注意点について覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLで太字で強調するstrongタグが効かない原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

太字で強調するstrongタグが効かない原因と対処法について詳しく説明していくね！

大石ゆかり

お願いします！

 

太字で強調するための2種類のタグ

HTMLタグで文字を太字にして強調したい場合に用いるのに、strongタグとbタグというものがあります。

使い方としては以下のように記述します。

<p>この文章の<strong>大事なところはココ</strong>です。</p>

<p>この文章の<b>大事なところはココ</b>です。</p>

strongタグはテキストの内容の強調したい部分を明確にするために使用し、bタグはただ単に文字を太くしたい時に使用するのが一般的です。

どちらを使用しても結果は同じであるため、好きな方を使いましょう。

 

strongタグの使い方と注意点

strongタグだけでなく、文字を斜めにしたりタグ<em>タグなどのいわゆる装飾タグについてはあまり使わないほうがとSEOの観点からいわれています。

仮に文字を強調させたいときは、出来る限り該当のテキストをspanタグで囲み、CSSでfont-weight:bold;を使用したほうがいいでしょう。

例

HTML

<p>この文章の<span class="font_bold">大事なところはココ</span>です。</p>

CSS

.font_bold{

  font-weight:bold;/*または600などで設定*/

}

strongタグは3回以上使うとGoogleからペナルティを受ける可能性が高まるという話もあるので注意しましょう。

 

[PR] Webデザインで副業する方法とは

strongタグが効かない原因と対処法

strongタグが効かない場合は下記の原因を見直してみましょう。

  1. HTMLのstrongのスペルにミスがある
  2. strongタグの閉じタグが書かれていない。
  3. cssのどこかに太字になる効果を打ち消すcssが記載されている

 

2をまずチェックしてみて双方に問題がない場合は、記述されているcssの中に

strong{

  font-weight:nomal;/*400、とかで記載されている場合もあります。*/

}

 

もしくは

body{

  font-weight:nomal;/*400、とかで記載されている場合もあります。*/

}

 

などの記載がないかどうか確かめてみましょう。

reset.cssなどを使用している場合によく見かけるものであり、そのあたりを中心的に探してみるといいでしょう。

 

また、reset.cssはいじりたくないけどstrongタグを使用したい場合は、

 

strong{

  font-weight:bold;/*または600などで設定*/

}

とすれば、strongタグで囲んだ部分が太字になるため、修正するようにしましょう。

 

執筆してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、

現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。

趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

 

大石ゆかり

HTMLで太字で強調するstrongタグが効かない原因と対処法がよく分かったので良かったです！

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

HTMLのdl要素を使って説明リストを作る方法を現役エンジニアが解説【初心者向け】

HTMLのdl要素を使って説明リストを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLで多階層メニューを作る方法を現役デザイナーが解説【初心者向け】

HTMLで多階層メニューを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、...
HTML

HTMLでクリック開閉する多階層ツリーのリストを作る方法を現役エンジニアが解説【初心者向け】

HTMLでクリック開閉する多階層ツリーのリストを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLファイルの解析方法を現役デザイナーが解説【初心者向け】

HTMLファイルの解析方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法を現役エンジニアが解説【初心者向け】

HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

HTMLで文字エンコードを指定する方法を現役デザイナーが解説【初心者向け】

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

あわせてよく読まれている記事

HTMLで強調タグと区切り線を使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの「強調タグ」と「区切り線」について解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次太字で強調するための2種類のタグstrongタグの使い方と注意点strongタグが効かない原因と対処法執筆してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 強調タグと区切り線を使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   強調タグ HTMLでは文章を記述する際に、タグを使って重要な部分を強調することが可能です。 強調タグを使うことにより、文章中で何が重要であるかを読み手に伝えることができます。 また、コンピューターやGoogleの検索エンジンなどに対しても、文書のなかで何が重要であるかを認識させることができます。 今回は代表的な強調タグである「emタグ」と「strongタグ」を紹介します。   強調を示すemphasisタグ 主に文脈のなかで強調しておきたい部分を<em> 〜 </em>で囲んで示します。 囲んだ部分は斜体で表示されるようになります。 タグ名の「em」は、「emphasis = 強調」の略語になります。   以下の例を見てみましょう。 <p>TechAcademyでは<em>プログラミング教室</em>を開いています</p> <em> 〜 </em>で囲んだ部分が斜体になっています。   重要性を示すstrongタグ 特定の語句を強調する際に<strong>〜</strong>で囲んで示します。 HTMLでは前述のemタグで囲まれた部分よりも重要であるとみなされます。 囲んだ部分は太字で表示されます。   以下の例を見てみましょう。 <p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p> <strong>〜</strong>で囲んだ部分が太字になっています。   さて、emタグもstrongタグも、ある部分を強調したいときに使うタグですが、その違いはどこにあるのでしょう。 strongタグは語句や文そのものが重要であることを示すものである一方、 emタグはどこを強調するかでニュアンスが異なる文章に使われます。   以下の例を見てみましょう。 <em>TechAcademy</em>は恵比寿でプログラミング教室を開いています。 TechAcademyは<em>恵比寿で</em>プログラミング教室を開いています。 TechAcademyは恵比寿で<em>プログラミング教室</em>を開いています。 1番目の文章は、主催をしている「TechAcademy」という点を、 2番目の文章は、新宿でも品川でもなく「恵比寿」という点を、 3番目の文章は、英会話教室でも料理教室でもなく「プログラミング教室」だという点をそれぞれ強調しています。 用途に応じて使分けてみましょう。   また、emタグもstrongタグもHTML上で強調しておきたい重要な部分とみなされ、斜体や太字で表示されます。しかし、これはブラウザが自動的に解釈し表示しており、文字のデザインとは異なります。 例えば、「重要ではないけれど文字を太くしたい」といった場合にemタグやstrongタグを使用すると、文書の意味づけという本来のタグの役割が成り立たなくなります。 デザインとして文字を装飾したい場合にはCSSで指定しましょう。   大石ゆかり 書いているページがiPhoneの紹介なので、ページ内に出てくるiphoneって単語16個全部をstrongタグで強調してみました♪ 田島悠介 一昔前にあった検索エンジンを誤解させるスパムみたいだね。 大石ゆかり え～！だって重要じゃないですか。 田島悠介 そのページの見出しに関連するフレーズや、ページ内で訴えたいことの中で特に強調したい部分１～３個所に使うのがいいよ。 大石ゆかり 単語全部強調っていうのは、かえってダメなんですね！   区切り線 続いて区切り線を使う方法です。   文章の区切りを示すhrタグ 文章の区切りとなる箇所に<hr>と記述します。 記述した部分には水平線が引かれ、文章の意味的な区切りを示します。 多くのタグは開始タグと終了タグの２つを使用しますが、hrタグは単独で使用します。 hrタグによる水平線はCSS側で色をつけたり太さを変えたり等、装飾することも可能です。   以下の例を見てみましょう。 <p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p> <hr> <p>文章を区切る場合には、hrダグで線を入れることができます</p> <hr>と記述したところに水平線が入っています。   [PR] Webデザインで副業する方法とは様々な意味を持つタグ ここでは主に、文章中の語句に意味づけを行うタグを一覧で紹介します。 タグ名 文章中での意味 使用ポイント em 強調する語句 どこを強調するかでニュアンスが変わる時 strong 重要な語句 emよりも重要性がある時 b 強調ではなく他と区別された語句 商品名やキーワードなど i 強調ではなく他と区別された語句 心の声や思考など small 補足的な語句・文章 免責事項、著作権表示など hr 区切り  テーマや話題が変わる時 かつてこれらのタグは、太字や斜体にするといったデザインとしての装飾目的で用いられることもありました。 HTML5以降では、文章や語句に意味を持たせる目的のみで用いることが推奨されています。   実際に書いてみよう 強調タグと区切り線を用いて実際にコードを書いてみましょう。   HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLで強調タグと区切り線を使う方法</title> </head> <body> <section> <p><em>TechAcademy</em>はオンライン完結のプログラミングスクール。<br> <strong>現役のプロが学習を徹底サポート</strong>するから、ITスキルを実務レベルで習得できます。</p> <hr> <p>何でも聞ける無料相談も実施中。<br> サービスの内容、副業や転職についてなど、なんでもご相談ください。</p> </section> </body> </html>   See the Pen Untitled by nomallica (@nomallica) on CodePen. 解説 上記のコードでは、主催をしている「TechAcademy」という点をemタグで囲んで強調しています。 また、最も伝えたい語句である「現役のプロが学習を徹底サポート」をstrongで囲み強調しています。 無料相談の説明の直前には、話題が変わることを示す意味で区切り線を設けています。   大石ゆかり hrタグをたんさん使って、文章を分けると見やすくなりそうですね♪ 田島悠介 細かいけど、HTML5から若干意味が変わったんだよ。 大石ゆかり hrタグにも文書構造としても意味があるんですか？単に区切る線ではないんですか？ 田島悠介 上で説明しているように、pタグのように段落と段落を分ける線だったり、後はsectionタグ内での区切りとして使うことが推奨されてるよ！   まとめ 今回はHTMLの「強調タグ」と「区切り線」について解説しました。 emタグやstrongタグは記述すると該当部分が太字や斜体で表示されますが、HTML5以降では文章中の語句などに意味を持たせる目的で用いられています。 そのため、決して装飾目的では無いことを覚えておいてください。 これらの強調タグを効果的に用いることで、文章中で何が重要であるかを読み手や検索エンジンに対して伝えられます。 ぜひ適切なタグを用いたマークアップを心がけてみてください。   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

bタグとstrongタグの書き方！HTMLで文字を太字にする方法【初心者向け】現役Webデザイナーが解説

HTMLで強調したい部分に使われるタグとして太字やイタリックなど様々あります。 その中でも今回は太字について紹介します。 bタグとstrongタグを使って書き方を解説しているので、実際に書きながら覚えていきましょう。 目次 「見かけ上」と「意味」の違い bタグ strongタグ 実際に書いてみよう まとめ   「見かけ上」と「意味」の違い 見た目は同じように見える太字ですが、タグの種類によって強調する内容が異なります。 1つ目の内容は、単純に文字を太く表示するという「見かけ上」強調するという内容です。 2つ目の内容は、サイト上で文字が持つ「意味」を強調するという内容です。 例）SEO（検索エンジン最適化）でのサイト上の文章の影響力   なぜタグを使い分ける必要があるのでしょうか？ それは、1つのページに「意味」として強調する言葉を増やしすぎると、SEOのペナルティを受け、検索が下がってしまう場合があるからです。 そのため、人の目で見た時の「見かけ上」強調したいのか、サイトにとって重要な「意味」を持つ言葉なのかを、タグで使い分けることが必要です。   [PR] Webデザインで副業する方法とはbタグ bタグとは「boldタグ」の略で、文字を太字にで表示します。bタグは「見かけ上」文字を強調することができますが、「意味」としての強調はされません。 bタグの書き方はbタグで強調したい文字をはさみます。 <b>太くしたいところ</b>   strongタグ strongタグもbタグ同様に文字を太く表示するタグですが、strongタグは「見かけ上」と「意味」の両方強調します。 上述の通り、SEO対策などで使うことで検索エンジンに引っかかりやすくなりますが、使いすぎるとペナルティを受ける場合があります。 strongタグの書き方もbタグ同様に、strongタグで文字をはさみます。 <strong>強調したいところ</strong>    実際に書いてみよう それでは実際に書いてみましょう。bタグとstrongタグを両方使ってみます。bold.htmlを作成し、以下のように記述します。 bold.html ——————————————————- <html> <head> <meta charaset="utf-8" /> </head> <body> bタグとstrongタグの違いは、<b>bタグは「見かけ上」だけ太字にしている</b>のに対して、<br /> <strong>strongタグは「見かけ上」と「意味」の両方を強調している</strong>ところである。<br /> <br /> そのため、<strong>きちんと使い分ける必要がある。</strong><br /> </body> </html> ——————————————————– ブラウザで開いてみます。   まとめ bタグとstrongタグの使い分けは、SEOの一つの対策につながります。 ぜひ活用してより良いサイトを作りましょう。 他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

HTMLで蛍光ペンのようなマーカーを作成する方法を現役デザイナーが解説【初心者向け】

HTMLで蛍光ペンのようなマーカーを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 蛍光ペンのようなマーカーを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   蛍光ペンのマーカー例 テキストの大事な所や目立たせたい所に、蛍光ペンのマーカーで引いたようなラインをHTMLとCSSで簡単に表現することができます。spanタグやstrongタグにクラス名を付けて使用しますが、特にstrongタグは、見た目にも検索エンジンにもテキストの重要性を伝えることができます。   太さと色を変える方法 CSSでクラス名を付けて、「linear-gradient」属性を使用します。 ラインの太さを変える transparentの後の「%」の値で太さを設定します。大きい値にすると、マーカーのラインは細くなり、小さい値にすると太くなります。100％にすると、マーカーのラインは消えてしまいます。0%～95%の値がおすすめです。 ラインの色を変える 「#」で始まる6桁のカラーコードで色を設定します。こちらは検索して調べると出てくるので、覚える必要はありません。   [PR] Webデザインで副業する方法とは蛍光ペンのマーカーをひいてみよう 太さ0%のマーカー HTML 吾輩は猫である。<strong class="marker_line0">名前はまだ無い。</strong> CSS .marker_line0 { background:linear-gradient(transparent 0%, #fec1fe 0%); } 太さ20%のマーカー HTML 吾輩は猫である。<strong class="marker_line20">名前はまだ無い。</strong> CSS .marker_line20 { background:linear-gradient(transparent 20%, #fec1fe 0%); } 太さ40%のマーカー HTML 吾輩は猫である。<strong class="marker_line40">名前はまだ無い。</strong> CSS .marker_line40 { background:linear-gradient(transparent 40%, #fec1fe 0%); } 太さ60%のマーカー HTML 吾輩は猫である。<strong class="marker_line60">名前はまだ無い。</strong> CSS .marker_line60 { background:linear-gradient(transparent 60%, #fec1fe 0%); } 太さ80%のマーカー HTML 吾輩は猫である。<strong class="marker_line80">名前はまだ無い。</strong> CSS .marker_line80 { background:linear-gradient(transparent 80%, #fec1fe 0%); }   See the Pen 蛍光マーカー 太さ by HO-Cosmos (@ho-cosmos) on CodePen. ピンクのマーカー HTML 吾輩は猫である。<strong class="marker_pink">名前はまだ無い。</strong> CSS .marker_pink { background:linear-gradient(transparent 60%, #fec1fe 0%) }; 黄色のマーカー HTML 吾輩は猫である。<strong class="marker_yellow">名前はまだ無い。</strong> CSS .marker_yellow {
HTML

HTMLで文字を太字・イタリック表示する方法を現役エンジニアが解説【初心者向け】

HTMLで文字を太字・イタリック表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 今回紹介する手法は、HTMLで文字の一部を強調したい場合などにとても便利な方法なので是非参考にしてみてください。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 文字を太字・イタリック表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 太字にする方法 イタリックにする方法 文字を太字・イタリック表示してみよう   太字にする方法 まずは、HTMLで文字を太字にする方法について紹介します。文字を太字にする場合は<b>タグを使用します。具体的には<b>文字</b>というように使用します。タグで囲んだ部分の文字が太字になります。 文章内の大事な単語などを太字にすると良いでしょう。   [PR] Webデザインで副業する方法とはイタリックにする方法 次に、HTMLで文字をイタリックにする方法について紹介します。文字をイタリックにする場合は<i>タグを使用します。こちらも、太字の場合と同様に<i>文字</i>と、イタリックにしたい文字をタグで囲みます。 タグは複数組み合わせて使用することもできるため、この2つのタグを組み合わせて、<b><i>文字</i></b>とすれば、指定の文字を太字でイタリックにすることもできます。   文字を太字・イタリック表示してみよう HTMLで文字を太字・イタリック表示する方法についてサンプルコードを参考に実際にコードを書いてみましょう。 サンプルコード <html> <head> HTMLで文字を太字・イタリック表示する方法 </head> <body> ますは通常の文字を表示します。<br> サンプルテキストSampleText <br> 文字を<b>太字</b>にしてみましょう。<br> <b>サンプルテキストSampleText</b><br> <br> それでは文字を<i>イタリック表示</i>にしてみましょう。<br> <i>サンプルテキストSampleText</i><br> <br> それでは文字を<b>太字</b>で<i>イタリック表示</i>にしてみましょう。<br>
HTML

HTMLでstrongで強調した文字の色を変える方法を現役デザイナーが解説【初心者向け】

HTMLでstrongで強調した文字の色を変える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 strongで強調した文字の色を変える方法について詳しく説明していくね！ 大石ゆかり お願いします！   強調文字の色を変える効果 強調された文字（太字）に対して、さらに色を変更することによって、普段とは異なる事柄や重要性を表すことができます。使い方と文脈によっては、注意や警告のための表記になります。この結果、誤解を招く表現のおそれがありますので、多用や濫用は避けましょう。   strong要素の使い方 システムにとっても容易に解釈されやすくなるように、文字として「強調」すべき事柄を定義する場合のために、strongタグがあります。このstrongタグを使用することにて、通常のテキストとは区別されることになります。以下に、strongタグを使用したサンプルコードを提示します。   See the Pen 2020-03-19-sample-03 by YOHEI INAI (@yohei_inai) on CodePen.   [PR] Webデザインで副業する方法とは色を変える方法 カスケーティングスタイルシート（CSS）にてセレクタを記述してから、スタイルを変更できます。文字色を変更する場合は、カスケーティングスタイルシートのスタイルのプロパティとしてcolorに、値には#に続けて8桁の16進数を記述することで変更できます。 なお、以下に、サンプルコードとして、CSSを使用しなかった場合（htmlタグのstyle属性を使用する方法）も掲載しておきますので、参考に留めてください。   htmlタグのstyle属性を使用する方法 See the Pen 2020-03-19-sample-05 by YOHEI INAI (@yohei_inai) on CodePen. style属性にスタイルを定義してから、装飾を施すことも可能です。 実用的にはなりませんので、参考までに留めてください。   strongで強調した文字の色を変えてみよう 以下、カスケーティングスタイルシート（CSS）を用いて、強調色に変更した場合のサンプルコードです。 See the Pen 2020-03-19-sample04 by YOHEI INAI (@yohei_inai) on CodePen. 前項「色を変える方法」のサンプルコードにもあるhtmlタグのstyle属性を使用する方法は、HTML4系以降の文書では、非推奨になっています。今後のためにも、「strongで強調した文字の色を変えてみよう」にて、例示のサンプルコードを参考に、カスケーティングスタイルシート（CSS）を用いた装飾を志しましょう。   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

HTMLで文字の太さを細字にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、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サイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでstrongタグが効かない原因と対処法を現役エンジニアが解説【初心者向け】