強調文字をちょっとおしゃれにするCSSデザインサンプル

蛍光ペン

ブログの本文で強調したい部分には <strong><b> を使いますが、デフォルトのスタイルではただの太字になるだけです。

これだとちょっと味気ないときは、CSS でデザインしてみましょう。

文字や背景の色を変えたり、蛍光ペンでマーカーをひいたような感じにすると、重要なポイントをより一層伝えやすくなりますよ。

強調文字のCSSデザインサンプル

強調の意味を持たせる HTML タグには <strong> <b> <em> があります。

これらは主に検索エンジンに対して重要性を伝えるタグで、見た目だけ強調したいなら <span> で指定することもできます。

それぞれの使い分け方などは後述します。まずはデザインサンプルをご覧ください。

デフォルトのスタイルは太字

現在使用しているテーマ・テンプレートで特に指定がない場合、<b><strong> で囲ったテキストはただの太字になります。

重要な部分は太字になります

<strong>重要な部分は太字</strong>になります。

これを基本形としてアレンジしてみましょう。以下、class 名をつけたサンプルをご紹介します。記事内すべての強調文字を変更する場合は、<strong> に直接指定してください。

borderで線を付け加える

まずは border を指定して線をつけるシンプルな装飾から。

「solid」を使ったシンプルな下線の場合、2 px の赤い線にすると以下のようになります。

※サンプルコードには含めていませんが、わかりやすくするために左右に余白を設定してあります

重要な部分に赤い下線がつきます。

.sample01 {
     border-bottom: 2px solid #ff3333;
     margin: auto .4em;
 }

「dotted」にすると点線になります。緑色の点線を上下につけてみましょう。

重要な部分の上下に緑の点線がつきます。

.sample02 {
     border-top: 2px dotted #66ff66;
     border-bottom: 2px dotted #66ff66;
}

「double」は二重線。サンプルでは一括指定していますが、上下左右それぞれ指定することもできます。

重要な部分を紫の二重線で囲みます。

.sample03 {
     border: 4px double #9966ff;
}

線の種類や色、大きさを調整していろいろ試してみてください。囲む場合は余白を調整したほうが読みやすいでしょう。

background-colorで背景色をつける

つづいて、背景色を変更してみます。

よく見るスタイルですが、黄色にすると蛍光ペンでマークしたような感じになります。

重要な部分の背景色を黄色にします。

.sample04 {
     background-color: #ffff66;
}

文字色を変えているサイトもよく見ますね。

重要な部分の背景色と文字色を変えてみます。

.sample05 {
     background-color: #ffff66;
     color: #ff3333;
}

下線までつけてしまうと、「どんだけ強調したいんだよ!」というぐらいきつくなるのであまりおすすめしません。

重要な部分の背景色と文字色を変えて下線をつけてみます。

.sample06 {
     background-color: #ffff66;
     color: #ff3333;
     border-bottom: 2px solid #ff3333;
}

linear-gradientで蛍光ペンぽくする

背景色を黄色にすると蛍光ペンでマークしたような見映えになり、線の太さを変えるとおしゃれ感が増します。

重要な部分を蛍光ペンでマークした感じにします。

.sample07 {
     background: linear-gradient(transparent 60%, #ffff66 60%);
}

ピンクバージョンはこちら。

重要な部分を蛍光ペンでマークした感じにします。

.sample08 {
     background: linear-gradient(transparent 60%, #ff99ff 60%);
}

数字を変えると線の太さが変わるので、お好みで調整してみてください。

font-sizeで大きさを変える

強調文字の大きさを変えてみましょう。赤い下線と複合させてみます。

重要な部分の文字を大きくして下線をつけます。

.sample09 {
     border-bottom: 2px solid #ff3333;
     font-size: 120%;
}

文字を大きくする場合、line-height が px で固定されていると文字が重なってしまいます。

また、各行にサイズの大きい強調文字が並ぶとガタガタになって読みづらくなるので、多用する場合は注意してください。

transformで文字を斜めにする

テキストを傾けると、かなり目を引きます。

重要な部分の文字を斜めにしてみます。

.sample10 {
     transform: rotate(-10deg);
     display: inline-block;
}

<strong> などのインライン要素にそのまま「transform」を指定しても斜めになりません。

「display:inline-block」を付け加えるのがポイントです。

ただ、角度をつけすぎると読みづらくなって意味がありませんし、余白を調整しないと前後の行にかぶってしまうのが難点。お遊びで使ってみてください。

text-shadowで影をつける

文字にほんのりシャドウをつけると、立体感が出ます。

重要な部分の文字に影をつけてみます。

.sample11 {
     text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}

文字色を変えるとこんな感じ。

重要な部分の文字色を変えて影をつけてみます。

.sample12 {
     text-shadow: 1px 1px 0 rgba(0,0,0,.1);
     color: #ff3333;
}

シャドウの色やぼかし具合を変えるとまた違った印象になりますが、読みやすくするのはけっこうセンスが問われます。

さりげなくつけましょう。

強調文字<strong><b><em>の使い分け方と定義

代表的なものをご紹介してきましたが、各パターンを複合させてサイズやカラーを変えると組み合わせは無限とも言えます。

たんにコピペするのではなく、ブログのスタイルとマッチするよう調整してください。統一感がないと読みづらいですからね。

強調をあらわす HTML タグには 3 種類あるのですが、それぞれ微妙に定義が異なります。また、HTML のバージョンによっても異なります。

強調タグ使い分け表

そこまで厳密に考えなくても良いのですが、表にまとめてみました。

タグHTML4HTML5
b太字にするときに使う他と区別したいテキストに使う。重要性は伝えない。
em強調したいときに使うアクセントをつけたいときに使う。重要性は伝えない。
strongより強調したいときに使う重要な部分に使う。
※ HTML4 とほぼ同じ

あまりよくわかりませんね…

<b>と<strong>の使い分け方

HTML4 では、見た目だけ強調したいときは <b> で囲み、検索エンジンに重要性を伝えたいときに <strong> で囲む、という感じでした。

個人的に「強調する部分=重要な部分」だと思っているので、<b> を使うことはありません。記事内で <strong> を使う回数もかぎられています。

強調したい部分が多すぎると全体的にぼやけてしまうので、セクションごとに「ここがポイントです!」というのを伝えるぐらいがちょうどよいですね。

なお、WordPress で記事を書く場合、「B」で太字にすると <strong> でマークアップされます。

WordPressの「b」ボタンはstrong

<em> は主に英文で使う

<b> と同じく <em> も使う機会が少ないかもしれません。

CSS に何も指定していないデフォルトの状態では文字が斜体になるのですが、メイリオなどの日本語フォントは対応していないので注意してください。<em> で囲んでも見た目に変化がありません。

英文でアクセントをつけたいときに使う、というイメージで良いと思います。

SEOでは<strong>と<b>はどちらが有効なのか

強調文字のマークアップは、<strong><b> のどちらが有効なのか、という点が気になるかもしれません。Google は、どちらもまったく同じように扱う、と明言しています

Back then, whenever we checked, strong and b were treated the exact same in terms of ranking and scoring and how they’re indexed and all that sort of stuff.

Is there a difference between the “strong” and “b” tags in terms of SEO? – YouTube

HTML の定義においてもそこまで厳密に考える必要はないと思いますので、どちらかで統一しておけばよいでしょう。

<strong> を多用すれば検索評価が劇的に向上する、なんていうことはないですから、その点だけ誤解しないようにしてください。

まとめ

見出しタグ <h1><h6> の CSS サンプルはよく見るのですが、強調タグ <strong> のサンプルはあまり見かけないので作ってみました。

大切なのは、ブログのイメージに合わせた読みやすい装飾です。人それぞれ何が読みやすいと感じるか違うので正答はありませんが、ここら辺を追究していくのもブログの楽しみ方ではと思います。

それでは、また。

Naifix Limited

無料プレゼント

有料会員向けに配信していた「ブログのアクセス数を最大限に増やす SEO 施策」を今だけ無料でプレゼントしています。

Naifix 編集部

Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。本ブログ(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修 Direx Marketing, Inc.