HTML5

2021.04.13

【HTML5】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.05.12

    【HTML5】pタグの基本的な使い方やspanタグとの違いを解説

    HTML5

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.04.28

    【HTML5】HTML5からのsmallタグの使い方

    HTML5

おすすめ記事

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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