強調文字 strong をちょっとおしゃれにする 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;
}

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

border – CSS: カスケーディングスタイルシート | MDN  

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 種類あるのですが、それぞれ微妙に定義が異なります。

強調タグ使い分け表

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

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

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

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

個人的に「強調する部分＝重要な部分」だと思っているので、<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> のサンプルはあまり見かけないので作ってみました。

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