コピペで簡単に実装！CSSで文字の強調・飾りつけ8選【初心者向け】

HTMLとCSSを用いた文字の強調や装飾方法をまとめました。HTMLで作ったページのデザインを調整するCSSは、使い方次第でさまざまな装飾をほどこすことができます。例えば蛍光ペンで引いたようなデザインから、下線、アイコン、インデント、カーニングなどなどをソース付きで紹介していますので、初心者の方でもすぐに取り入れられるのではないでしょうか。

今回は、実際の業務でよく使うものを中心にまとめてみました。少しの知識で表現の幅が広がるかと思うので、参考になりそうなものがあればぜひ活用してみてください。

デザイン的な装飾

下線

HTML

CSS

text-decoration: underline; で下線を引けることを知っている方は多いかと思うのですが、その下線の位置や太さを変えられるCSSがあったことは知っていましたか。text-underline-offset
で位置を、text-decoration-thickness で太さを変えることができます。

また、text-decoration-lineについては他にもこのような指定ができます。

text-decoration-styleについては、他にもこのような指定ができます。

テキストから少し離れた下線は疑似要素で作っていた方もいるかと思うのですが、このCSSを知っておくとコーディングが少し楽になると思うので、ぜひ取り入れてみてはいかがでしょう。

蛍光ペン

HTML

CSS

2つめ、3つめの例のように、テキストの一部のみ色付けしたい場合はグラデーション用のCSS linear-gradient
を用いています。色の割合を指定して境界線をぼかさないでおくと、パキッとしたラインのような見た目になります。太くしたいときは色の割合を多く、細くしたいときは色の割合を少なくするだけで、簡単にマーカーを引いたような見た目にすることができます。色を変えたいときは、CSSのカラーコードを変更してください。

インライン要素で囲うことで、改行をしてもマーカーの見た目を保ったままにすることができますが、もしブロック要素にしてしまうと…

ブロック要素は幅を指定しない限りコンテンツ枠いっぱいに存在するので、このような見た目になってしまいます。この場合は、display: inline-block; を設定してあげると良いです。

蛍光ペンのアニメ―ション

アニメ―ションを追加することもできます。こちらは疑似要素で作成しました。
※分かりやすいよう、アニメ―ションを無限ループ（infinite）にしています。無限ループにしない場合は animation の infinite という単語を削除してください。

HTML

CSS

秒数を変えると下線が引かれる速さを調整できます。スクロールをして、画面内に要素が入ったら下線が引かれる、というアニメーションなどにアレンジしても、目を引いて要素を目立たせられるデザインになるかと思います。

スラッシュ

HTML

CSS

疑似要素を用いて、文字の前後にスラッシュをつけてポップな強調をつけることができます。スラッシュの棒線を疑似要素で用意して、flexで上下中央の横並びにしています。

widthで長さ、heightで太さを調整することができます。また、CSSの下のほうにある transform: rotate(45deg); にて、スラッシュの角度を調整してみてください。

1文字目のみの変更

HTML

CSS

1文字目のみ、サイズや色、背景、余白、ボーダーの有無などを変えたいときに便利なのが「::first-letter」です。もちろん、spanなどで囲ってCSSを当てる、という対応でも問題はありませんが、こちらのCSSを用いることでHTML側への記述が必要なくなり、コードをより簡潔に保つことができます。

注意点としては、インライン要素には効かないということです。また、1文字が括弧やドットといった記号の場合は、2文字目にもCSSが当たってしまいます（MDN Web Docs参照）。

縁どり

文字を縁どりする方法は2種類あります。

HTML

CSS

.bordering01はCSSに標準で用意されている、縁どり用のCSSです。文字の内側に線が引かれるため、線を太くすると文字が潰れてしまいます。また、IEでは対応していないので注意してください。

.bordering02はtext-shadowを用いて上下左右に1pxずつ影を作り、疑似的に枠線に見せています。そのため、フチとフチのつなぎ目が途切れることもありますが、IEにて対応しているため一長一短となっています。※IEは2022年6月でサポートが終了するため、ウェブサイトの持ち主と相談しつつ、使用するCSSを決めると良いかと思います。

アイコン

プラスアイコン

HTML

CSS

アコーディオンなどでよく使うプラスマークは、縦線と横線を疑似要素で作ってあげることで再現ができます。

インライン要素にしておかないと、以下のようにプラスアイコンが要素の端で表示されてしまいます。

上記では、テキストからアイコンまでの距離が長くなっています。これを避けたい場合は、インライン要素にしておくことにご注意ください。テキストとアイコンが離れてしまうことで、関連性が失われてしまったり、パット見たときに視認性が下がってしまったりする懸念があります。

マイナスアイコン

プラスアイコンの縦棒の疑似要素を消すとマイナスアイコンになります。メニューなどのアコーディオンの開閉時などに活用しやすいです。

HTML

CSS

アローアイコン

HTML

CSS

アローアイコンは、ボタンやテキストの横によく登場するかと思いますが、これもCSSで再現することができます。疑似要素で、四角形の2本のみを指定して、矢印のように見せかけるというテクニックです。

右向きのアローはborder-left と border-bottom、左向きのアローは border-right と border-topを用いると作成しやすいかと思います。もしくは、要素を反転させるCSS transform:
scale(-1,1); を記述しても逆向きのアローを作ることができます。

このCSSの注意点として、四角形から作っているため矢印の内角は90度から変えられないことが挙げられます。内角が狭めだったり、広めの矢印は画像で描きだすのが無難でしょう。

テキストの調整

インデント

HTML

CSS

text-indentというCSSを用いて字下げをすることができます。上の例では一文字目のみ字下げをしているので、書籍の段落のようなデザインにすることができます。下の例では2行目以降の字下げをしていますので、補足など米印（※）を使う箇所のデザイン調整に便利です。

文字のカーニング

文字のカーニング（文字同士の間隔の調整）には、以下2種類のCSSを用いることができるかと思います。

文字を自動的に詰める

HTML

CSS

かっこや句読点などの記号を含め、自動カーニングができるCSSがこちらです。Photoshopではメトリクスやオプティカルなど、自動でカーニングを調整する箇所がありますが、そのような調整がされたデザインを再現するのに一番手堅いのが
font-feature-settings: “palt”; かなという印象です。

注意点として、メイリオやMS ゴシック、MS 明朝、GoogleフォントのNoto Sans JPでは使えません。

文字の間隔を手動で整える

HTML

CSS

文字と文字の間の余白を、指定したサイズで設定できます。ネガティブな値にすると文字間が詰まります。emだけでなく、pxや%などを用いることが可能です。文字間が広すぎても読みづらく、狭すぎても重なってしまい可読性が失われるので、やりすぎは禁物です。

文字の両端を揃える

HTML

CSS

テキストの両端を揃えるCSSです。最終行以外の左右の端が、そのエリアの枠に揃うように文字間が調整されます。こちらもPhotoshopなどのデザインを再現するときに役に立つCSSです。

.justifyのクラスをつけたものはテキストがグレーの枠線までバランスよく配置され、右の縦のラインが真っ直ぐに揃っているかと思います。

まとめ

文字の装飾をするための便利なCSSについて紹介しました。
デザインを再現するためのコーディングに正解はないので、HTMLやCSSなどを駆使し、自分に合ったやり方でさまざまな表現をすることができます。

これまでは画像で描きだしていたところや、ややこしいコーディングになっていた箇所も、もしかしたら今回紹介した方法で解決できることもあるかもしれません。今回ご紹介したCSS以外にも、さまざまな装飾用のCSSがありますので、ぜひ自分に合った新たな表現方法を探してみてはいかがでしょうか。