120 Shares

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

強調文字をおしゃれに演出

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

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

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

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

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

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

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

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

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

Sample

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

これを基本形としてアレンジしてみましょう。

クラス名で割り振っているので、style.css などにコピペしたあと以下のように指定すると反映されます。

borderで線を付け加える

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

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

Sample 01

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

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

Sample 02

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

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

Sample 03

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

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

参考border-スタイルシートリファレンス

background-colorで背景色をつける

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

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

Sample 04

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

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

Sample 05

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

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

Sample 06

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

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

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

Sample 07

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

Sample 08

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

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

一部スマホブラウザや旧バージョンのブラウザではベンダープレフィックスが必要になります。詳しくはこちらをご参考に。

そろそろスッキリさせたい!CSS3 linear-gradient のベンダープレフィックス

font-sizeで大きさを変える

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

Sample 09

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

この場合、行間(line-height)が px で固定されていると文字が重なってしまいます。

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

transformで文字を斜めにする

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

Sample 10

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

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

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

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

text-shadowで影をつける

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

Sample 11

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

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

Sample 12

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

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

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

参考CSSで区切り線と文字に1pxの影をつけるとかっこいいデザインに!

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

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

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

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

強調タグ使い分け表

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

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

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

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

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

個人的に「強調する部分=重要な部分」だと思っているので、<b> を使うことはありません。また、記事内で <strong> を使うのも多くて 3 ヶ所ぐらい。

単に他のテキストと区別させるときは <span> にスタイルを指定しています。

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

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

WordPressの「b」ボタンはstrong

HTML5 では “<b> は他により適切な要素が存在しない場合の最終手段として使用するべきもの” とされているので、今後使う機会は減っていくかもしれません。

参考<b>-HTML5タグリファレンス

<em> は主に英文で使う

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

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

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

Sample

I really love Ellora.

font-family にメイリオを指定していて <em> を使うなら、何らかの装飾をしておきましょう。

強調文字を他の文字と区別できるようにしよう

<strong> などの要素は CSS で装飾できるので、当然ながら他の文字と同じ見た目にもできます。

Sample 13

普通のテキストと強調したい部分の見た目が変わりません

これは「検索エンジンだけに重要性を伝える」という意味合いにとられるおそれがあります。とくに、キーワードをやたらと <strong> で囲んでしまうと、スパム扱いとなる可能性も否定できません。

display:none を指定して消してしまうと完全にアウトですね。

検索エンジンだけに目を向けた記事の書き方は間違った SEO なので、くれぐれもご注意ください。

まとめ

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

蛍光ペンでマークしたような感じにする」というのはけっこうありますけどね。

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

それでは、また。