icon
icon

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サイトを公開できるオンラインブートキャンプを開催しています。

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