MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペ！おしゃれな文字装飾・フォントデザイン16選

【HTML/CSS】コピペ！おしゃれな文字装飾・フォントデザイン16選

CSS
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なおしゃれな文字装飾・フォントデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

ベーシック・実用（ブログ本文・強調用）

記事の可読性を高め、読者の目を止めるための最も実用的で検索されやすい基本的な装飾です。

ここでは、以下のベーシック・実用（ブログ本文・強調用）のデザイン例を記載しています。

ベーシック・実用（ブログ本文・強調用）
  • 蛍光ペン風マーカー線
  • アンダーライン（下線）のカスタマイズ
  • インライン・ラベル風テキスト
  • 文字詰め（カーニング）と行間調整

実際のデザインプレビューとHTML＆CSSコードを記載しています。

蛍光ペン風マーカー線

ブログ記事のテキスト装飾において、最も利用頻度が高く、読者の視線を誘導するのに効果的な王道のデザインです。

これは通常のテキストです。重要な部分に細めの黄色マーカーを引いて目立たせます。

これは通常のテキストです。絶対に読んでほしい箇所には太めのピンクマーカーが効果的です。

これは通常のテキストです。PC環境でマウスを乗せると線が引かれるブルーマーカーです。

HTMLコード表示
<div class="cs-marker-wrapper">
    <p>
        これは通常のテキストです。重要な部分に<span class="cs-marker-thin">細めの黄色マーカー</span>を引いて目立たせます。
    </p>

    <p>
        これは通常のテキストです。絶対に読んでほしい箇所には<span class="cs-marker-thick">太めのピンクマーカー</span>が効果的です。
    </p>

    <p>
        これは通常のテキストです。PC環境で<span class="cs-marker-ani">マウスを乗せると線が引かれるブルーマーカー</span>です。
    </p>
</div>
CSSコード表示
/* =========================================
   共通設定（段落の余白など）
========================================= */
.cs-marker-wrapper p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2em;
    color: #333333;
}

/* =========================================
   1. 細めのマーカー（下半分）
========================================= */
.cs-marker-thin {
    /* 上から60%は透明(transparent)、残り40%を黄色(#fef08a)で塗りつぶす。
       この比率を変えることで線の太さを自由に調整できます。
    */
    background: linear-gradient(transparent 60%, #fef08a 60%);
    font-weight: bold; /* マーカー部分は太字にするのが一般的 */
}

/* =========================================
   2. 太めのマーカー（全体）
========================================= */
.cs-marker-thick {
    /* 上から10%だけ透明にし、ほぼ全体をピンク(#fbcfe8)で塗りつぶす。
       息苦しくならないよう、文字の上部に少しだけ余白を残すのがポイントです。
    */
    background: linear-gradient(transparent 10%, #fbcfe8 10%);
    font-weight: bold;
}

/* =========================================
   3. ホバーで引かれるアニメーションマーカー
========================================= */
.cs-marker-ani {
    /* 色の設定（下半分をブルーに） */
    background: linear-gradient(transparent 60%, #bae6fd 60%);
    
    /* ▼ アニメーションのための必須設定 ▼ */
    background-repeat: no-repeat;
    background-position: left bottom; /* 左下を起点に線を伸ばす */
    background-size: 0% 100%;         /* 初期状態は幅0%（見えない状態） */
    
    /* 0.4秒かけて滑らかに幅を広げるイージング */
    transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    
    font-weight: bold;
    cursor: pointer; /* マウスを乗せられることを示す */
}

/* ホバー時に背景サイズの幅を100%にする */
.cs-marker-ani:hover {
    background-size: 100% 100%;
}

アンダーライン（下線）のカスタマイズ

かつてCSSの下線といえば、標準のtext-decoration: underline;か、微調整のためにborder-bottomを使うのが主流でした。

現代のCSSでは、文字と下線の距離を細かくコントロールできるプロパティが追加され、表現の幅が広がっています。

これは通常のテキストです。重要な部分に波線（ウェーブ）の下線を引いておしゃれに強調します。

これは通常のテキストです。リンクやボタンに使える左から右へスッと伸びる下線です。

これは通常のテキストです。メニューなどで人気の中央から左右に広がる下線です。

HTMLコード表示
<div class="cs-underline-wrapper">
    <p>
        これは通常のテキストです。重要な部分に<span class="cs-underline-wavy">波線（ウェーブ）の下線</span>を引いておしゃれに強調します。
    </p>

    <p>
        これは通常のテキストです。リンクやボタンに使える<a href="#" class="cs-underline-left">左から右へスッと伸びる下線</a>です。
    </p>

    <p>
        これは通常のテキストです。メニューなどで人気の<a href="#" class="cs-underline-center">中央から左右に広がる下線</a>です。
    </p>
</div>
CSSコード表示
/* =========================================
   共通設定（段落の余白など）
========================================= */
.cs-underline-wrapper p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2em;
    color: #333333;
}

/* =========================================
   1. モダンな波線（wavy）下線
========================================= */
.cs-underline-wavy {
    /* 下線（underline）、波線（wavy）、赤色（#ef4444）を一括指定 */
    text-decoration: underline wavy #ef4444; 
    
    /* ▼ 線の太さを指定するプロパティ ▼ */
    text-decoration-thickness: 2px;          
    
    /* ▼ 文字と下線の「隙間」を空ける魔法のプロパティ ▼ */
    text-underline-offset: 6px;              
    
    font-weight: bold;
}

/* =========================================
   2. 左から右へ伸びるアニメーション下線
========================================= */
.cs-underline-left {
    position: relative;
    text-decoration: none !important; /* デフォルトのブラウザ下線を消す */
    color: #1a202c;
    font-weight: bold;
    display: inline-block; /* 擬似要素の位置基準となるようブロック化 */
}

/* 擬似要素（::after）でオリジナルの下線を描画 */
.cs-underline-left::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* 文字の少し下に配置 */
    width: 100%;
    height: 2px; /* 線の太さ */
    background-color: #2589d0; /* 下線の色 */
    
    /* ▼ ここがポイント：左端（left）を起点に、横幅を0（見えない状態）にする ▼ */
    transform-origin: left;
    transform: scaleX(0);
    
    /* 0.3秒かけてイージングアニメーション */
    transition: transform 0.3s ease-in-out;
}

/* ホバー時に横幅を等倍（1）に戻す */
.cs-underline-left:hover::after {
    transform: scaleX(1);
}

/* =========================================
   3. 中央から外側へ広がるアニメーション下線
========================================= */
.cs-underline-center {
    position: relative;
    text-decoration: none !important;
    color: #1a202c;
    font-weight: bold;
    display: inline-block;
}

.cs-underline-center::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #48bb78; /* 緑色の下線 */
    
    /* ▼ ここがポイント：中央（center）を起点に、横幅を0にする ▼ */
    transform-origin: center;
    transform: scaleX(0);
    
    transition: transform 0.3s ease-in-out;
}

.cs-underline-center:hover::after {
    transform: scaleX(1);
}

インライン・ラベル風テキスト

文章の中で「NEW」や「重要」といったキーワードを、まるで小さなタグやシールを貼ったように目立たせる装飾です。

ブログの更新情報、商品レビューのメリット・デメリット表記、または補足説明（TIPS）などで汎用性が高く、読者の視認性を向上させます。

2026年7月15日に、待望のNEW新機能が追加されました。

ここから解説する内容は、試験に出る重要ポイントなのでメモしておきましょう。

設定画面が開かない場合は、こちらの💡 TIPSを参考にキャッシュを削除してください。

HTMLコード表示
<div class="cs-label-wrapper">
    <p>
        2026年7月15日に、待望の<span class="cs-label-solid">NEW</span>新機能が追加されました。
    </p>

    <p>
        ここから解説する内容は、試験に出る<span class="cs-label-border">重要ポイント</span>なのでメモしておきましょう。
    </p>

    <p>
        設定画面が開かない場合は、こちらの<span class="cs-label-icon">💡 TIPS</span>を参考にキャッシュを削除してください。
    </p>
</div>
CSSコード表示
/* =========================================
   共通設定（段落の余白など）
========================================= */
.cs-label-wrapper p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2em;
    color: #333333;
}

/* =========================================
   1. 基本の塗りつぶしラベル
========================================= */
.cs-label-solid {
    display: inline-block;
    background-color: #ef4444; /* 目立つ赤色 */
    color: #ffffff;
    font-size: 0.8rem; /* 周りの文字より少し小さくする */
    font-weight: 700;
    line-height: 1; /* 行高をリセットしてレイアウト崩れを防ぐ */
    padding: 4px 8px; /* 内側の余白（上下・左右） */
    border-radius: 4px; /* ほんのり角丸 */
    margin: 0 4px; /* ラベルの左右に少しだけ隙間を空ける */
    
    /* ▼ 文字の垂直位置を微調整して、親要素のテキストと揃える ▼ */
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* =========================================
   2. 枠線のみのラベル（ボーダー）
========================================= */
.cs-label-border {
    display: inline-block;
    background-color: transparent;
    color: #2589d0; /* 文字色を枠線と同じ青色に */
    border: 1px solid #2589d0; /* 青い枠線 */
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 8px; /* 枠線の分、少しpaddingを減らす */
    border-radius: 20px; /* 角を完全に丸くしてピル型（カプセル風）に */
    margin: 0 4px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

/* =========================================
   3. アイコン＋背景色のラベル
========================================= */
.cs-label-icon {
    display: inline-block;
    background-color: #fef08a; /* 優しい黄色の背景 */
    color: #713f12; /* 文字は少し暗めの茶色で読みやすく */
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 4px;
    margin: 0 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ほんの少しだけ影をつけてシールっぽく */
}

文字詰め（カーニング）と行間調整

例えば、SEOを意識した技術記事において、読者の「滞在時間」を伸ばし「離脱率」を下げるため、派手な装飾以上に「長文をストレスなく読ませる文字の余白設計」が重要です。

【デフォルト設定】調整なし
「カッコ」や、句読点の隙間が空きすぎます。

一般的なブラウザの初期設定では、日本語のベタ打ちテキストは行間が詰まって見えたり、逆に「カッコ」や（丸カッコ）、句読点の周りに不自然な余白ができたりして、長文になるほど読者の視線の移動に負担をかけてしまいます。

【最適化】プロの文字詰め・行間
「カッコ」や、句読点の隙間が美しく詰まります。

CSSでカーニング（palt）を有効にし、適切な文字の間隔（letter-spacing）と行間（line-height）を設定しました。不自然な余白が消え、視線がスムーズに流れるため、70記事以上のコンテンツが蓄積されたブログでも、読者が疲れずに回遊しやすくなります。

HTMLコード表示
<div class="cs-typography-wrapper">

    <div class="cs-type-box">
        <span class="cs-type-label">【デフォルト設定】調整なし</span>
        <div class="cs-type-heading-default">「カッコ」や、句読点の隙間が空きすぎます。</div>
        <p class="cs-type-text-default">
            一般的なブラウザの初期設定では、日本語のベタ打ちテキストは行間が詰まって見えたり、逆に「カッコ」や（丸カッコ）、句読点の周りに不自然な余白ができたりして、長文になるほど読者の視線の移動に負担をかけてしまいます。
        </p>
    </div>

    <div class="cs-type-box">
        <span class="cs-type-label cs-label-good">【最適化】プロの文字詰め・行間</span>
        <div class="cs-type-heading-opt">「カッコ」や、句読点の隙間が美しく詰まります。</div>
        <p class="cs-type-text-opt">
            CSSでカーニング（palt）を有効にし、適切な文字の間隔（letter-spacing）と行間（line-height）を設定しました。不自然な余白が消え、視線がスムーズに流れるため、70記事以上のコンテンツが蓄積されたブログでも、読者が疲れずに回遊しやすくなります。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通の枠組み（比較用）
========================================= */
.cs-typography-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-type-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 24px;
}

.cs-type-label {
    display: inline-block;
    background-color: #64748b;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.cs-label-good {
    background-color: #2589d0;
}

/* =========================================
   1. デフォルト設定（ブラウザ標準に近い状態）
========================================= */
.cs-type-heading-default {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2; /* 見出しとしては少し窮屈 */
    margin-bottom: 16px;
}

.cs-type-text-default {
    font-size: 1rem;
    line-height: 1.5; /* 日本語の長文としては行間が狭い */
    color: #333333;
    margin: 0;
}

/* =========================================
   2. 最適化された設定（ここが魔法のコード）
========================================= */
.cs-type-heading-opt {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 16px;
    
    /* ▼ 見出し用の黄金比設定 ▼ */
    font-feature-settings: "palt"; /* 日本語の自動プロポーショナル文字詰め */
    letter-spacing: 0.03em;        /* 見出しは少しだけ字間を開ける */
    line-height: 1.4;              /* 見出しに最適な行間 */
}

.cs-type-text-opt {
    font-size: 1rem;
    color: #334155;
    margin: 0;
    
    /* ▼ 本文（長文）用の黄金比設定 ▼ */
    font-feature-settings: "palt"; /* カッコや句読点の余白を詰める */
    letter-spacing: 0.05em;        /* paltで詰まった分、全体に均等な余白を持たせる */
    line-height: 1.8;              /* 長文が最も読みやすいとされる行間（1.75〜1.9） */
    text-align: justify;           /* 両端揃え（右側のガタつきを無くす） */
}

立体感・影・発光（アイキャッチ・タイトル用）

text-shadowプロパティを極めるカテゴリーです。

画像を使わずにテキストだけでインパクトを出します。

ここでは、以下の立体感・影・発光（アイキャッチ・タイトル用）のデザイン例を記載しています。

立体感・影・発光（アイキャッチ・タイトル用）
  • 美しいドロップシャドウ
  • レトロな3D立体文字
  • ネオンサイン風の発光テキスト
  • 活版印刷風（エンボス・刻印）文字

実際のデザインプレビューとHTML＆CSSコードを記載しています。

美しいドロップシャドウ

ドロップシャドウの良さは、平面的な文字を立体的に表現できる点です。

サイト内のちょっとしたアクセントに最適です。

Soft Modern

透明度を下げ、ぼかし（Blur）を大きく広げた現代的で上品なシャドウ。

Solid & Pop

ぼかしを0にし、少しだけズラしたポップで力強いシャドウ。

Multi Layered

複数の影を重ねることで、文字が空間に浮いているようなリアルな奥行きを表現。

HTMLコード表示
<div class="cs-shadow-wrapper">
    
    <div class="cs-shadow-box">
        <div class="cs-shadow-soft">Soft Modern</div>
        <p class="cs-shadow-text">
            透明度を下げ、ぼかし（Blur）を大きく広げた現代的で上品なシャドウ。
        </p>
    </div>

    <div class="cs-shadow-box">
        <div class="cs-shadow-solid">Solid & Pop</div>
        <p class="cs-shadow-text">
            ぼかしを0にし、少しだけズラしたポップで力強いシャドウ。
        </p>
    </div>

    <div class="cs-shadow-box">
        <div class="cs-shadow-multi">Multi Layered</div>
        <p class="cs-shadow-text">
            複数の影を重ねることで、文字が空間に浮いているようなリアルな奥行きを表現。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（余白やフォントサイズのベース）
========================================= */
.cs-shadow-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-shadow-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    text-align: center;
}

.cs-shadow-text {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 16px 0 0;
    line-height: 1.6;
}

/* =========================================
   1. ふんわりモダン（柔らかい影）
========================================= */
.cs-shadow-soft {
    /* hタグを使わずに、見出し相当のインパクトを出すスタイル */
    font-size: 3.5rem;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.2;
    
    /* ▼ Y軸に大きく落とし、ぼかしを強く、色は極限まで薄く ▼ */
    text-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

/* =========================================
   2. ソリッド・ポップ（くっきりした影）
========================================= */
.cs-shadow-solid {
    font-size: 3.5rem;
    font-weight: 900;
    color: #2589d0;
    line-height: 1.2;
    letter-spacing: 0.05em;
    
    /* ▼ ぼかし（3つ目の数値）を「0」にしてパキッとさせる ▼ */
    text-shadow: 5px 5px 0px #bae6fd;
}

/* =========================================
   3. マルチレイヤー（多重シャドウ）
========================================= */
.cs-shadow-multi {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff; /* 文字そのものは白 */
    line-height: 1.2;
    
    /* ▼ カンマ区切りで徐々に広がる影を何層も重ねる ▼ */
    text-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.2),
        0px 6px 12px rgba(0, 0, 0, 0.15),
        0px 12px 24px rgba(0, 0, 0, 0.1),
        0px 24px 48px rgba(0, 0, 0, 0.05);
}

/* =========================================
   レスポンシブ対応（スマホ表示時の文字サイズ調整）
========================================= */
@media screen and (max-width: 640px) {
    .cs-shadow-soft,
    .cs-shadow-solid,
    .cs-shadow-multi {
        font-size: 2.2rem;
    }
}

レトロな3D立体文字

80年代のアーケードゲームやアメコミ風のポップなデザインでよく見かける「厚みのある立体（ブロック）文字」は、実はCSSのtext-shadowだけで作ることができます。

ARCADE

1pxずつ色をずらして重ねることで、ソリッドな厚み（ブロック）を作る定番の表現です。

SYNTHWAVE

斜め下に向かって長く伸びるブロック影と、鮮やかなピンク×パープルの配色。

POP COMIC

文字の縁取り（text-stroke）と3Dブロックを組み合わせた、ステッカーのような表現。

HTMLコード表示
<div class="cs-retro-wrapper">

    <div class="cs-retro-box">
        <div class="cs-retro-arcade">ARCADE</div>
        <p class="cs-retro-text">
            1pxずつ色をずらして重ねることで、ソリッドな厚み（ブロック）を作る定番の表現です。
        </p>
    </div>

    <div class="cs-retro-box">
        <div class="cs-retro-synth">SYNTHWAVE</div>
        <p class="cs-retro-text">
            斜め下に向かって長く伸びるブロック影と、鮮やかなピンク×パープルの配色。
        </p>
    </div>

    <div class="cs-retro-box">
        <div class="cs-retro-comic">POP COMIC</div>
        <p class="cs-retro-text">
            文字の縁取り（text-stroke）と3Dブロックを組み合わせた、ステッカーのような表現。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（余白やフォントサイズのベース）
========================================= */
.cs-retro-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-retro-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px 24px;
    margin-bottom: 24px;
    text-align: center;
    overflow: hidden; /* 長い影がはみ出すのを防ぐ */
}

.cs-retro-text {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 24px 0 0;
    line-height: 1.6;
}

/* =========================================
   1. アーケード風（イエロー文字 ＋ オレンジブロック）
========================================= */
.cs-retro-arcade {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fcd34d; /* 鮮やかなイエロー */
    line-height: 1.1;
    letter-spacing: 0.05em;
    font-family: 'Arial Black', sans-serif; /* レトロ感のある太いフォントを推奨 */

    /* ▼ ぼかし「0」の影を1pxずつズラして重ねる ▼ */
    text-shadow: 
        1px 1px 0px #d97706,
        2px 2px 0px #d97706,
        3px 3px 0px #d97706,
        4px 4px 0px #d97706,
        5px 5px 0px #d97706,
        6px 6px 0px #d97706,
        7px 7px 10px rgba(0,0,0,0.3); /* 最後に本物のドロップシャドウを落とす */
}

/* =========================================
   2. シンセウェイヴ風（ピンク文字 ＋ パープルブロック）
========================================= */
.cs-retro-synth {
    font-size: 3.5rem;
    font-weight: 900;
    color: #f472b6; /* ネオンピンク */
    line-height: 1.1;
    letter-spacing: 0.08em;
    font-family: 'Impact', sans-serif; /* 縦長のゴツいフォントと相性抜群 */

    /* ▼ 影を10pxまで長く伸ばし、より深い立体感を出す ▼ */
    text-shadow: 
        1px 1px 0px #7c3aed,
        2px 2px 0px #7c3aed,
        3px 3px 0px #7c3aed,
        4px 4px 0px #7c3aed,
        5px 5px 0px #7c3aed,
        6px 6px 0px #7c3aed,
        7px 7px 0px #7c3aed,
        8px 8px 0px #7c3aed,
        9px 9px 0px #7c3aed,
        10px 10px 0px #7c3aed,
        12px 12px 15px rgba(124, 58, 237, 0.4); /* 最後はパープルの光る影 */
}

/* =========================================
   3. アメコミ・ポップ風（白文字 ＋ 黒縁 ＋ シアンブロック）
========================================= */
.cs-retro-comic {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: 0.02em;
    font-family: 'Arial Black', sans-serif;
    
    /* ▼ 文字の周りに黒い縁取りをつける ▼ */
    -webkit-text-stroke: 2px #1e293b;

    /* ▼ 黒縁のさらに外側に、シアン（水色）の立体ブロックを作る ▼ */
    text-shadow: 
        1px 1px 0px #06b6d4,
        2px 2px 0px #06b6d4,
        3px 3px 0px #06b6d4,
        4px 4px 0px #06b6d4,
        5px 5px 0px #06b6d4,
        6px 6px 0px #06b6d4,
        7px 7px 0px #1e293b; /* ブロックの底面を黒にしてさらに引き締める */
}

/* =========================================
   レスポンシブ対応（スマホ表示時の文字サイズ調整）
========================================= */
@media screen and (max-width: 640px) {
    .cs-retro-arcade,
    .cs-retro-synth,
    .cs-retro-comic {
        font-size: 2.2rem;
    }
}

ネオンサイン風の発光テキスト

サイバーパンク風のデザインやゲーミング関連、あるいは夜の雰囲気を演出したい時に絶大なインパクトを放つ装飾です。

NEON SIGN

芯となる白く細い影の外側に、ピンクのぼかしを何層にも重ねて発光させています。

CYBER PUNK

ネオン管の接触不良のような「チカチカ」とした点滅をCSSアニメーションで再現。

Ambient Glow

影の広がりを抑え、透明度を高くすることで、間接照明のような上品な光を作ります。

HTMLコード表示
<div class="cs-neon-wrapper">

    <div class="cs-neon-box">
        <div class="cs-neon-pink">NEON SIGN</div>
        <p class="cs-neon-text">
            芯となる白く細い影の外側に、ピンクのぼかしを何層にも重ねて発光させています。
        </p>
    </div>

    <div class="cs-neon-box">
        <div class="cs-neon-flicker">CYBER PUNK</div>
        <p class="cs-neon-text">
            ネオン管の接触不良のような「チカチカ」とした点滅をCSSアニメーションで再現。
        </p>
    </div>

    <div class="cs-neon-box">
        <div class="cs-neon-ambient">Ambient Glow</div>
        <p class="cs-neon-text">
            影の広がりを抑え、透明度を高くすることで、間接照明のような上品な光を作ります。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（ネオンが映えるダーク背景）
========================================= */
.cs-neon-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

/* 発光を際立たせるため、親のボックスを暗くする */
.cs-neon-box {
    background-color: #0f172a; /* 深いネイビー/ブラック */
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 40px 24px;
    margin-bottom: 24px;
    text-align: center;
}

.cs-neon-text {
    font-size: 0.95rem;
    color: #94a3b8; /* テキストも少し暗めに */
    margin: 24px 0 0;
    line-height: 1.6;
}

/* =========================================
   1. クラシック・ピンク（王道のネオン発光）
========================================= */
.cs-neon-pink {
    font-size: 3.5rem;
    font-weight: 400; /* ネオン管は細い方がリアルに見えるためNormal推奨 */
    color: #ffffff; /* 文字の芯は必ず白にする */
    line-height: 1.1;
    letter-spacing: 0.1em;
    font-family: 'Arial', sans-serif;
    
    /* ▼ 内側の白い光と、外側のピンクの光を重ねる ▼ */
    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ffffff,
        0 0 20px #ec4899,
        0 0 40px #ec4899,
        0 0 80px #ec4899,
        0 0 120px #ec4899;
}

/* =========================================
   2. サイバー・ブルー（点滅アニメーション）
========================================= */
.cs-neon-flicker {
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: 0.1em;
    
    /* 3秒ループで点滅アニメーションを呼び出す */
    animation: cs-flicker-anim 3s infinite alternate;
}

/* 点滅のタイミング設定（わざと不規則にしてリアルにする） */
@keyframes cs-flicker-anim {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        /* 点灯状態（シアンブルーの発光） */
        text-shadow:
            0 0 5px #ffffff,
            0 0 10px #ffffff,
            0 0 20px #06b6d4,
            0 0 40px #06b6d4,
            0 0 80px #06b6d4;
        color: #ffffff;
    }
    20%, 24%, 55% {
        /* 消灯状態（光を消し、文字色も暗くする） */
        text-shadow: none;
        color: #334155;
    }
}

/* =========================================
   3. アンビエント・ゴールド（柔らかな発光）
========================================= */
.cs-neon-ambient {
    font-size: 3.5rem;
    font-weight: 300; /* より細いフォントで上品に */
    color: #fef08a; /* 芯の色も少し黄色がからせる */
    line-height: 1.1;
    letter-spacing: 0.05em;
    
    /* rgbaを使って透明度を下げ、ふんわりと光らせる */
    text-shadow: 
        0 0 10px rgba(250, 204, 21, 0.8),
        0 0 30px rgba(250, 204, 21, 0.4),
        0 0 60px rgba(250, 204, 21, 0.2);
}

/* =========================================
   レスポンシブ対応（スマホ表示時の文字サイズ調整）
========================================= */
@media screen and (max-width: 640px) {
    .cs-neon-pink,
    .cs-neon-flicker,
    .cs-neon-ambient {
        font-size: 2.2rem;
    }
}

活版印刷風（エンボス・刻印）文字

名刺や高級ブランドのWebサイトなどで使われる、非常に上品で洗練された表現です。

LETTERPRESS

背景より少し暗い文字色に対し、左上に暗い影、右下に明るい影を落として「へこみ」を表現。

EMBOSSED TEXT

影の方向を逆（左上が明るい、右下が暗い）にすることで、紙から「浮き出た」ような立体感に。

HEAVY METAL

暗い背景に対して、くっきりとした白いハイライトと深い黒のシャドウを使い、硬質な質感を表現。

HTMLコード表示
<div class="cs-press-wrapper">

    <div class="cs-press-box cs-bg-light">
        <div class="cs-press-engraved">LETTERPRESS</div>
        <p class="cs-press-text">
            背景より少し暗い文字色に対し、左上に暗い影、右下に明るい影を落として「へこみ」を表現。
        </p>
    </div>

    <div class="cs-press-box cs-bg-light">
        <div class="cs-press-emboss">EMBOSSED TEXT</div>
        <p class="cs-press-text">
            影の方向を逆（左上が明るい、右下が暗い）にすることで、紙から「浮き出た」ような立体感に。
        </p>
    </div>

    <div class="cs-press-box cs-bg-dark">
        <div class="cs-press-metal">HEAVY METAL</div>
        <p class="cs-press-text cs-text-light">
            暗い背景に対して、くっきりとした白いハイライトと深い黒のシャドウを使い、硬質な質感を表現。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（背景色が重要になるためボックスに色を指定）
========================================= */
.cs-press-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-press-box {
    border-radius: 12px;
    padding: 40px 24px;
    margin-bottom: 24px;
    text-align: center;
}

/* 1と2の背景（やや明るめのグレー。真っ白だとハイライトが見えないため） */
.cs-bg-light {
    background-color: #e2e8f0; 
}

/* 3の背景（ダークグレー） */
.cs-bg-dark {
    background-color: #334155;
}

.cs-press-text {
    font-size: 0.95rem;
    color: #475569;
    margin: 24px 0 0;
    line-height: 1.6;
}
.cs-text-light {
    color: #94a3b8;
}

/* =========================================
   1. クラシック・レタープレス（刻印・へこみ）
========================================= */
.cs-press-engraved {
    font-size: 3.5rem;
    font-weight: 800;
    /* ▼ 文字色は「背景より少しだけ暗い色」にする ▼ */
    color: #cbd5e1; 
    line-height: 1.1;
    letter-spacing: 0.05em;
    
    /* ▼ 左上（マイナス座標）に暗い影、右下（プラス座標）に明るい影 ▼ */
    text-shadow: 
        -1px -1px 1px rgba(0, 0, 0, 0.2),  /* 落ちくぼんだ影 */
        1px 1px 1px rgba(255, 255, 255, 0.8); /* フチに当たる光 */
}

/* =========================================
   2. エンボス（浮き出し）
========================================= */
.cs-press-emboss {
    font-size: 3.5rem;
    font-weight: 800;
    color: #cbd5e1; 
    line-height: 1.1;
    letter-spacing: 0.05em;
    
    /* ▼ レタープレスと逆。左上に明るい影、右下に暗い影 ▼ */
    text-shadow: 
        -1px -1px 1px rgba(255, 255, 255, 0.8), /* 出っ張りに当たる光 */
        1px 1px 2px rgba(0, 0, 0, 0.2);         /* 出っ張りが落とす影 */
}

/* =========================================
   3. メタル・インプリント（金属的な鋭い刻印）
========================================= */
.cs-press-metal {
    font-size: 3.5rem;
    font-weight: 900;
    /* ▼ 暗い背景より少しだけ暗い文字色 ▼ */
    color: #1e293b; 
    line-height: 1.1;
    letter-spacing: 0.08em;
    
    /* コントラストを強めにし、ぼかしを0にして鋭さを出す */
    text-shadow: 
        -1px -1px 0px rgba(0, 0, 0, 0.8),
        1px 1px 0px rgba(255, 255, 255, 0.3);
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-press-engraved,
    .cs-press-emboss,
    .cs-press-metal {
        font-size: 2.2rem;
    }
}

グラデーション・切り抜き（モダン・トレンド）

background-clip: textなどを活用した、近年のWebデザインでよく見るリッチな表現です。

ここでは、以下のグラデーション・切り抜き（モダン・トレンド）のデザイン例を記載しています。

グラデーション・切り抜き（モダン・トレンド）
  • グラデーションテキスト
  • 動くオーロラ・グラデーション
  • テキストのアウトライン（縁取り・白抜き文字）
  • 画像マスク（写真切り抜き文字）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

グラデーションテキスト

SaaS系のサービスサイトやモダンなLPのファーストビューで最も使われているのが、文字自体をグラデーションで染め上げる表現です。

Ocean Blue

ブルーからエメラルドグリーンへ抜ける、IT・テック系で最も人気のある王道グラデーション。

Sunset Sunset

オレンジ、ピンク、パープルの3色を斜め（45度）にブレンドした、華やかでエモーショナルな配色。

Cosmic Core

中央から外側に向かって円形に広がるグラデーション。文字の中心が発光しているように見せます。

HTMLコード表示
<div class="cs-grad-wrapper">

    <div class="cs-grad-box">
        <div class="cs-grad-linear">Ocean Blue</div>
        <p class="cs-grad-text">
            ブルーからエメラルドグリーンへ抜ける、IT・テック系で最も人気のある王道グラデーション。
        </p>
    </div>

    <div class="cs-grad-box">
        <div class="cs-grad-multi">Sunset Sunset</div>
        <p class="cs-grad-text">
            オレンジ、ピンク、パープルの3色を斜め（45度）にブレンドした、華やかでエモーショナルな配色。
        </p>
    </div>

    <div class="cs-grad-box">
        <div class="cs-grad-radial">Cosmic Core</div>
        <p class="cs-grad-text">
            中央から外側に向かって円形に広がるグラデーション。文字の中心が発光しているように見せます。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（余白やフォントサイズのベース）
========================================= */
.cs-grad-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-grad-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    margin-bottom: 24px;
    text-align: center;
}

.cs-grad-text {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 24px 0 0;
    line-height: 1.6;
}

/* =========================================
   ここからグラデーション文字の個別設定
   ※ background → clip → color の順番が絶対です！
========================================= */

/* ▼ 1. 王道リニア（2色・左から右） ▼ */
.cs-grad-linear {
    display: inline-block;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
    
    /* 1. まず背景色をベタ塗りする */
    background: linear-gradient(to right, #3b82f6, #14b8a6);
    
    /* 2. 背景をテキストの形で切り抜く */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. 文字そのものの色を透明にする */
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ▼ 2. マルチカラー・アングル（3色・斜め） ▼ */
.cs-grad-multi {
    display: inline-block;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
    
    background: linear-gradient(45deg, #f59e0b, #ec4899, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ▼ 3. ラジアル（円形・放射状） ▼ */
.cs-grad-radial {
    display: inline-block;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
    
    background: radial-gradient(circle at center, #ffffff 0%, #8b5cf6 40%, #1e1b4b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* 影をつける場合はドロップシャドウ */
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1));
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-grad-linear,
    .cs-grad-multi,
    .cs-grad-radial {
        font-size: 2.2rem;
    }
}

動くオーロラ・グラデーション

「背景を文字で切り抜く（clip）」手法を応用し、そこにCSSアニメーションを加えることで、色がゆらゆらと変化し続ける幻想的なエフェクトを実現します。

AURORA GLOW

背景のグラデーションサイズを大きくし、アニメーションで位置（position）を動かすことで、オーロラのように色が移り変わる幻想的なテキストを表現します。

HTMLコード表示
<div class="cs-aurora-wrapper">
    <div class="cs-aurora-box">
        <div class="cs-aurora-text">AURORA GLOW</div>
        <p class="cs-aurora-desc">
            背景のグラデーションサイズを大きくし、アニメーションで位置（position）を動かすことで、オーロラのように色が移り変わる幻想的なテキストを表現します。
        </p>
    </div>
</div>
CSSコード表示
/* =========================================
   共通設定
========================================= */
.cs-aurora-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-aurora-box {
    /* オーロラの色が映えるように背景はダークカラーに設定 */
    background-color: #0f172a; 
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 60px 24px;
    text-align: center;
}

.cs-aurora-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 24px 0 0;
    line-height: 1.6;
}

/* =========================================
   動くオーロラテキストの本体
========================================= */
.cs-aurora-text {
    display: inline-block;
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-family: 'Arial Black', sans-serif;
    
    /* 1. オーロラ風のグラデーション背景を指定（斜め45度） */
    background: linear-gradient(
        -45deg,
        #4ade80, /* グリーン */
        #3b82f6, /* ブルー */
        #8b5cf6, /* パープル */
        #ec4899  /* ピンク */
    );
    
    /* 2. ▼ここが重要▼ 背景サイズを3倍に拡大し、動かすための「余白」を作る */
    background-size: 300% 300%;
    
    /* 3. アニメーションの呼び出し（8秒かけて無限ループ） */
    animation: cs-aurora-move 8s ease infinite;

    /* 4. 背景を文字で切り抜き、文字自体を透明にする */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* =========================================
   グラデーションを動かすキーフレーム
========================================= */
@keyframes cs-aurora-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-aurora-text {
        font-size: 2.5rem;
    }
}

テキストのアウトライン（縁取り・白抜き文字）

文字の中身（塗り）を透明にし、外枠の線だけを残す「白抜きスタイル」は、背景の画像やグラデーションを邪魔せずに大きなタイポグラフィを配置できるため、現在のWebデザインで重宝されているテクニックです。

HOLLOW TEXT

中身を透明にし、外枠だけを残した最もシンプルで洗練されたスタイル。

POP OUTLINE

透明な文字の背後に、あえて単色のベタ塗り影（text-shadow）を落としたポップな表現。

GLOWING

細いアウトラインにぼかし影を組み合わせることで、繊細なネオンサインのように発光させます。

HTMLコード表示
<div class="cs-outline-wrapper">

    <div class="cs-outline-box">
        <div class="cs-outline-minimal">HOLLOW TEXT</div>
        <p class="cs-outline-desc">
            中身を透明にし、外枠だけを残した最もシンプルで洗練されたスタイル。
        </p>
    </div>

    <div class="cs-outline-box">
        <div class="cs-outline-offset">POP OUTLINE</div>
        <p class="cs-outline-desc">
            透明な文字の背後に、あえて単色のベタ塗り影（text-shadow）を落としたポップな表現。
        </p>
    </div>

    <div class="cs-outline-box cs-bg-dark">
        <div class="cs-outline-neon">GLOWING</div>
        <p class="cs-outline-desc cs-text-light">
            細いアウトラインにぼかし影を組み合わせることで、繊細なネオンサインのように発光させます。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（余白やフォントサイズのベース）
========================================= */
.cs-outline-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-outline-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    margin-bottom: 24px;
    text-align: center;
}

/* 3のネオン用ダーク背景 */
.cs-bg-dark {
    background-color: #0f172a;
    border-color: #1e293b;
}

.cs-outline-desc {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 24px 0 0;
    line-height: 1.6;
}
.cs-text-light {
    color: #94a3b8;
}

/* =========================================
   1. ミニマル・アウトライン（基本の白抜き）
========================================= */
.cs-outline-minimal {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.05em;
    font-family: 'Arial Black', sans-serif; /* アウトラインは太いフォントが推奨されます */
    
    /* ▼ 文字色を透明にし、線の太さと色を指定する ▼ */
    color: transparent;
    -webkit-text-stroke: 2px #1a202c; /* 2pxの黒い縁取り */
}

/* =========================================
   2. オフセット・ポップ（縁取り＋ズレ影）
========================================= */
.cs-outline-offset {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.05em;
    font-family: 'Arial Black', sans-serif;
    
    /* 文字色を透明にし、ブルーのアウトラインを描画 */
    color: transparent;
    -webkit-text-stroke: 2px #2589d0;
    
    /* ▼ 背景に単色のドロップシャドウを落としてポップに仕上げる ▼ */
    text-shadow: 6px 6px 0px #bae6fd;
}

/* =========================================
   3. ネオン・グロウ（光る縁取り）
========================================= */
.cs-outline-neon {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.08em;
    font-family: 'Arial Black', sans-serif;
    
    /* 文字を透明にし、細めの明るいグリーンの線を引く */
    color: transparent;
    -webkit-text-stroke: 1px #4ade80;
    
    /* ▼ アウトラインの周囲をぼかして発光させる ▼ */
    text-shadow: 
        0 0 10px rgba(74, 222, 128, 0.6),
        0 0 20px rgba(74, 222, 128, 0.4);
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-outline-minimal,
    .cs-outline-offset,
    .cs-outline-neon {
        font-size: 2.5rem;
    }
}

画像マスク（写真切り抜き文字）

グラデーションを応用し、文字の背景に「写真（画像）」を敷いて切り抜く、インパクト抜群のエディトリアル（雑誌風）デザインです。

Appleの公式サイトなどでもよく見られる、ファーストビューでユーザーの視線を釘付けにする強力な表現です。

NATURE

美しい風景写真を文字の形に切り抜いた王道のスタイル。太いフォントを使うことで写真のディテールが伝わります。

CITYSCAPE

背景画像を画面に対して固定（fixed）することで、スクロールした時に文字の中の景色が取り残される視差効果を生み出します。

UNIVERSE

文字の中で画像がゆっくりと横にスライドし続ける、動画を使わずにリッチな動きを表現するテクニックです。

HTMLコード表示
<div class="cs-mask-wrapper">

    <div class="cs-mask-box">
        <div class="cs-mask-static">NATURE</div>
        <p class="cs-mask-desc">
            美しい風景写真を文字の形に切り抜いた王道のスタイル。太いフォントを使うことで写真のディテールが伝わります。
        </p>
    </div>

    <div class="cs-mask-box">
        <div class="cs-mask-fixed">CITYSCAPE</div>
        <p class="cs-mask-desc">
            背景画像を画面に対して固定（fixed）することで、スクロールした時に文字の中の景色が取り残される視差効果を生み出します。
        </p>
    </div>

    <div class="cs-mask-box">
        <div class="cs-mask-pan">UNIVERSE</div>
        <p class="cs-mask-desc">
            文字の中で画像がゆっくりと横にスライドし続ける、動画を使わずにリッチな動きを表現するテクニックです。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（余白やフォントサイズのベース）
========================================= */
.cs-mask-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-mask-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 60px 24px;
    margin-bottom: 24px;
    text-align: center;
}

.cs-mask-desc {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 24px 0 0;
    line-height: 1.6;
}

/* 共通：切り抜きテキストのベース設定 */
.cs-mask-static,
.cs-mask-fixed,
.cs-mask-pan {
    display: inline-block;
    font-size: 4.5rem; /* 写真を見せるために極端に大きく */
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.05em;
    font-family: 'Arial Black', Impact, sans-serif; /* 最も太いフォントを指定 */
    
    /* ▼ 背景を文字の形で切り抜く魔法のプロパティ ▼ */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* =========================================
   1. スタンダード・マスク（静止画）
========================================= */
.cs-mask-static {
    /* 絶景の写真を背景に指定 */
    background-image: url('https://picsum.photos/id/1015/800/400');
    background-size: cover;
    background-position: center;
}

/* =========================================
   2. パララックス・マスク（背景固定）
========================================= */
.cs-mask-fixed {
    /* 都会の写真を背景に指定 */
    background-image: url('https://picsum.photos/id/1043/800/400');
    background-size: cover;
    background-position: center;
    
    /* ▼ これを追加するだけで、スクロール時に中身だけが止まって見える ▼ */
    background-attachment: fixed;
}

/* =========================================
   3. パノラマ・アニメーション（動く景色）
========================================= */
.cs-mask-pan {
    /* 宇宙や夜空などの写真を指定 */
    background-image: url('https://picsum.photos/id/1022/1000/400');
    
    /* 横に動かすため、サイズを横長（200%）にする */
    background-size: 200% auto;
    
    /* 15秒かけてゆっくり横にスライドさせる */
    animation: cs-mask-move 15s linear infinite;
}

/* 画像を横にスライドさせるアニメーション */
@keyframes cs-mask-move {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================================
   レスポンシブ対応（スマホ表示時の文字サイズ調整）
========================================= */
@media screen and (max-width: 640px) {
    .cs-mask-static,
    .cs-mask-fixed,
    .cs-mask-pan {
        font-size: 3rem; /* スマホでもなるべく大きく */
    }
}

エディトリアル・特殊アニメーション

他のサイトと大きく差別化できる、雑誌風のレイアウトや動きのある特殊な装飾です。

ここでは、以下のグラデーション・切り抜き（モダン・トレンド）のデザイン例を記載しています。

エディトリアル・特殊アニメーション
  • 日本語の縦書き表現（writing-mode）
  • ドロップキャップ（雑誌風）
  • タイプライター風アニメーション
  • グリッチエフェクト（バグ・ノイズ）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

日本語の縦書き表現（writing-mode）

旅館や和食レストラン、伝統工芸などの「和風デザイン」、または雑誌のような「エディトリアルデザイン」を作る際に欠かせないのが縦書きレイアウトです。

基本の縦書き表現

CSSのプロパティを追加するだけで、
横書きのWebページに美しい縦書きの空間を作ることができます。
和風デザインや雑誌風のレイアウトに最適です。

ルビと縦中横の活用

令和れいわ15年のモダンブラウザでは、
英数字を横に並べる「縦中横」や、
ふりがなも完璧に表示可能です。

和風エディトリアル

余白をたっぷりと取り、
文字間隔を広げることで、
詩や短歌のような
情緒あるデザインに。

HTMLコード表示
<div class="cs-vertical-wrapper">

    <div class="cs-vertical-box">
        <div class="cs-vertical-title">基本の縦書き表現</div>
        <p class="cs-vertical-text">
            CSSのプロパティを追加するだけで、<br>横書きのWebページに美しい縦書きの空間を作ることができます。<br>和風デザインや雑誌風のレイアウトに最適です。
        </p>
    </div>

    <div class="cs-vertical-box">
        <div class="cs-vertical-title">ルビと縦中横の活用</div>
        <p class="cs-vertical-text">
            <ruby>令和<rt>れいわ</rt></ruby><span class="cs-tcy">15</span>年のモダンブラウザでは、<br>英数字を横に並べる「縦中横」や、<br>ふりがなも完璧に表示可能です。
        </p>
    </div>

    <div class="cs-vertical-box cs-vertical-center">
        <div class="cs-vertical-title">和風エディトリアル</div>
        <p class="cs-vertical-text">
            余白をたっぷりと取り、<br>
            文字間隔を広げることで、<br>
            詩や短歌のような<br>
            情緒あるデザインに。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（Flexboxを使って右寄せにするのがコツ）
========================================= */
.cs-vertical-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-vertical-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    
    /* ▼ 縦書き要素を右から左へ並べるためのFlex設定 ▼ */
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    min-height: 250px; /* 見栄えを良くするために最低限の高さを確保 */
}

/* 3番目の中央揃えレイアウト用 */
.cs-vertical-center {
    justify-content: center; /* 縦書きのブロックごと中央に配置 */
    background-color: #f1f5f9;
}

/* =========================================
   縦書きタイポグラフィの設定
========================================= */
.cs-vertical-title {
    /* ▼ ここが魔法のコード：縦書き（右から左へ） ▼ */
    writing-mode: vertical-rl;
    
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a202c;
    letter-spacing: 0.1em;
    
    /* 縦書きの場合、隣（左側）の要素との距離は margin-left で調整する */
    margin-left: 32px; 
}

.cs-vertical-text {
    writing-mode: vertical-rl;
    font-size: 1rem;
    color: #4a5568;
    line-height: 2.2; /* 縦書きは行間を広めに取ると美しく見えます */
    letter-spacing: 0.08em;
    margin: 0;
}

/* =========================================
   縦中横（たてちゅうよこ）の設定
========================================= */
.cs-tcy {
    /* ▼ 2桁の英数字を横並びにして1文字分のスペースに収める ▼ */
    text-combine-upright: all;
    /* Safari用のベンダープレフィックス */
    -webkit-text-combine: horizontal;
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-vertical-box {
        padding: 24px;
        min-height: 200px;
    }
    .cs-vertical-title {
        margin-left: 16px;
        font-size: 1.3rem;
    }
}

ドロップキャップ（雑誌風）

海外のファッション誌や新聞、または洗練されたWebメディアの記事冒頭でよく見かける、「段落の最初の1文字だけを大きくして数行にまたがらせる」レイアウトです。

昔々あるところに、Webデザインをこよなく愛するコーダーがいました。彼はCSSの擬似要素を駆使して、まるで海外の雑誌や歴史ある新聞のような美しいレイアウトを、画像を使わずに再現することに成功したのです。

近年では、雑誌だけでなくWebメディアでもこのような装飾が使われています。最初の1文字を四角いブロックで囲んで背景色をつけることで、視覚的なアイキャッチとして機能し、読者の視線を記事の冒頭へと自然に誘導できます。

最新のCSSトレンドを取り入れたスタイルです。最初の1文字を透明にして縁取り（アウトライン）とポップな影を付けることで、重たくなりすぎず、現代的な技術系ブログのデザインにもぴったりとマッチします。

HTMLコード表示
<div class="cs-drop-wrapper">

    <!-- ▼ 1. クラシック・明朝（王道スタイル） ▼ -->
    <div class="cs-drop-box">
        <p class="cs-drop-classic">昔々あるところに、Webデザインをこよなく愛するコーダーがいました。彼はCSSの擬似要素を駆使して、まるで海外の雑誌や歴史ある新聞のような美しいレイアウトを、画像を使わずに再現することに成功したのです。</p>
    </div>

    <!-- ▼ 2. ボックス・ラベル（背景色あり） ▼ -->
    <div class="cs-drop-box">
        <p class="cs-drop-boxed">近年では、雑誌だけでなくWebメディアでもこのような装飾が使われています。最初の1文字を四角いブロックで囲んで背景色をつけることで、視覚的なアイキャッチとして機能し、読者の視線を記事の冒頭へと自然に誘導できます。</p>
    </div>

    <!-- ▼ 3. モダン・アウトライン（トレンド感） ▼ -->
    <div class="cs-drop-box">
        <p class="cs-drop-modern">最新のCSSトレンドを取り入れたスタイルです。最初の1文字を透明にして縁取り（アウトライン）とポップな影を付けることで、重たくなりすぎず、現代的な技術系ブログのデザインにもぴったりとマッチします。</p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定（余白やフォントサイズのベース）
========================================= */
.cs-drop-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-drop-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
}

/* 段落（テキスト）の共通設定 */
.cs-drop-wrapper p {
    font-size: 1rem;
    line-height: 1.8;
    color: #334155;
    margin: 0;
    text-align: justify; /* 両端揃えにして右側のガタつきを無くす（雑誌風の基本） */
}

/* =========================================
   1. クラシック・明朝（王道スタイル）
========================================= */
.cs-drop-classic::first-letter {
    /* ▼ 魔法のコード：最初の1文字を左に浮かせて、後の文字を回り込ませる ▼ */
    float: left;
    
    font-size: 3.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1; /* 余計な上下の余白を消す */
    margin-right: 8px; /* 右側の文字との隙間 */
    margin-bottom: -4px; /* 下の文字との隙間の微調整 */
    
    /* 1文字目だけ明朝体にして高級感を出す */
    font-family: "Yu Mincho", "Noto Serif JP", serif; 
}

/* =========================================
   2. ボックス・ラベル（背景色あり）
========================================= */
.cs-drop-boxed::first-letter {
    float: left;
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    background-color: #2589d0; /* ブルーの背景 */
    line-height: 1;
    padding: 8px 12px; /* 内側に余白をとってボックス化 */
    margin-right: 12px;
    margin-bottom: 4px;
    border-radius: 8px; /* 少し角丸に */
    font-family: 'Arial Black', sans-serif;
}

/* =========================================
   3. モダン・アウトライン（トレンド感）
========================================= */
.cs-drop-modern::first-letter {
    float: left;
    font-size: 4rem;
    font-weight: 900;
    
    /* 文字色を透明にして、ピンクのアウトラインを引く */
    color: transparent;
    -webkit-text-stroke: 2px #ec4899;
    
    line-height: 0.8;
    margin-right: 12px;
    margin-bottom: -8px;
    
    /* ちょっとズラしたポップな影を落とす */
    text-shadow: 4px 4px 0px #fbcfe8;
    font-family: 'Arial Black', sans-serif;
}

タイプライター風アニメーション

ポートフォリオのファーストビューや技術系記事の冒頭（ターミナルのコマンド入力風）などで目を惹く、実用性の高いエフェクトです。

Hello, Web Design World!

ページを開いた時に1度だけ文字が打ち込まれ、最後にカーソルが点滅し続ける定番スタイル。

HTML & CSS Portfolio

文字を打ち終わった後、バックスペースで消すように戻り、再び打ち始める無限ループアニメーション。

> npm start development_

プログラミングや開発環境を彷彿とさせる、コマンドプロンプト風のデザイン。

HTMLコード表示
<div class="cs-type-wrapper">

    <!-- ▼ 1. クラシック・タイピング（1回きりの動作） ▼ -->
    <div class="cs-type-box">
        <!-- ※文字数に合わせてCSSの幅（ch）を調整します。ここは22文字 -->
        <div class="cs-type-classic">Hello, Web Design World!</div>
        <p class="cs-type-desc">
            ページを開いた時に1度だけ文字が打ち込まれ、最後にカーソルが点滅し続ける定番スタイル。
        </p>
    </div>

    <!-- ▼ 2. インフィニティ・ループ（打ち直しの繰り返し） ▼ -->
    <div class="cs-type-box">
        <!-- ここは19文字 -->
        <div class="cs-type-loop">HTML & CSS Portfolio</div>
        <p class="cs-type-desc">
            文字を打ち終わった後、バックスペースで消すように戻り、再び打ち始める無限ループアニメーション。
        </p>
    </div>

    <!-- ▼ 3. サイバー・ターミナル（黒背景×緑文字） ▼ -->
    <div class="cs-type-box cs-bg-dark">
        <!-- ここは24文字 -->
        <div class="cs-type-terminal">> npm start development_</div>
        <p class="cs-type-desc cs-text-light">
            プログラミングや開発環境を彷彿とさせる、コマンドプロンプト風のデザイン。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定
========================================= */
.cs-type-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-type-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    margin-bottom: 24px;
    /* 中央揃えにするとタイピングの起点がズレるため左揃え推奨 */
    text-align: left; 
}

.cs-bg-dark {
    background-color: #0f172a;
    border-color: #1e293b;
}

.cs-type-desc {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 24px 0 0;
    line-height: 1.6;
}
.cs-text-light {
    color: #94a3b8;
}

/* =========================================
   タイプライター共通の必須設定
========================================= */
.cs-type-classic,
.cs-type-loop,
.cs-type-terminal {
    font-size: 2rem;
    font-weight: 700;
    /* ▼ 必須：すべての文字幅が均等になる等幅フォント（monospace）を指定 ▼ */
    font-family: 'Courier New', Courier, monospace;
    
    /* ▼ 必須：文字が折り返さないようにし、はみ出た部分を隠す ▼ */
    white-space: nowrap;
    overflow: hidden;
    
    /* カーソル（右側の枠線）の設定 */
    border-right: 3px solid #1a202c; 
    padding-right: 4px;
}

/* =========================================
   1. クラシック・タイピング（22文字）
========================================= */
.cs-type-classic {
    color: #1a202c;
    width: 23ch; /* 22文字分の幅を指定 */
    /* タイピング（2秒で22歩進む）と、カーソル点滅（0.7秒ループ）を同時実行 */
    animation: 
        cs-typing-23 2s steps(23, end) forwards,
        cs-blink 0.7s step-end infinite;
}

/* 22文字用のアニメーション */
@keyframes cs-typing-23 {
    from { width: 0; }
    to { width: 23ch; }
}

/* =========================================
   2. インフィニティ・ループ（19文字）
========================================= */
.cs-type-loop {
    color: #2589d0;
    width: 21ch; 
    border-right-color: #2589d0; /* カーソルも青色に */
    
    /* alternate（反転）と infinite（無限）を組み合わせて打ち直しを表現 */
    animation: 
        cs-typing-21 3s steps(21, end) alternate infinite,
        cs-blink-blue 0.7s step-end infinite;
}

/* 19文字用のアニメーション */
@keyframes cs-typing-21 {
    from { width: 0; }
    to { width: 21ch; }
}

/* =========================================
   3. サイバー・ターミナル（24文字）
========================================= */
.cs-type-terminal {
    color: #4ade80; /* ターミナルグリーン */
    width: 24ch;
    border-right: 12px solid #4ade80; /* カーソルを太いブロック型に変更 */
    
    animation: 
        cs-typing-24 2.5s steps(24, end) forwards,
        cs-blink-green 0.8s step-end infinite;
}

/* 24文字用のアニメーション */
@keyframes cs-typing-24 {
    from { width: 0; }
    to { width: 24ch; }
}

/* =========================================
   カーソル点滅用のアニメーション
========================================= */
@keyframes cs-blink { 50% { border-color: transparent; } }
@keyframes cs-blink-blue { 50% { border-color: transparent; } }
@keyframes cs-blink-green { 50% { border-color: transparent; } }

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-type-classic,
    .cs-type-loop,
    .cs-type-terminal {
        font-size: 1.2rem; /* スマホでは画面からはみ出さないよう小さくする */
    }
}

グリッチエフェクト（バグ・ノイズ）

デジタルデータの破損や通信エラーを意図的に演出するこのデザインは、サイバーパンク、Y2K、あるいは少しダークで退廃的なWebサイトのアクセントとして人気があります。

HOVER ME

マウスを乗せた瞬間に、文字が左右に断層のようにズレてノイズが走ります。

DATA ERROR

常にチカチカと不規則にノイズが走る、非常にインパクトの強い表現。

HTMLコード表示
<div class="cs-glitch-wrapper">

    <div class="cs-glitch-box">
        <div class="cs-glitch-hover" data-text="HOVER ME">HOVER ME</div>
        <p class="cs-glitch-desc">
            マウスを乗せた瞬間に、文字が左右に断層のようにズレてノイズが走ります。
        </p>
    </div>

    <div class="cs-glitch-box cs-bg-dark">
        <div class="cs-glitch-active" data-text="DATA ERROR">DATA ERROR</div>
        <p class="cs-glitch-desc cs-text-light">
            常にチカチカと不規則にノイズが走る、非常にインパクトの強い表現。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   共通設定
========================================= */
.cs-glitch-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-glitch-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    margin-bottom: 24px;
    text-align: center;
}

.cs-bg-dark { background-color: #0f172a; border-color: #1e293b; }
.cs-glitch-desc { font-size: 0.95rem; color: #4a5568; margin: 24px 0 0; line-height: 1.6; }
.cs-text-light { color: #94a3b8; }

/* =========================================
   グリッチの核となるスタイル
========================================= */
.cs-glitch-hover,
.cs-glitch-active {
    position: relative;
    display: inline-block;
    font-size: 4rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'Arial Black', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
}

/* 擬似要素を使って「赤い影」と「青い影」をズラして配置 */
.cs-glitch-hover::before, .cs-glitch-active::before,
.cs-glitch-hover::after, .cs-glitch-active::after {
    content: attr(data-text); /* data-text属性の文字を複製 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 1. 赤いズレ */
.cs-glitch-hover::before, .cs-glitch-active::before {
    text-shadow: -2px 0 red;
    clip: rect(0, 900px, 0, 0); /* 一部だけ切り取って表示 */
    animation: cs-glitch-anim 2s infinite linear alternate-reverse;
}

/* 2. 青いズレ */
.cs-glitch-hover::after, .cs-glitch-active::after {
    text-shadow: 2px 0 blue;
    clip: rect(0, 900px, 0, 0);
    animation: cs-glitch-anim 3s infinite linear alternate-reverse;
}

/* =========================================
   グリッチアニメーション
========================================= */
@keyframes cs-glitch-anim {
    0% { clip: rect(12px, 999px, 85px, 0); }
    20% { clip: rect(45px, 999px, 12px, 0); }
    40% { clip: rect(80px, 999px, 30px, 0); }
    60% { clip: rect(10px, 999px, 60px, 0); }
    80% { clip: rect(50px, 999px, 20px, 0); }
    100% { clip: rect(30px, 999px, 90px, 0); }
}

/* ホバー時のみ発動させる設定 */
.cs-glitch-hover:hover::before, 
.cs-glitch-hover:hover::after { animation: cs-glitch-anim 0.2s infinite; }

/* 永続版（常に発動） */
.cs-glitch-active::before, .cs-glitch-active::after { animation: cs-glitch-anim 0.2s infinite; }

まとめ

ここでは全体のまとめを記載しておきます。

本記事のまとめ
  • 蛍光ペン風マーカー線
    linear-gradientを使い、文字の背景に色を敷くことでマーカーを引いたような装飾を実現します。
  • アンダーラインのカスタマイズ
    text-decorationではなく、border-bottomを使うことで、太さや色、波線などを自由に調整可能です。
  • インライン・ラベル風テキスト
    background-colorとpadding、border-radiusを組み合わせ、強調したい単語をタグのように装飾します。
  • 文字詰め（カーニング）
    letter-spacingを調整することで、見出し等の文字間隔を美しく整えます。
  • 美しいドロップシャドウ
    text-shadowを活用し、文字に奥行きを与えて背景から浮き上がらせます。
  • レトロな3D立体文字
    text-shadowを多段（コンマ区切り）で重ね、文字に厚みを持たせるレトロなスタイルです。
  • ネオンサイン風の発光
    ぼかし強度の異なる複数のtext-shadowを重ね、光が滲んでいるようなネオン風の装飾を作ります。
  • テキスト・グラデーション
    background-clip: textとcolor: transparentを組み合わせ、文字自体をグラデーションで塗りつぶします。
  • テキストのアウトライン（白抜き）
    -webkit-text-strokeを使い、文字の中を透明にして外枠のみを美しく描画します。
  • 画像マスク（写真切り抜き）
    文字の領域を画像でマスクし、背景写真が文字の中から透けて見えるエディトリアルデザインを実現します。
  • 日本語の縦書き表現
    writing-mode: vertical-rlを使用し、伝統的な縦書きレイアウトをWeb上で再現します。
  • ドロップキャップ（雑誌風）
    ::first-letter擬似要素で最初の1文字だけを大きくし、雑誌のような格式高い冒頭文を作ります。
  • タイプライター風アニメーション
    steps()関数とwidthの制御により、文字が1文字ずつ打ち込まれる動きを実装します。
  • グリッチエフェクト（バグ・ノイズ）
    clipとtext-shadowを組み合わせ、デジタルなノイズが走るような視覚効果を演出します。

よくある質問（FAQ）

CSSだけで文字をグラデーションにする方法はありますか？

background-clip: text;プロパティを使うのが現代の標準的な手法です。

文字の背景にlinear-gradient（グラデーション）を敷いた上で、background-clip: text;を指定することで、文字の形に背景を切り抜くことができます。

この時、文字自体をcolor: transparent;で透明に設定するのがポイントです。

なぜtext-shadowを使っても文字が綺麗に見えないのですか？

真っ黒の影を強くかけすぎているのが主な原因です。

現実世界の影は真っ黒ではありません。

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);のように、黒色をベースにしつつ不透明度（アルファ）を下げてぼかすと、洗練された影になります。

また、文字色に近い色の影を使うと、より自然で立体的に見えます。

「縦書き」と「横書き」を同じページで混在させることはできますか？

writing-modeプロパティを使うことで可能です。

縦書きにしたい要素（ブロック）に対してwriting-mode: vertical-rl;を指定すれば、その範囲だけ縦書きになります。

ただし、縦書きの中では数字が横に寝てしまうため、数字だけをtext-combine-upright: all;で横並びに制御するのが綺麗なレイアウトを作るコツです。

CSSでフォントの「文字詰め（カーニング）」を調整するメリットは？

読者の視認性が向上し、記事のプロらしさが格段に上がります。

特に日本語フォントでは、句読点やカッコの周りに不自然な余白ができがちです。

font-feature-settings: "palt";を指定すると、文字本来の形に合わせて自動的に余白が詰められ、雑誌のような美しい文字組みになります。

SEOの直接的な指標ではありませんが、滞在時間や離脱率といったユーザー体験（UX）の改善に直結します。

縁取り文字を作ると角が汚くなります。きれいに縁取る方法は？

text-shadowの多重指定ではなく、-webkit-text-strokeを使用してください。

text-shadowで無理やり縁取りを作ると、角がギザギザになりがちです。

-webkit-text-stroke: 2px #000;を使えば、パスに沿った滑らかな縁取りが描画できます。

文字の中を透明にすれば「白抜き文字」として、画像の上に配置しても視認性を保てるため、実用的なテクニックです。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次