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

seoラボラトリー

  • follow us in feedly

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

2017/04/04 2017/04/05

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;”」「strongタグ」「emタグ」「bタグ」を使う方法があります。

style=”font-weight:bold;”

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

HTMLマークアップ例:
<p style=”font-weight:bold;”>ホームページの順位を上げるためにSEO対策が必要です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるためにSEO対策が必要です。</p>
CSS記述例:
p {
font-weight:bold;/*太字*/
}

strongタグ

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

HTMLマークアップ例:
<p><strong>ホームページの順位を上げるためにSEO対策が必要です。</strong></p>

emタグ

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

HTMLマークアップ例:
<p><em>ホームページの順位を上げるためにSEO対策が必要です。</em></p>

bタグ

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

HTMLマークアップ例:
<p><b>ホームページの順位を上げるためにSEO対策が必要です。</b></p>

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

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

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

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

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

HTMLマークアップ例:
<p style=”font-weight:bold; color:#FF0000;”>ホームページの順位を上げるためにSEO対策が必要です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるためにSEO対策が必要です。</p>
CSS記述例:
p {
font-weight:bold;/*太字*/
color:#FF0000;/*赤色*/
}

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

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

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

style=”font-weight:normal;”

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

HTMLマークアップ例:
<p style=”font-weight:normal;”>ホームページの順位を上げるためにSEO対策が必要です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるためにSEO対策が必要です。</p>
CSS記述例:
p {
font-weight:normal;/*標準の太さ(太字の場合、解除して標準の太さにできる)*/
}

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

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マークアップ例:
<p>ホームページの順位を上げるために<span style=”font-weight:bold; text-decoration:underline;”>SEO対策が必要</span>です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<u>SEO対策が必要</u>です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span>SEO対策が必要</span>です。</p>
CSS記述例:
span {
font-weight:bold;/*太字*/
text-decoration:underline;/*下線*/
}

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTML/CSSで太字斜体にする

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

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

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”font-weight:bold; font-style:italic;”>SEO対策が必要</span>です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<i>SEO対策が必要</i>です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span>SEO対策が必要</span>です。</p>
CSS記述例:
span {
font-weight:bold;/*太字*/
font-style:italic;/*斜体(イタリック体)*/
}

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

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

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

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”font-weight:bold; font-size:200%;”>SEO対策が必要</span>です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span>SEO対策が必要</span>です。</p>
CSS記述例:
span {
font-weight:bold;/*太字*/
font-size:200%;/*ベースから200%大きくするフォントサイズ指定*/
}

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

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

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

style=”font-weight:bold;”

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”font-weight:bold;”>SEO対策が必要</span>です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span>SEO対策が必要</span>です。</p>
CSS記述例:
span {
font-weight:bold;/*太字*/
}

まとめ

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

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

順位が上がらないのは、何が原因??
順位決定の仕組と、
サイトの問題点をアドバイス(無料)

お申込みはこちらから

上位表示を目指すURL

※アメブロ、jimdo、fc2ブログのURLはご遠慮ください

上位表示を目指すキーワード

会社名/組織名

ご担当者様名

電話番号

メールアドレス

※個人情報の管理は「プライバシーポリシー」に同意の上お申し込みください

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

最新記事

本日の順位変動幅順位変動情報へ