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からペナルティを受ける可能性が高まるという話もあるので注意しましょう。
strongタグが効かない原因と対処法
strongタグが効かない場合は下記の原因を見直してみましょう。
- HTMLのstrongのスペルにミスがある
- strongタグの閉じタグが書かれていない。
- 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サイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
