EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSSテキストとフォント

ウェブページの主なコンテンツはテキストです。CSSは、テキストのフォント、サイズ、色、スペーシング、配置を制御する豊富なプロパティを提供します。

フォントプロパティ

フォントプロパティ早見表

プロパティ よく使う値 用途
font-family "Microsoft YaHei"、Arial、sans-serif フォントの設定（複数のフォールバック）
font-size 16px、1.2em、1rem、100% フォントサイズ
font-weight normal(400)、bold(700)、100〜900 フォントの太さ
font-style normal、italic、oblique フォントスタイル（イタリック/通常）
line-height 1.5（単位なし）、24px、150% 行高（推奨1.5〜1.8）
font italic bold 16px/1.8 sans-serif 複数のプロパティの省略形

フォントスタックのベストプラクティス

✅ フォントスタックの順序： font-familyは最も具体的なものから最も一般的なものの順に記述します。例：font-family: "PingFang SC", "Microsoft YaHei", sans-serif;。ブラウザは左から右に読み込みを試み、利用可能なフォントを見つけるまで続けます。

サンプル

HTML 
<style>
p {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
</style>
<p>これは段落のサンプルです。</p>
▶ 試してみよう

テキストプロパティ

テキストプロパティ早見表

プロパティ よく使う値 用途
color #333、red、rgb(0,0,0) テキストの色
text-align left、center、right、justify 水平方向の配置
text-decoration none、underline、overline、line-through テキストの装飾
text-indent 2em、20px インデント
letter-spacing 2px、-1px 文字間隔
word-spacing 5px 単語間隔
text-transform uppercase、lowercase、capitalize テキストの変換
text-shadow 2px 2px 4px rgba(0,0,0,0.5) テキストシャドウ
text-overflow clip、ellipsis オーバーフロー処理（overflow: hiddenが必要）

テキストの配置

サンプル

HTML 
<style>
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
<div class="left">左揃え（デフォルト）</div>
<div class="center">中央揃え</div>
<div class="right">右揃え</div>
<div class="justify">両端揃え、単語間隔を自動調整</div>
▶ 試してみよう

テキストの装飾

サンプル

HTML 
<style>
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.none { text-decoration: none; }
</style>
<div class="underline">下線付きテキスト</div>
<div class="overline">上線付きテキスト</div>
<div class="line-through">取り消し線付きテキスト</div>
<div class="none">装飾なし（リンクのデフォルト下線を削除）</div>
▶ 試してみよう

テキストシャドウ

⚠️ 可読性の注意： テキストシャドウは見た目が良いですが、使いすぎると可読性が低下します。暗い背景に暗いシャドウは読めません——テキストと背景の間に十分なコントラストを確保してください。

サンプル

HTML 
<style>
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
<h1>シャドウ付き見出し</h1>
▶ 試してみよう

テキストのオーバーフロー

overflowとwhite-spaceと組み合わせて、テキストのオーバーフローを処理：

サンプル

HTML 
<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
}
</style>
<div class="ellipsis">これは長いテキストで、省略記号で切り捨てられます</div>
▶ 試してみよう

❓ よくある質問

Q 異なる言語にフォントスタックをどうやって設定しますか？
A 中国語の場合：`font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;`。MacはPingFang SC、WindowsはMicrosoft YaHei、フォールバックはNoto Sansまたはシステムのsans-serif。
Q Google Fontsの読み込みは速度に影響しますか？
A はい。Google Fontsは追加のネットワークリクエストが必要です。必要なウェイトのみを読み込み（すべての300/400/500/700を一度に読み込まない）、`display=swap`パラメータを追加して、ブラウザが最初にフォールバックフォントを使用し、カスタムフォントが読み込まれた後に置き換えるようにします。
Q text-overflow: ellipsisが効かないのはなぜですか？
A 省略記号には3つの条件が同時に必要です：`white-space: nowrap`（改行なし）、`overflow: hidden`（オーバーフロー非表示）、`width`または`max-width`（有限の幅）。1つでも欠けると機能しません。

📖 まとめ

📝 演習

  1. 記事の閲覧ページを作成し、タイトル、サブタイトル、本文段落を含めてください。異なるフォント、サイズ、色で階層を区別してください。
  2. 少なくとも4つのtext-decorationエフェクト（下線、上線、取り消し線、波線）を実演してください。
  3. 「単一行テキストのオーバーフローと省略記号」を実装してください——固定幅コンテナで長いテキストを...で表示してください。
  4. text-shadowを使用して見出しにグローエフェクトを追加してください。
100%