タイトル: テキスト
SEOタイトル: CSS テキスト関連プロパティ完全ガイド
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>基本: <code>color</code> / <code>font-family</code> / <code>font-size</code> / <code>font-weight</code> / <code>line-height</code> / <code>text-align</code></li><li>装飾: <code>text-decoration</code> (下線) / <code>text-transform</code> (大文字化) / <code>letter-spacing</code> / <code>word-spacing</code></li><li>折り返し制御: <code>white-space</code> / <code>word-break</code> / <code>overflow-wrap</code> / <code>hyphens</code></li><li><code>text-overflow: ellipsis</code> で「...」省略表示。<code>writing-mode: vertical-rl</code> で縦書き</li><li>日本語推奨フォントスタック: <code>-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif</code></li></ul></td></tr></table>
<h2>テキスト関連プロパティ一覧</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>カテゴリ</th><th>プロパティ</th><th>例</th></tr></thead>
<tbody>
<tr><td rowspan="6">フォント</td><td><code>color</code></td><td><code>color: #333</code></td></tr>
<tr><td><code>font-family</code></td><td><code>font-family: "Yu Gothic", sans-serif</code></td></tr>
<tr><td><code>font-size</code></td><td><code>font-size: 16px</code></td></tr>
<tr><td><code>font-weight</code></td><td><code>font-weight: 700</code></td></tr>
<tr><td><code>font-style</code></td><td><code>font-style: italic</code></td></tr>
<tr><td><code>line-height</code></td><td><code>line-height: 1.7</code></td></tr>
<tr><td rowspan="3">配置</td><td><code>text-align</code></td><td><code>text-align: center</code></td></tr>
<tr><td><code>text-indent</code></td><td><code>text-indent: 1em</code> (字下げ)</td></tr>
<tr><td><code>vertical-align</code></td><td><code>vertical-align: middle</code></td></tr>
<tr><td rowspan="3">装飾</td><td><code>text-decoration</code></td><td><code>text-decoration: underline</code></td></tr>
<tr><td><code>text-transform</code></td><td><code>text-transform: uppercase</code></td></tr>
<tr><td><code>text-shadow</code></td><td><code>text-shadow: 1px 1px 2px #888</code></td></tr>
<tr><td rowspan="2">字間</td><td><code>letter-spacing</code></td><td><code>letter-spacing: 0.05em</code></td></tr>
<tr><td><code>word-spacing</code></td><td><code>word-spacing: 0.2em</code></td></tr>
<tr><td rowspan="4">折り返し</td><td><code>white-space</code></td><td><code>white-space: nowrap</code></td></tr>
<tr><td><code>word-break</code></td><td><code>word-break: break-all</code></td></tr>
<tr><td><code>overflow-wrap</code></td><td><code>overflow-wrap: break-word</code></td></tr>
<tr><td><code>hyphens</code></td><td><code>hyphens: auto</code></td></tr>
</tbody>
</table>
<h2>color: テキストの色</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">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; }</code></pre>
<h2>font-family: フォントスタック</h2>
<p>OS ごとに異なる標準フォントを優先順位付きでリストします。日本語サイトでは「OS の UI フォント」を最優先するのが現代的です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* モダンな日本語フォントスタック */
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;
}</code></pre>
<h2>font-size と line-height</h2>
<p>本文 16px / 行間 1.7 が日本語サイトの標準的なバランス。見出しでは行間を狭めます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">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 */
}</code></pre>
<h2>Web Font: Google Fonts</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 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"></code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">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 整数刻みで指定可能 */
}</code></pre>
<h2>text-decoration: 下線・取消線</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* リンクの下線をカスタマイズ */
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; }</code></pre>
<h2>折り返し制御</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>プロパティ</th><th>値</th><th>挙動</th></tr></thead>
<tbody>
<tr><td><code>white-space</code></td><td><code>normal</code></td><td>通常 (改行・空白圧縮)</td></tr>
<tr><td></td><td><code>nowrap</code></td><td>改行しない (1 行)</td></tr>
<tr><td></td><td><code>pre</code></td><td>HTML ソースの空白・改行を保持</td></tr>
<tr><td></td><td><code>pre-wrap</code></td><td>空白保持 + 自動折返し</td></tr>
<tr><td><code>word-break</code></td><td><code>break-all</code></td><td>単語途中でも折り返し (URL 等)</td></tr>
<tr><td></td><td><code>keep-all</code></td><td>CJK でも単語単位で折返し</td></tr>
<tr><td><code>overflow-wrap</code></td><td><code>break-word</code></td><td>長い単語のみ折り返し</td></tr>
<tr><td><code>hyphens</code></td><td><code>auto</code></td><td>ハイフネーション (英語のみ実用)</td></tr>
</tbody>
</table>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 長い URL を強制折返し */
.long-url {
word-break: break-all;
overflow-wrap: anywhere;
}
/* ボタンのテキストを 1 行で */
button {
white-space: nowrap;
}
/* 改行を保持 (textarea から取得した文字列等) */
.preserve {
white-space: pre-wrap;
}</code></pre>
<h2>text-overflow: 省略「...」表示</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 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;
}</code></pre>
<h2>text-shadow: 影</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 影 */
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;
}</code></pre>
<h2>writing-mode: 縦書き</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 縦書き (日本語の縦書き) */
.vertical {
writing-mode: vertical-rl;
/* horizontal-tb (既定) | vertical-rl | vertical-lr | sideways-rl */
}
/* 縦中横 (数字を横に並べる) */
.kanji-num {
text-combine-upright: all;
}</code></pre>
<h2>FAQ</h2>
<p><strong>Q: 行間を狭くしたいけど絶対値か比率か?</strong><br />
A: <strong>単位なしの比率</strong> (<code>line-height: 1.7</code>) が推奨。子要素の font-size 変更に追従します。<code>px</code> 指定は子で破綻します。</p>
<p><strong>Q: スマホで文字が勝手に大きくなる</strong><br />
A: iOS Safari の自動文字拡大。<code>html { -webkit-text-size-adjust: 100%; }</code> で抑制。</p>
<p><strong>Q: 日本語の <code>text-align: justify</code> が変</strong><br />
A: 日本語は単語区切りが無いため両端揃えが効きにくい。<code>text-justify: inter-character</code> や <code>text-align-last</code> も検討。</p>