HTML5

2021.04.13

【strongタグ】基本的な使い方とWordPressで太字が反映されない時の原因

strongタグとは

strongタグは、内容の重要性、重大性、または緊急性が高いテキストを表すもので、一般的にはブラウザのデフォルトで太字によって表現されます。
▼参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/strong

See the Pen strong by spiqa design (@spiqa_design) on CodePen.

strongタグ使用時の注意事項

strongタグは、重要性を持つコンテンツであることを示すものです。
そのため、「文字を太くしたいから」といった理由で用いるのは適切ではありません。

装飾上文字を太くしたい場合には、CSSでfont-weightを指定して太字にしましょう。

WordPressテーマ作成時の注意事項

WordPressで独自のテーマを作成する場合には、WordPressの編集画面から入力した内容がどのように表示されるかについて考える必要があります。

WordPress(グーテンベルクエディタ)では、太字にしたい部分を選択した上で、以下の写真の「B」を指定することにより、文字が太字になります。

では、この太字がどのようなhtmlコードになっているのか確認してみたいと思います。

Chromeの検証ツールを用いてhtmlコードを確認したところ、太字を指定した部分は、strongタグで囲まれていることがわかります。

先ほど、strongタグは一般的にブラウザのデフォルトで太字で表現されるようになっているとご説明しました。
しかし、コーディングを行う際、ブラウザごとに異なるデフォルトのCSSが適用されているとスタイルを整えるのが大変になるため、リセットCSSというものを読み込んだり、ブラウザデフォルトのCSSを打ち消すためのCSSを記述していたりします。

これらの影響でstrongが太字として表示されなくなってしまっている場合もありますので、WordPressテーマ構築の際はぜひチェックしてみてください。

こちらもおすすめ

0

関連記事

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

  • 2021.05.18

    【HTML5】上付き文字のsupタグと下付き文字のsubタグの使い方

    HTML5

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!