【html&css】文字装飾に関するWebデザインまとめ

2026年3月12日2026年3月16日

Webサイトの見た目を変えるCSSの「文字装飾」と「配置」における基本を押さえると活用の幅が広がります。

直感的に動かしてコピペで使えるサンプルコードもあるので、参考にしてWebデザインを習得しましょう。

また、HTML&CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTML&CSSページをご確認ください。

HTML&CSS | Code Stock

CSSにおける文字装飾の基本

Webサイトの文章を読みやすく、整理させるためには「文字の装飾（タイポグラフィ）」が欠かせません。

CSSを使えば、文字のサイズや色・行間・下線などをコントロールできます。

ここでは、実務で使う基本的な文字装飾プロパティを解説します。

CSSにおける文字装飾の基本

フォントサイズ（font-size）の変更
文字色（color）を変える
太字（font-weight）にする
斜体（font-style）にする
行間（line-height）を変える
文字の間隔（line-spacing）を変える
文字に下線（text-decoration）を引く
文字を線（border）の枠で囲む
フォント種類（font-family）の変更

CSSに関する書き方や装飾の基本を確認したい人は「【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ」を一読ください。

【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ

フォントサイズ（font-size）の変更

セレクタ { font-size: ◯◯px or ○○rem or ○○% or ◯◯em; }

文字の大きさを変更するにはfont-sizeプロパティを使用します。

指定する単位は、絶対的な大きさであるpx（ピクセル）や親要素を基準にする%（パーセント）、ルート要素を基準にするrem（レム）などがあります。

スマホなどの様々な画面サイズに対応しやすいremが主流になりつつあります。

フォントサイズ（font-size）の変更例

ラジオボタンをクリックして、文字の大きさがどう変わるか体験してみてください。

12px (小さめ) 16px (標準) 24px (大きめ)

ここの文字の大きさが変わります。

HTMLコード表示

<div class="demo-wrap">
  <input type="radio" name="fs-type" id="fs-12" class="demo-radio">
  <input type="radio" name="fs-type" id="fs-16" class="demo-radio" checked>
  <input type="radio" name="fs-type" id="fs-24" class="demo-radio">

  <div class="demo-controls">
    <label for="fs-12" class="demo-btn">12px (小さめ)</label>
    <label for="fs-16" class="demo-btn">16px (標準)</label>
    <label for="fs-24" class="demo-btn">24px (大きめ)</label>
  </div>

  <div class="demo-box">
    <p class="fs-target">ここの文字の大きさが変わります。</p>
  </div>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.demo-radio {
  display: none;
}
.demo-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.demo-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
}
#fs-12:checked ~ .demo-controls [for="fs-12"],
#fs-16:checked ~ .demo-controls [for="fs-16"],
#fs-24:checked ~ .demo-controls [for="fs-24"] {
  background-color: #0d6efd;
  color: white;
}
.demo-box {
  background-color: #ffffff;
  padding: 20px;
  border: 1px dashed #adb5bd;
}
.fs-target {
  transition: font-size 0.3s ease;
  margin: 0;
}
/* フォントサイズの切り替え */
#fs-12:checked ~ .demo-box .fs-target {
  font-size: 12px;
}
#fs-16:checked ~ .demo-box .fs-target {
  font-size: 16px;
}
#fs-24:checked ~ .demo-box .fs-target {
  font-size: 24px;
}

文字色（color）を変える

セレクタ { color: 色名 or カラーコード or RGB; }

文字の色を変更するにはcolorプロパティを使用します。

色の指定方法はredやblueといったカラーネームで指定する方法や、#ff0000のようなカラーコード（16進数）で指定する方法があります。

実務は、正確な色を出せるカラーコードが使われます。

文字色（color）の変更例

この文字は「red（赤）」です。

この文字は「#0d6efd（青）」です。

この文字は「#198754（緑）」です。

HTMLコード表示

<div class="demo-wrap">
  <p class="color-target1">この文字は「red（赤）」です。</p>
  <p class="color-target2">この文字は「#0d6efd（青）」です。</p>
  <p class="color-target3">この文字は「#198754（緑）」です。</p>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-weight: bold;
}
.color-target1 {
  color: red; /* カラーネームでの指定 */
}
.color-target2 {
  color: #0d6efd; /* カラーコードでの指定 */
}
.color-target3 {
  color: #198754;
}

太字（font-weight）にする

セレクタ { font-weight: bold; }

文字の太さを変更するにはfont-weightプロパティを使用します。

強調したい箇所を太字にする場合はbold（ボールド）を指定します。

元に戻す場合はnormalを指定します。

また、100〜900までの数値で太さを指定することも可能です。

太字（font-weight）の変更例

ここは通常の太さ（normal）のテキストです。

ここは強調された太字（bold）のテキストです。

HTMLコード表示

<div class="demo-wrap">
  <p class="fw-normal">ここは通常の太さ（normal）のテキストです。</p>
  <p class="fw-bold">ここは強調された太字（bold）のテキストです。</p>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.fw-normal {
  font-weight: normal; /* 標準の太さ */
}
.fw-bold {
  font-weight: bold; /* 太字 */
  color: #dc3545; /* 分かりやすく色も変更 */
}

斜体（font-style）にする

セレクタ { font-style: italic; }

文字を斜めに傾けたい場合はfont-styleプロパティを使用し、値にitalic（イタリック）を指定します。

日本語のフォントではあまり使いませんが、英語の引用文やデザインのアクセントとして利用されます。

斜体（font-style）の変更例

This is normal text. (通常)

This is italic text. (斜体)

HTMLコード表示

<div class="demo-wrap">
  <p class="fs-normal">This is normal text. (通常)</p>
  <p class="fs-italic">This is italic text. (斜体)</p>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 18px;
}
.fs-normal {
  font-style: normal; /* 通常 */
}
.fs-italic {
  font-style: italic; /* 斜体 */
  color: #6f42c1;
}

行間（line-height）を変える

セレクタ { line-height: 値; }

文章の行と行の隙間（行間）を調整するにはline-heightプロパティを使用します。

単位（pxなど）はつけず、1.5〜1.8（文字の大きさの1.5〜1.8倍の高さ）程度の数値を指定するのが読みやすい推奨値とされています。

行間（line-height）の変更例

【行間：1.0】
行間が詰まっていると、上下の文字が近すぎてしまい、長文になるほど目で追うのが非常に疲れてしまいます。

【行間：1.6】
適切な行間を空けることで、文章に風通しが良くなり、読者がストレスなくスラスラと読み進めることができます。

HTMLコード表示

<div class="demo-wrap" style="display:flex; gap:20px;">
  <div class="lh-box lh-tight">
    【行間：1.0】<br>行間が詰まっていると、上下の文字が近すぎてしまい、長文になるほど目で追うのが非常に疲れてしまいます。
  </div>
  <div class="lh-box lh-good">
    【行間：1.6】<br>適切な行間を空けることで、文章に風通しが良くなり、読者がストレスなくスラスラと読み進めることができます。
  </div>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.lh-box {
  flex: 1;
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #adb5bd;
}
.lh-tight {
  line-height: 1.0; /* 隙間なし（読みにくい） */
}
.lh-good {
  line-height: 1.6; /* 理想的なゆとり（読みやすい） */
}

文字の間隔（letter-spacing）を変える

セレクタ { letter-spacing: ○○px or ◯◯em; }

行間ではなく、隣り合う「文字と文字の隙間」を調整するにはletter-spacingプロパティを使用します。

見出しの文字を少し広げたり、文字が詰まって見えるフォントの余白を微調整する際に使われます。

指定にはpxやem（1em = 1文字分）といった単位を使います。

文字の間隔（letter-spacing）の変更例

通常の間隔のテキストです。

少し間隔を広げたテキストです。

見出し向けの広いテキスト

HTMLコード表示

<div class="demo-wrap">
  <p class="ls-normal">通常の間隔のテキストです。</p>
  <p class="ls-wide">少し間隔を広げたテキストです。</p>
  <p class="ls-super-wide">見出し向けの広いテキスト</p>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.ls-normal {
  letter-spacing: normal; /* 通常（0） */
}
.ls-wide {
  letter-spacing: 0.1em; /* 0.1文字分の隙間を空ける */
}
.ls-super-wide {
  letter-spacing: 0.5em; /* 0.5文字分の隙間を空ける */
  font-weight: bold;
  color: #0d6efd;
}

文字に下線（text-decoration）を引く

セレクタ { text-decoration: underline; }

文字に下線を引く場合はtext-decoration: underline;を使います。

逆に、リンク（<a>タグ）に最初から付いている青い下線を消したい時は、text-decoration: none;を指定して打ち消すこともできます。

文字に下線（text-decoration）の変更例

強調したい部分に下線を引くことができます。

リンクの下線を消すこともできます。

HTMLコード表示

<div class="demo-wrap">
  <p class="td-under">強調したい部分に<span class="td-underline">下線を引く</span>ことができます。</p>
  <a href="#" class="td-none">リンクの下線を消すこともできます。</a>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.td-underline {
  text-decoration: underline; /* 下線を引く */
}
.td-none {
  text-decoration: none; /* 下線を消す */
  color: #dc3545;
  font-weight: bold;
}

点線/破線/波線/蛍光ペン風の下線を引く例

text-decoration以外に、文字の下に線を引くアプローチは複数あります。

デザイン性の高い線を引く時はborder-bottom（下枠線）を使ったり、蛍光ペンで引いたようなマーカー線はbackground（背景色）のグラデーション機能を使って表現します。

点線の下線（border-bottom）

破線の下線（border-bottom）

波線の下線（text-decoration）

蛍光ペン風のマーカー線（background）

HTMLコード表示

<div class="demo-wrap line-styles">
  <p><span class="line-dotted">点線の下線（border-bottom）</span></p>
  <p><span class="line-dashed">破線の下線（border-bottom）</span></p>
  <p><span class="line-wavy">波線の下線（text-decoration）</span></p>
  <p><span class="line-marker">蛍光ペン風のマーカー線（background）</span></p>
</div>

CSSコード表示

.demo-wrap.line-styles p {
  margin-bottom: 15px;
}
/* 枠線（border）を利用して下に線を引く */
.line-dotted {
  border-bottom: 2px dotted #0d6efd; /* 点線 */
}
.line-dashed {
  border-bottom: 2px dashed #198754; /* 破線 */
}  
/* text-decorationの拡張機能で波線を引く */
.line-wavy {
  text-decoration: underline;
  text-decoration-style: wavy; /* 波線 */
  text-decoration-color: #dc3545;
}
/* 背景グラデーションを半分だけ塗って蛍光ペン風にする */
.line-marker {
  background: linear-gradient(transparent 60%, #ffff00 60%);
  font-weight: bold;
}

取り消し線を引く例

セール価格の表示などで「古い情報を打ち消す」時に取り消し線を使います。

text-decorationにline-throughを指定すると実装できます。

通常価格：10,000円 → 特別価格：8,000円

HTMLコード表示

<div class="demo-wrap">
  <p>通常価格：<span class="td-strike">10,000円</span> → 特別価格：8,000円</p>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 18px;
}
.td-strike {
  text-decoration: line-through; /* 取り消し線を引く */
  color: #6c757d; /* 灰色にして目立たなくする */
}

文字を線（border）の枠で囲む

セレクタ { border: solid 線の太さ色; }

文字（要素）の周りを線で囲むにはborderプロパティを使います。

border: 太さ線の種類色;というように、3つの値を半角スペースで区切り指定します。

実線/点線/破線/二重線の枠の例

実線 (solid) 点線 (dotted) 破線 (dashed) 二重線 (double)

HTMLコード表示

<div class="demo-wrap" style="display:flex; gap:10px; flex-wrap:wrap;">
  <span class="bd-solid">実線 (solid)</span>
  <span class="bd-dotted">点線 (dotted)</span>
  <span class="bd-dashed">破線 (dashed)</span>
  <span class="bd-double">二重線 (double)</span>
</div>

CSSコード表示

.demo-wrap span {
  padding: 10px 15px;
  background-color: #ffffff;
  font-weight: bold;
}
.bd-solid {
  border: 2px solid #0d6efd; /* 2pxの実線の青 */
}
.bd-dotted {
  border: 3px dotted #dc3545; /* 3pxの点線の赤 */
}
.bd-dashed {
  border: 2px dashed #198754; /* 2pxの破線の緑 */
}
.bd-double {
  border: 6px double #ffc107; /* 6pxの二重線の黄色 */
}

文字の上下左右に線を引く例

borderは四方を囲むだけでなく、「上だけ」「下だけ」「左だけ」といったように、特定の方向だけに線を引くことも可能です。

これは見出し（h2やh3）の装飾としてよく使われるテクニックです。

下だけ線を引いた見出し

左に太い線を引いた見出し

HTMLコード表示

<div class="demo-wrap">
  <div class="bd-bottom-only">下だけ線を引いた見出し</div>
  <div class="bd-left-only">左に太い線を引いた見出し</div>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.demo-wrap div {
  padding: 10px;
  margin-bottom: 20px;
}
/* 下側にだけ線を引く */
.bd-bottom-only {
  border-bottom: 3px solid #0d6efd;
}
/* 左側にだけ太い線を引く＋背景色をつける（王道の見出しデザイン） */
.bd-left-only {
  border-left: 6px solid #198754;
  background-color: #e8f5e9;
}

フォント種類（font-family）の変更

セレクタ { font-family: フォント名; }

文字の書体（ゴシック体や明朝体など）を変更するにはfont-familyプロパティを使います。

フォント種類の例

ゴシック体：親しみやすく、Webで最も読みやすい標準的な書体です。

明朝体：筆の入りやハネがあり、高級感や和風な雰囲気を演出します。

HTMLコード表示

<div class="demo-wrap">
  <p class="ff-sans">ゴシック体：親しみやすく、Webで最も読みやすい標準的な書体です。</p>
  <p class="ff-serif">明朝体：筆の入りやハネがあり、高級感や和風な雰囲気を演出します。</p>
</div>

CSSコード表示

.demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 18px;
}
/* ゴシック体（sans-serif）の指定 */
.ff-sans {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/* 明朝体（serif）の指定 */
.ff-serif {
  font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  background-color: #fdfaf6;
}

文字の位置を変える

文字サイズや色が整ったら、「文字の配置」をコントロールしましょう。

CSSを使えば、中央揃えにしたり、両端を揃えたりできます。

文字の位置を変えることについて

文字を「左・中央・右」に揃える（text-align）
文章の「両端」を揃える（text-align: justify）
段落の「１文字目」を字下げする（text-indent）
画像と文字の「縦のズレ」を直す（vertical-align）

文字を「左・中央・右」に揃える（text-align）

文字の横方向の配置を変えるにはtext-align（テキスト・アライン）プロパティを使います。

基本となる値は以下の3つです。

left（左揃え）
Webの初期設定。
基本的に文章はすべて左揃えになります。
center（中央揃え）
見出しや目立たせたいキャッチコピーなどに使われます。
right（右揃え）
日付や署名、金額などを右端に寄せたい時に便利です。

左揃え (left) 中央揃え (center) 右揃え (right)

ここの文字の配置が変わります！

HTMLコード表示

<div class="ta-demo-wrap">
  <input type="radio" name="ta-pos" id="ta-left" class="ta-radio" checked>
  <input type="radio" name="ta-pos" id="ta-center" class="ta-radio">
  <input type="radio" name="ta-pos" id="ta-right" class="ta-radio">

  <div class="ta-controls">
    <label for="ta-left" class="ta-btn">左揃え (left)</label>
    <label for="ta-center" class="ta-btn">中央揃え (center)</label>
    <label for="ta-right" class="ta-btn">右揃え (right)</label>
  </div>

  <div class="ta-box">
    <p class="ta-target">ここの文字の配置が変わります！</p>
  </div>
</div>

CSSコード表示

.ta-demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.ta-radio {
  display: none;
}
.ta-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ta-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
/* 選択されたボタンの色を変える */
#ta-left:checked ~ .ta-controls [for="ta-left"],
#ta-center:checked ~ .ta-controls [for="ta-center"],
#ta-right:checked ~ .ta-controls [for="ta-right"] {
  background-color: #0d6efd;
  color: #ffffff;
}
.ta-box {
  background-color: #ffffff;
  padding: 20px;
  border: 2px dashed #adb5bd;
}
.ta-target {
  font-weight: bold;
  font-size: 18px;
  color: #0d6efd;
  margin: 0;
  transition: all 0.3s ease;
}
/* =========================================
  ラジオボタンで text-align を切り替える
  ========================================= */
#ta-left:checked ~ .ta-box .ta-target {
  text-align: left;
}
#ta-center:checked ~ .ta-box .ta-target {
  text-align: center;
}
#ta-right:checked ~ .ta-box .ta-target {
  text-align: right;
}

文章の「両端」を揃える（text-align: justify）

複数行にわたる長い文章を書いていると、単語の長さなどの影響で「右端がガタガタ」になることがあります。

そんな時はtext-align: justify;（均等割付）を指定すると、文字と文字の隙間を自動で調整し、左右の端を一直線に揃えます。

❌ 左揃え（右端がガタガタになる）

Webデザインにおいて、文章の読みやすさは非常に重要な要素です。長い文章の右端が不揃いだと、視線が散ってしまい、どこか洗練されていない印象を与えてしまうことがあります。

⭕️ 均等割付（右端がピシッと揃う！）

PCだと分かりづらいですが、スマホ画面あるいは英語などによる長文だと顕著になります。

HTMLコード表示

<div class="tj-demo-wrap">
  <div class="tj-col">
    <p class="tj-label">❌ 左揃え（右端がガタガタになる）</p>
    <p class="tj-text tj-left">
      Webデザインにおいて、文章の読みやすさは非常に重要な要素です。長い文章の右端が不揃いだと、視線が散ってしまい、どこか洗練されていない印象を与えてしまうことがあります。
    </p>
  </div>

  <div class="tj-col">
    <p class="tj-label">⭕️ 均等割付（右端がピシッと揃う！）</p>
    <p class="tj-text tj-justify">
      Webデザインにおいて、文章の読みやすさは非常に重要な要素です。長い文章の右端が不揃いだと、視線が散ってしまい、どこか洗練されていない印象を与えてしまうことがあります。
    </p>
  </div>
</div>

CSSコード表示

.tj-demo-wrap {
  display: flex;
  gap: 20px;
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.tj-col {
  flex: 1;
}
.tj-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
}
.tj-text {
  background-color: #ffffff;
  padding: 15px;
  margin: 0;
  line-height: 1.6;
  border-right: 2px dashed #dc3545; /* 右端のラインを分かりやすくする赤い点線 */
}
/* 左揃え（初期値） */
.tj-left {
  text-align: left;
}
/* 両端揃え（均等割付） */
.tj-justify {
  text-align: justify;
}
/* スマホ表示では縦に並べる */
@media (max-width: 600px) {
    .tj-demo-wrap {
        flex-direction: column;
    }
}

段落の「１文字目」を字下げする（text-indent）

日本語の作文ルールとして「段落の最初は1マス空ける」というものがあります。

Webサイトでこれを表現する時、毎回スペースキーを押して全角スペースを入力するのは非常に面倒です。

代わりにtext-indent: 1em;（1文字分インデントを下げる）とCSSで指定すれば、自動的にすべての段落の頭を1マス空けてくれます。

ここは字下げをしていない通常の段落です。全角スペースを打たないと、一番左の端から文字がスタートしてしまいます。

ここは「text-indent: 1em;」を指定した段落です。スペースキーを押さなくても、CSSの力で自動的に最初の1文字分だけスペースが空いていますね！

HTMLコード表示

<div class="ti-demo-wrap">
  <p class="ti-none">ここは字下げをしていない通常の段落です。全角スペースを打たないと、一番左の端から文字がスタートしてしまいます。</p>
  <p class="ti-indent">ここは「text-indent: 1em;」を指定した段落です。スペースキーを押さなくても、CSSの力で自動的に最初の1文字分だけスペースが空いていますね！</p>
</div>

CSSコード表示

.ti-demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.ti-demo-wrap p {
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  line-height: 1.6;
  margin-bottom: 15px;
}
.ti-none {
  /* 字下げなし */
  text-indent: 0;
}
.ti-indent {
  /* 最初の行だけ、1文字分（1em）の余白を空ける！ */
  text-indent: 1em;
  border-left: 4px solid #198754 !important; /* 分かりやすく緑の線を引く */
}

画像と文字の「縦のズレ」を直す（vertical-align）

例えば、文字横に小さなアイコン画像などを並べた時、「なぜか画像が少しだけ上にズレてしまう…」というのは、Webデザインあるあるの悩みです。

そんな時は画像に対してvertical-align（バーティカル・アライン）プロパティを使います。

これをmiddle（中央）に指定することで、横にある文字の高さの中心と画像の中心を合わせることができます。

❌ 指定なし（画像が浮いて見える）

画像横に並んだテキストが下にズレているように見えます。

⭕️ vertical-align: middle; を指定

画像画像とテキストの「縦の中心」がピッタリ揃いました！

HTMLコード表示

<div class="va-demo-wrap">
  <div class="va-row">
    <p class="va-label">❌ 指定なし（画像が浮いて見える）</p>
    <div class="va-box">
      <span class="va-icon va-none">画像</span>
      <span class="va-text">横に並んだテキストが下にズレているように見えます。</span>
    </div>
  </div>

  <div class="va-row">
    <p class="va-label">⭕️ vertical-align: middle; を指定</p>
    <div class="va-box">
      <span class="va-icon va-middle">画像</span>
      <span class="va-text">画像とテキストの「縦の中心」がピッタリ揃いました！</span>
    </div>
  </div>
</div>

CSSコード表示

.va-demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.va-row {
  margin-bottom: 20px;
}
.va-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
}
.va-box {
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #ced4da;
  /* 中心線が分かりやすいように背景に薄い線を引く */
  background-image: linear-gradient(transparent 49%, #ffcdd2 49%, #ffcdd2 51%, transparent 51%);
}
/* アイコン代わりの四角い箱（インラインブロック） */
.va-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #0d6efd;
  color: #ffffff;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
}
.va-text {
  font-weight: bold;
  color: #333;
}
/* 指定なし（初期値は baseline という文字の下端に合わせる設定） */
.va-none {
  vertical-align: baseline;
}
/* 画像と文字の縦の中心を合わせる */
.va-middle {
  vertical-align: middle;
  background-color: #198754; /* 成功した方は緑色にする */
}

文字に影をつける

文字に影を付けたい時はtext-shadow（テキスト・シャドウ）プロパティを使います。

セレクタ { text-shadow: 横のズレ縦のズレぼかし具合影の色; }

上記4つの値を半角スペースで区切って指定するだけです。

横のズレ
右に影を落とすならプラスの値（例：2px）、左ならマイナスの値（例：-2px）を指定します。
縦のズレ
下に影を落とすならプラスの値、上ならマイナスの値を指定します。
ぼかし具合
数字が大きいほど、影がぼやけて広がります。
0にすると、シャープな影になります。
影の色
rgba(0, 0, 0, 0.3)のように、黒色を少し透明にして指定すると美しい影に仕上がります。

text-shadowは、カンマ（,）で区切って複数の影を重ねることで「ネオン管のような発光」や「文字の縁取り」など、多彩な表現が可能です。

▼ ボタンを押して、影のスタイルを切り替えてみましょう ▼

影なし自然な影ポップな影ネオン発光縁取り

Text Shadow

HTMLコード表示

<div class="ts-demo-wrap">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押して、影のスタイルを切り替えてみましょう ▼</p>

  <input type="radio" name="ts-type" id="ts-none" class="ts-radio" checked>
  <input type="radio" name="ts-type" id="ts-drop" class="ts-radio">
  <input type="radio" name="ts-type" id="ts-pop" class="ts-radio">
  <input type="radio" name="ts-type" id="ts-neon" class="ts-radio">
  <input type="radio" name="ts-type" id="ts-border" class="ts-radio">

  <div class="ts-controls">
    <label for="ts-none" class="ts-btn">影なし</label>
    <label for="ts-drop" class="ts-btn">自然な影</label>
    <label for="ts-pop" class="ts-btn">ポップな影</label>
    <label for="ts-neon" class="ts-btn">ネオン発光</label>
    <label for="ts-border" class="ts-btn">縁取り</label>
  </div>

  <div class="ts-box">
    <p class="ts-target">Text Shadow</p>
  </div>
</div>

CSSコード表示

.ts-demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.ts-radio {
  display: none;
}
/* ボタンエリアのレイアウト */
.ts-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
/* ボタンのデザイン */
.ts-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
/* 選択されたボタンの色を変える */
#ts-none:checked ~ .ts-controls [for="ts-none"],
#ts-drop:checked ~ .ts-controls [for="ts-drop"],
#ts-pop:checked ~ .ts-controls [for="ts-pop"],
#ts-neon:checked ~ .ts-controls [for="ts-neon"],
#ts-border:checked ~ .ts-controls [for="ts-border"] {
  background-color: #0d6efd;
  color: #ffffff;
}
/* ターゲットを囲む箱 */
.ts-box {
  background-color: #ffffff;
  padding: 40px 20px;
  border: 2px dashed #adb5bd;
  text-align: center;
  border-radius: 4px;
  transition: background-color 0.4s ease;
}
/* 影が適用されるテキスト本体 */
.ts-target {
  font-weight: bold;
  font-size: 40px;
  color: #333333;
  margin: 0;
  transition: all 0.4s ease;
}
/* =========================================
  1. 影なし（デフォルト）
  ========================================= */
#ts-none:checked ~ .ts-box .ts-target {
  text-shadow: none;
}
/* =========================================
  2. 自然な影（ドロップシャドウ）
  少しぼかして、黒を透明にした色（rgba）を使うのがコツ
  ========================================= */
#ts-drop:checked ~ .ts-box .ts-target {
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
/* =========================================
  3. ポップな影（レトロ風）
  ぼかしを「0」にして、くっきりとした色を配置する
  ========================================= */
#ts-pop:checked ~ .ts-box .ts-target {
  text-shadow: 5px 5px 0px #ff9800;
  color: #0d6efd;
}
/* =========================================
  4. ネオン発光（グローエフェクト）
  ズレを「0」にして、ぼかした影を複数重ねる！
  ※見えやすいように箱の背景色を暗くします
  ========================================= */
#ts-neon:checked ~ .ts-box {
  background-color: #212529;
}
#ts-neon:checked ~ .ts-box .ts-target {
  color: #ffffff;
  text-shadow: 
  0 0 10px #0dcaf0, 
  0 0 20px #0dcaf0, 
  0 0 40px #0dcaf0;
}
/* =========================================
  5. 縁取り（アウトライン）
  右上、右下、左下、左上に1pxのくっきりした影を配置する裏技
  ========================================= */
#ts-border:checked ~ .ts-box .ts-target {
  color: #ffffff;
  text-shadow: 
  2px 2px 0px #dc3545,
  -2px 2px 0px #dc3545,
  2px -2px 0px #dc3545,
  -2px -2px 0px #dc3545;
}