ブログBLOG

html CSSで文字の強調・飾りつけデザイン8選【コピペでOK】

更新日：2021/08/11

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

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

1 デザイン的な装飾
2 アイコン
- 2.1 プラスアイコン
- 2.2 アローアイコン
3 テキストの調整
4 まとめ

デザイン的な装飾

下線

.marker01

テキストテキストテキスト

.marker02

テキストテキストテキスト

HTML


<p class="marker01">テキストテキストテキスト</p>

<p class="marker02">テキストテキストテキスト</p>

テキストテキストテキスト

テキストテキストテキスト

CSS


.marker01 {
  color: #191970;
  text-decoration-line: underline;
  text-underline-offset: 5px; //位置
  text-decoration-thickness: 2px; //太さ
}

.marker02 {
  color: 	#DB7093;
  text-decoration-line: underline;
  text-underline-offset: 2px; //位置
  text-decoration-thickness: 10px; //太さ
}

.marker01 {

color: #191970;

text-decoration-line: underline;

text-underline-offset: 5px; //位置

text-decoration-thickness: 2px; //太さ

}

.marker02 {

color: #DB7093;

text-decoration-line: underline;

text-underline-offset: 2px; //位置

text-decoration-thickness: 10px; //太さ

}

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

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

overline	テキストの上に線を引きます
line-through	取り消し線を引きます

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

solid	1本の線を引きます
double	2本の線を引きます
dotted	点線を引きます
dashed	破線を引きます
wavy	波線を引きます

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

蛍光ペン

.underline01

テキストテキスト、テキスト

.underline02

テキストテキスト、テキスト

.underline03

テキストテキスト、テキスト

HTML


<p>テキスト<span class="underline01">テキスト</span>、テキスト</p>

<p>テキスト<span class="underline02">テキスト</span>テキスト</p>

<p>テキスト<span class="underline03">テキスト</span>テキスト</p>

テキストテキスト、テキスト

テキストテキストテキスト

テキストテキストテキスト

CSS


.underline01 {
  background: #f5ff00;
}

.underline02 {
  background: linear-gradient(transparent 40%, #f5ff00 60%);
}

.underline03 {
  background: linear-gradient(transparent 80%, #f5ff00 20%);
}

.underline01 {

background: #f5ff00;

}

.underline02 {

background: linear-gradient(transparent 40%, #f5ff00 60%);

}

.underline03 {

background: linear-gradient(transparent 80%, #f5ff00 20%);

}

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

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

.underline04

テキストテキスト、テキスト

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

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

.anim-underline01

テキストテキスト、テキスト

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

HTML


<p>テキスト<span class="anim-underline01">テキスト</span>、テキスト</p>

テキストテキスト、テキスト

CSS


.anim-underline01 {
  position: relative;
}

.anim-underline01::before {
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent 40%, #f5ff00 60%);
  animation: underlineAnim 2s ease-in infinite;
  z-index: -1;
}

@keyframes underlineAnim {
  0% {
    right: 100%;
  }
  100% {
    right: 0;
  }
}

.anim-underline01 {

position: relative;

}

.anim-underline01::before {

content:"";

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: linear-gradient(transparent 40%, #f5ff00 60%);

animation: underlineAnim 2s ease-in infinite;

z-index: -1;

}

@keyframes underlineAnim {

0% {

right: 100%;

}

100% {

right: 0;

}

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

スラッシュ

.slash

テキストテキストテキスト

HTML


<p class="slash">テキストテキストテキスト</p>

テキストテキストテキスト

CSS


.slash {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slash::before,
.slash::after {
  content: "";
  width: 25px;
  height: 1px;
  background-color: #000;
  margin: 0px 4px 4px;
}

.slash::before {
  transform: rotate(45deg);
}

.slash::after {
  transform: rotate(-45deg);
}

.slash {

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.slash::before,

.slash::after {

content: "";

width: 25px;

height: 1px;

background-color: #000;

margin: 0px 4px 4px;

}

.slash::before {

transform: rotate(45deg);

}

.slash::after {

transform: rotate(-45deg);

}

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

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

1文字目のみの変更

.bordering01

テキストテキストテキスト

HTML


<p class="first">テキストテキストテキスト</p>

テキストテキストテキスト

CSS


.first {
  font-size: 30px;
}

.first::first-letter {
  font-weight: bold;
  font-size: 40px;
  color: red;
}

.first {

font-size: 30px;

}

.first::first-letter {

font-weight: bold;

font-size: 40px;

color: red;

}

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

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

縁どり

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

.bordering01

テキストテキストテキスト

.bordering02

テキストテキストテキスト

HTML


<p class="bordering01">テキストテキストテキスト</p>
<p class="bordering02">テキストテキストテキスト</p>

テキストテキストテキスト

テキストテキストテキスト

CSS


.bordering01 {
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
  font-size: 40px !important;
  color: #fff;
}

.bordering02 {
  color: #fff;
  font-size: 40px !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.bordering01 {

text-stroke: 1px #000;

-webkit-text-stroke: 1px #000;

font-size: 40px !important;

color: #fff;

}

.bordering02 {

color: #fff;

font-size: 40px !important;

text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;

}

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

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

アイコン

プラスアイコン

.plus

テキスト

HTML


<span class="plus">テキスト</span>

テキスト

CSS


.plus {
  position: relative;
  padding-right: 20px;
}

.plus::before,
.plus::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  width: 12px;
  height: 1px;
  background: #000;
}

.plus::after {
  transform: rotate(90deg);
}

.plus {

position: relative;

padding-right: 20px;

}

.plus::before,

.plus::after {

display: block;

content: "";

position: absolute;

top: 0;

bottom: 0;

margin: auto;

right: 0px;

width: 12px;

height: 1px;

background: #000;

}

.plus::after {

transform: rotate(90deg);

}

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

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

.plus

テキスト

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

マイナスアイコン

.minus

テキスト

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

HTML


<span class="plus">テキスト</span>

テキスト

CSS


.minus {
  position: relative;
  padding-right: 20px;
}

.minus::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  width: 12px;
  height: 1px;
  background: #000;
}

.minus {

position: relative;

padding-right: 20px;

}

.minus::before {

display: block;

content: "";

position: absolute;

top: 0;

bottom: 0;

margin: auto;

right: 0px;

width: 12px;

height: 1px;

background: #000;

}

アローアイコン

.arrow01

テキスト

.arrow02

テキスト

HTML


<span class="arrow01">テキスト</span>

<span class="arrow02">テキスト</span>

テキスト

テキスト

CSS


.arrow01 {
  position: relative;
  padding-right: 30px;
}

.arrow01::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-135deg);
  box-sizing: content-box;
  transition: 0.6s cubic-bezier;
}

.arrow02 {
  position: relative;
  padding-left: 30px;
}

.arrow02::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  border-right: 2px solid #000;
  border-top: 2px solid #000;
  transform: rotate(-135deg);
  box-sizing: content-box;
  transition: 0.6s cubic-bezier;
}

.arrow01 {

position: relative;

padding-right: 30px;

}

.arrow01::before {

content: "";

position: absolute;

right: 20px;

top: 0;

bottom: 0;

margin: auto;

width: 6px;

height: 6px;

border-radius: 2px;

border-left: 2px solid #000;

border-bottom: 2px solid #000;

transform: rotate(-135deg);

box-sizing: content-box;

transition: 0.6s cubic-bezier;

}

.arrow02 {

position: relative;

padding-left: 30px;

}

.arrow02::before {

content: "";

position: absolute;

left: 20px;

top: 0;

bottom: 0;

margin: auto;

width: 6px;

height: 6px;

border-radius: 2px;

border-right: 2px solid #000;

border-top: 2px solid #000;

transform: rotate(-135deg);

box-sizing: content-box;

transition: 0.6s cubic-bezier;

}

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

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

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

テキストの調整

インデント

.indent01

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

.indent02

HTML


<p class="indent01">吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>

<p class="indent02">吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

CSS


.indent01 {
  text-indent: 1em;
  padding-left: -1em;
}

.indent02 {
  text-indent: -1em;
  padding-left: 1em;
}

.indent01 {

text-indent: 1em;

padding-left: -1em;

}

.indent02 {

text-indent: -1em;

padding-left: 1em;

}

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

文字のカーニング

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

文字を自動的に詰める

何もしていないもの

テキスト、テキストテキストテキストテキスト。
「テキストテキストテキスト」
テキストテキストテキスト、テキストテキストテキスト。

.palt

テキスト、テキストテキストテキストテキスト。
「テキストテキストテキスト」
テキストテキストテキスト、テキストテキストテキスト。

HTML


<p>テキスト、テキストテキストテキストテキスト。<br>「テキストテキストテキスト」<br>テキストテキストテキスト、テキストテキストテキスト。</p>

<p class="txt">テキスト、テキストテキストテキストテキスト。<br>「テキストテキストテキスト」<br>テキストテキストテキスト、テキストテキストテキスト。</p>

テキスト、テキストテキストテキストテキスト。 「テキストテキストテキスト」 テキストテキストテキスト、テキストテキストテキスト。

テキスト、テキストテキストテキストテキスト。 「テキストテキストテキスト」 テキストテキストテキスト、テキストテキストテキスト。

CSS


.palt {
  font-feature-settings: "palt";
}

.palt {

font-feature-settings: "palt";

}

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

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

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

.ls01

.ls02

HTML


<p class="txt01">吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
<p class="txt02">吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

CSS


.ls01 {
  letter-spacing: 0.5em; //広げる
}

.ls02 {
  letter-spacing: -0.1em; //詰める
}

.ls01 {

letter-spacing: 0.5em; //広げる

}

.ls02 {

letter-spacing: -0.1em; //詰める

}

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

文字の両端を揃える

何もしていないもの

.justify

HTML


<p>吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
<p class="justify">吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

CSS