この記事の要点

基本: color / font-family / font-size / font-weight / line-height / text-align 装飾: text-decoration (下線) / text-transform (大文字化) / letter-spacing / word-spacing 折り返し制御: white-space / word-break / overflow-wrap / hyphens text-overflow: ellipsis で「...」省略表示。writing-mode: vertical-rl で縦書き 日本語推奨フォントスタック: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif

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

カテゴリ	プロパティ	例
フォント	color	color: #333
	font-family	font-family: "Yu Gothic", sans-serif
	font-size	font-size: 16px
	font-weight	font-weight: 700
	font-style	font-style: italic
	line-height	line-height: 1.7
配置	text-align	text-align: center
	text-indent	text-indent: 1em (字下げ)
	vertical-align	vertical-align: middle
装飾	text-decoration	text-decoration: underline
	text-transform	text-transform: uppercase
	text-shadow	text-shadow: 1px 1px 2px #888
字間	letter-spacing	letter-spacing: 0.05em
	word-spacing	word-spacing: 0.2em
折り返し	white-space	white-space: nowrap
	word-break	word-break: break-all
	overflow-wrap	overflow-wrap: break-word
	hyphens	hyphens: auto

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; }

折り返し制御

プロパティ	値	挙動
white-space	normal	通常 (改行・空白圧縮)
	nowrap	改行しない (1 行)
	pre	HTML ソースの空白・改行を保持
	pre-wrap	空白保持 + 自動折返し
word-break	break-all	単語途中でも折り返し (URL 等)
	keep-all	CJK でも単語単位で折返し
overflow-wrap	break-word	長い単語のみ折り返し
hyphens	auto	ハイフネーション (英語のみ実用)

/* 長い 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 も検討。