HOME内部対策 > HTML/CSSで太字!1分でわかる際立たせテクニック

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分でわかる際立たせテクニック

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

PR

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 *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
ご担当者様名 *
電話番号 *
メールアドレス *

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

このエントリーをはてなブックマークに追加
カテゴリ:内部対策
B!

最新記事
SEOラボをSNSで応援する
無料SEOツール
話題の記事
2017年7月 効果があったSEO対策は、被リンク【まとめ】
アメブロで上位表示できますか?【今月(2017年8月)の問合せ】
サイトの使いやすさ(UX=ユーザーエクスペリエンス)が重要なSEO要因になってきている
検索ユーザーが求めるコンテンツの考え方
「検索エンジン最適化スターターガイド」は最も効率のよいSEO技法である
ブログを2つ運営しています。同じ内容を投稿していいの?という問い合わせ
最近6位に上昇したページの対策教えます
他社のSEO商品を比較
最近、順位が落ちてきたというお問合せ
最近のSEO対策と順位決定の仕組み
人気記事BEST10
follow us in feedly