【6日でできるHTML入門】文字書式のCSS①
ここからは、CSSを使って文字の見た目を自由にカスタマイズする方法を学びます。具体的には、文字サイズや文字色、太さ、斜体・装飾、そしてフォントそのものを指定するプロパティを見ていきます。各プロパティの役割と指定方法を理解し、実際のHTMLサンプルを通じて動作を確かめましょう。
１．文字サイズの指定
1.1. font-size プロパティの基本
- 数値＋単位（px, pt, em, など）で文字サイズを直接指定。
- キーワード（smaller／larger）で相対的にサイズを調整可能。
ファイル名： lesson10-1.html
例：数値指定
<!-- ファイル名: lesson10-1.html 🎬 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>映画レビュー🎬</title>
</head>
<body>
<h1>今月のおすすめ映画</h1>
<p>素晴らしい映像美とストーリーを持つ作品をご紹介！</p>
<p style="font-size:24px;">『時の旅人』は、壮大なファンタジー映画です。</p>
</body>
</html>ブラウザの出力例
・ 通常の段落はデフォルトサイズ、太字の段落だけ24ピクセルになります。
例：キーワード指定
<p style="font-size:larger;">次回作はさらに迫力満点の映像が楽しめます。</p>| 値 | 説明 |
|---|---|
| smaller | 現在のサイズより一段階小さく |
| larger | 現在のサイズより一段階大きく |
| xx-small…xx-large | キーワードで9段階の絶対サイズ指定 |
２．文字色の指定
2.1. 色名による指定
ファイル名： lesson10-2.html
color: red;のように、CSSに用意された17色を名前で指定可能。
<!-- ファイル名: lesson10-2.html 🎨 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>映画レビュー🎨</title>
</head>
<body>
<h1 style="color:teal;">レビュー一覧</h1>
<p style="color:navy;">ドラマ作品は心温まるストーリーが魅力。</p>
</body>
</html>ブラウザの出力例
見出しはティール色、段落はネイビー色で表示されます。
2.2. 16進数コードでの指定
<p style="color:#e91e63;">アクション作品はスリリングな展開が特徴。</p>| 色の名前 | 説明 | 代表例（16進数） |
|---|---|---|
| red | 赤色 | #FF0000 |
| blue | 青色 | #0000FF |
| green | 緑色 | #008000 |
| aqua | シアン | #00FFFF |
| orange | オレンジ | #FFA500 |
| …（計17種） |
３．文字の太さ・斜体・装飾
3.1. font-weight（太さ）
normal（通常）、bold（太字）、100～900（細分化）を指定。
| 値 | 説明 |
|---|---|
| normal | 標準の太さ |
| bold | 太字 |
| 100～900 | 100単位で9段階の細かな指定 |
ファイル名： lesson10-3.html
<!-- ファイル名: lesson10-3.html 🔍 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>映画レビュー🔍</title>
</head>
<body>
<p style="font-weight:normal;">ドキュメンタリーは事実に基づくストーリー。</p>
<p style="font-weight:bold;">アクション映画は迫力が満点！</p>
<p style="font-style:italic;">『古典名作』は深い余韻を残します。</p>
<p style="text-decoration:underline;">『ミステリーX』は最後まで目が離せない展開。</p>
<p style="text-decoration:line-through;">旧シリーズは現在入手困難です。</p>
</body>
</html>ブラウザの出力例
1行目は標準、2行目だけ太字で表示。
3.2. font-style（斜体）
normal（標準）、italic（筆記体斜体）、oblique（斜め表示）。
<p style="font-style:italic;">『古典名作』は深い余韻を残します。</p>| 値 | 説明 |
|---|---|
| normal | 標準 |
| italic | 筆記体風の斜体 |
| oblique | 通常文字を斜めに表示 |
3.3. text-decoration（文字装飾）
none（装飾なし）、underline（下線）、overline（上線）、line-through（取り消し線）。
<p style="text-decoration:underline;">『ミステリーX』は最後まで目が離せない展開。</p>
<p style="text-decoration:line-through;">旧シリーズは現在入手困難です。</p>| 値 | 説明 |
|---|---|
| none | 装飾なし |
| underline | 下線 |
| overline | 上線 |
| line-through | 中央に取り消し線 |
４．フォントの指定
4.1. font-family プロパティ
単一指定も可能だが、複数のフォントをカンマ区切りで列挙し、環境に応じたフォールバックを用意。
| フォント指定 | 説明 |
|---|---|
| serif | 明朝系（セリフ） |
| sans-serif | ゴシック系 |
| cursive | 筆記体風 |
| fantasy | 装飾的フォント |
| monospace | 等幅フォント |
ファイル名： lesson10-4.html
<!-- ファイル名: lesson10-4.html 🖋️ -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>映画レビュー🖋️</title>
</head>
<body>
<p style="font-family:'Yu Mincho', serif;">この行は明朝系フォントで表示されます。</p>
<p style="font-family:sans-serif;">この行はゴシック系フォントで表示されます。</p>
</body>
</html>ブラウザの出力例
まとめ
ここで扱った「文字書式」のCSSプロパティを整理します。
| プロパティ | 用途 | 主な値例 |
|---|---|---|
| font-size | 文字サイズ | 24px／larger |
| color | 文字色 | red／#e91e63 |
| font-weight | 文字の太さ | normal／bold |
| font-style | 斜体指定 | normal／italic |
| text-decoration | 下線・上線・取り消し線 | underline／line-through |
| font-family | フォント指定 | 'Yu Mincho', serif／sans-serif |
これらを適切に組み合わせて、読みやすく魅力的なテキストデザインを実現しましょう。