過去バージョン

テキスト関連プロパティ一覧

color: テキストの色

body {
    color: #333;              /* HEX */
    color: rgb(51, 51, 51);   /* RGB */
    color: hsl(0, 0%, 20%);   /* HSL */
    color: currentColor;      /* 親要素の color を継承 */
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body { color: #e5e5e5; }
}

/* リンク色のカスタマイズ */
a:link    { color: #4f46e5; }
a:visited { color: #6366f1; }
a:hover   { color: #4338ca; }
a:active  { color: #3730a3; }

font-family: フォントスタック

OS ごとに異なる標準フォントを優先順位付きでリストします。日本語サイトでは「OS の UI フォント」を最優先するのが現代的です。

/* モダンな日本語フォントスタック */
body {
    font-family:
        -apple-system,            /* macOS / iOS: San Francisco */
        BlinkMacSystemFont,        /* macOS Chrome */
        "Segoe UI",                /* Windows */
        "Hiragino Sans",           /* macOS 日本語 */
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",            /* Web フォント */
        "Yu Gothic",               /* Windows 日本語 */
        Meiryo,
        sans-serif;
}

/* 等幅 (コード表示用) */
code, pre {
    font-family:
        "SF Mono", Monaco, Menlo,
        Consolas, "Courier New",
        monospace;
}

font-size と line-height

本文 16px / 行間 1.7 が日本語サイトの標準的なバランス。見出しでは行間を狭めます。

html { font-size: 16px; }                /* ルート */
body { font-size: 1rem; line-height: 1.7; }

h1 { font-size: 2rem;    line-height: 1.3; }
h2 { font-size: 1.5rem;  line-height: 1.4; }
h3 { font-size: 1.25rem; line-height: 1.5; }

/* レスポンシブ: 画面幅に応じて可変 */
h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    /* 最小 1.5rem 〜 ビューポート幅の 4% 〜 最大 2.5rem */
}

Web Font: Google Fonts

<!-- HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
      rel="stylesheet">

body {
    font-family: "Noto Sans JP", sans-serif;
    font-display: swap;  /* ロード中はフォールバック表示 → swap で切替 */
}

/* 可変フォント (Variable Fonts) */
@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter.var.woff2") format("woff2-variations");
    font-weight: 100 900;        /* 100〜900 全範囲 */
    font-display: swap;
}

body {
    font-family: "Inter", sans-serif;
    font-weight: 425;             /* 1 整数刻みで指定可能 */
}

text-decoration: 下線・取消線

/* リンクの下線をカスタマイズ */
a {
    text-decoration: underline;
    text-decoration-color: #4f46e5;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;   /* solid | dotted | dashed | wavy */
    text-underline-offset: 4px;
}

/* 下線消す */
a.no-underline { text-decoration: none; }

/* 取消線 (削除済表示) */
.deleted { text-decoration: line-through; }

折り返し制御

/* 長い URL を強制折返し */
.long-url {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* ボタンのテキストを 1 行で */
button {
    white-space: nowrap;
}

/* 改行を保持 (textarea から取得した文字列等) */
.preserve {
    white-space: pre-wrap;
}

text-overflow: 省略「...」表示

/* 1 行で省略 */
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 必須の3点セット */
}

/* 複数行で省略 (-webkit- 限定だが主要ブラウザ全対応) */
.truncate-3lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

text-shadow: 影

/* 影 */
h1 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 縁取り (4 方向に重ねる) */
.outline-text {
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}

/* ネオン風 */
.neon {
    color: #fff;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff;
}

writing-mode: 縦書き

/* 縦書き (日本語の縦書き) */
.vertical {
    writing-mode: vertical-rl;
    /* horizontal-tb (既定) | vertical-rl | vertical-lr | sideways-rl */
}

/* 縦中横 (数字を横に並べる) */
.kanji-num {
    text-combine-upright: all;
}

FAQ

Q: 行間を狭くしたいけど絶対値か比率か?
A: 単位なしの比率 (line-height: 1.7) が推奨。子要素の font-size 変更に追従します。px 指定は子で破綻します。

Q: スマホで文字が勝手に大きくなる
A: iOS Safari の自動文字拡大。html { -webkit-text-size-adjust: 100%; } で抑制。

Q: 日本語の text-align: justify が変
A: 日本語は単語区切りが無いため両端揃えが効きにくい。text-justify: inter-character や text-align-last も検討。