SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

HTML/CSSで太字!1分でわかる際立たせテクニック

HTML/CSSで太字にして、重要なテキストを際立たせれば見やすいホームページになります。

今回は、HTML[HTML5]/CSSで太字にする、HTML/CSSで太字に色を付ける、HTML/CSSで太字を解除(太字にしない)、HTML/CSSで太字にならない(font-weight bold 効かない)について中心に解説したいと思います。

HTML/CSSで太字!1分でわかる際立たせテクニック

HTML[HTML5]/CSSで太字にする

HTML[HTML5]/CSSで太字にするには、いくつか方法があります。

style=”font-weight:bold;”

HTMLに直接CSSの「style=”font-weight:bold;”」を指定して、簡単にテキストを太字にすることができます。

HTMLマークアップ例

また、CSSを外部ファイルに記述し、読み込ませることで太字にもできます。

HTMLマークアップ例

CSS記述例

strongタグ

HTMLタグの「strongタグ」を指定して、テキストを太字にする方法です。

HTMLマークアップ例

emタグ

HTMLタグの「emタグ」を指定して、テキストを太字にする方法です。

HTMLマークアップ例

bタグ

HTMLタグの「bタグ」を指定して、テキストを太字にする方法です。

HTMLマークアップ例

HTML/CSSで太字に色を付ける(赤など)

HTML/CSSで太字に色を付ける(赤など)には、以下のような方法があります。

style=”font-weight:bold; color:#FF0000;”

HTMLに直接CSSの「style=”font-weight:bold; color:#FF0000;”」を指定して、テキストを太字にして色を付けることが出来ます。

HTMLマークアップ例

また、CSSを外部ファイルに記述し、読み込ませることで太字にして色を付けることが出来ます。

HTMLマークアップ例

CSS記述例

赤色の場合、「color:red;」でも指定ができます。

HTML/CSSで太字を解除(太字にしない)

HTML/CSSで太字を解除する(太字にしない)には、以下のような方法があります。

style=”font-weight:normal;”

HTMLに直接CSSの「style=”font-weight:normal;”」を指定して、テキストの太字を解除する(太字にしない)方法です。

HTMLマークアップ例

また、CSSを外部ファイルに記述し、読み込ませることで太字にもできます。

HTMLマークアップ例

CSS記述例

HTML/CSSで太字にならない(font-weight bold 効かない)

HTML/CSSで太字にならない(font-weight bold 効かない)場合、以下のようなケースがあります。

・二重で定義してる
同じ要素に対し、重複してfont-weightのスタイル指定を行ってるため、HTML/CSSで太字にならない(効かない)
例えば、font-weight:bold、font-weight:normal;で重複指定をした場合、font-weight:normal;を削除する。

・優先順位が低い
優先度の低いスタイル指定を行ってるため、HTML/CSSで太字にならない(効かない)
例えば、「idセレクタにする」「!importantを付ける」など、最優先される記述に修正しながら、スタイルを指定する
※参考:スタイルの優先順位-CSSの基本

・書式ミス
「全角文字入れてる」「セレクタ指定の間違い」などの書式ミスがあり、HTML/CSSで太字にならない(効かない)
※参考:CSSの書き方-CSSの基本

HTML/CSSで太字に下線を付ける

HTML/CSSで太字に下線を付けるには、以下のような方法があります。

style=”font-weight:bold; text-decoration:underline;”

HTMLに直接CSSの「style=”font-weight:bold; text-decoration:underline;”」を指定して、テキストを太字にして下線を付けることが出来ます。

HTMLマークアップ例

HTML5で廃止予定となってる「Uタグ」を使って太字に下線を付ける方法もあります。

HTMLマークアップ例

また、CSSを外部ファイルに記述し、読み込ませることで太字にして下線を付けることが出来ます。

HTMLマークアップ例

CSS記述例

HTML/CSSで太字斜体にする

HTML/CSSで太字斜体にするには、以下のような方法があります。

style=”font-weight:bold; font-style:italic;”

HTMLに直接CSSの「style=”font-weight:bold; font-style:italic;”」を指定して、テキストを太字斜体にすることが出来ます。

HTMLマークアップ例

その他、HTMLに直接「iタグ」を使って太字斜体にする方法もあります。

HTMLマークアップ例

また、CSSを外部ファイルに記述し、読み込ませることで太字斜体にすることが出来ます。

HTMLマークアップ例

CSS記述例

HTML/CSSで太字にして文字サイズ(大きさ)を大きくする

HTML/CSSで太字にして文字サイズ(大きさ)を大きくするには、以下のような方法があります。

style=”font-weight:bold; font-size:●%;”

HTMLに直接CSSの「style=”font-weight:bold; font-size:●%;”」を指定して、テキストを太字にして文字サイズ(大きさ)を大きくすることが出来ます。

HTMLマークアップ例

また、CSSを外部ファイルに記述し、読み込ませることで太字にして文字サイズ(大きさ)を大きくすることが出来ます。

HTMLマークアップ例

CSS記述例

font-sizeは、その他「em」「px」などの単位が指定できます。

HTML/CSSでSPANタグを使って一部太字にする

HTML/CSSでSPANタグを使って一部太字にするには、以下のような方法があります。

style=”font-weight:bold;”

SPANタグで一部HTMLマークアップした箇所に、直接CSSの「style=”font-weight:bold;”」を指定して、テキストを太字にする方法です。

HTMLマークアップ例

また、CSSを外部ファイルに記述し、読み込ませることで一部太字にできます。

HTMLマークアップ例

CSS記述例

まとめ

HTML/CSSで太字をうまく活用し、ポイントに目が行くようなわかりやすいサイトにしましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。

検索順位が上がらない…なぜ?

検索順位が上がらない…なぜ?

検索順位が上がらない理由は、SEO対策の質が低いからです。

例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やして内部リンクの最適化を疎かにします。
この場合、SEO対策の質が下がります。
結果、検索順位が上がらないというわけです。

こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策を洗い出しましょう。

SEO対策無料ご提案はこちら