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

【Tailwind入門】タイポグラフィの基礎：フォント、行の高さとテキストスタイル

フォントファミリー

Tailwindは3つのデフォルトフォントファミリーを提供しています：font-sans（サンセリフ）、font-serif（セリフ）、font-mono（等幅）。カスタムフォントの追加も可能です。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォントファミリーデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            'custom': ['"Inter"', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-8">
    <div class="bg-white p-6 rounded-lg shadow">
      <p class="font-sans text-lg mb-4">font-sans - サンセリフ</p>
      <p class="font-serif text-lg mb-4">font-serif - セリフ</p>
      <p class="font-mono text-lg mb-4">font-mono - 等幅</p>
      <p class="font-custom text-lg">font-custom - カスタムフォント</p>
    </div>

    <!-- 実践例 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-sans text-2xl font-bold mb-4">見出しにはサンセリフフォントを使用</h2>
      <p class="font-serif text-base leading-relaxed mb-4">
        本文にはセリフフォントを使用します。長文の読書に適しています。セリフフォントは
        印刷媒体で広く使われており、読者の目を導き、可読性を向上させます。
      </p>
      <code class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">
        console.log('コードには等幅フォントを使用');
      </code>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

フォントファミリー参照：

クラス フォント種別 用途
font-sans サンセリフ 見出し、UI要素
font-serif セリフ 本文、長文の読書
font-mono 等幅 コード、データ表示

従来のCSSとTailwindの比較 従来の方法ではfont-familyプロパティを定義し、フォントフォールバックを手動で処理する必要があります。Tailwindはクロスプラットフォームで適切なフォールバックを備えた、すぐに使えるフォントスタックを提供します。

フォントサイズ

Tailwindはtext-xs（12px）からtext-9xl（128px）まで、完全なフォントサイズシステムを提供しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォントサイズデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-4">
    <p class="text-xs text-gray-600">text-xs (12px) - 最小サイズ</p>
    <p class="text-sm text-gray-600">text-sm (14px) - 小サイズ</p>
    <p class="text-base text-gray-700">text-base (16px) - デフォルトサイズ</p>
    <p class="text-lg text-gray-700">text-lg (18px) - 大サイズ</p>
    <p class="text-xl text-gray-800">text-xl (20px) -特大サイズ</p>
    <p class="text-2xl font-semibold">text-2xl (24px)</p>
    <p class="text-3xl font-semibold">text-3xl (30px)</p>
    <p class="text-4xl font-bold">text-4xl (36px)</p>
    <p class="text-5xl font-bold">text-5xl (48px)</p>
    <hr class="my-8">
    
    <!-- 実践例 -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">ページのメイン見出し</h1>
    <h2 class="text-2xl font-semibold text-gray-800 mb-3">セクション見出し</h2>
    <h3 class="text-xl font-medium text-gray-700 mb-2">サブセクション見出し</h3>
    <p class="text-base text-gray-600 leading-relaxed">
      本文はデフォルトのフォントサイズを使用し、快適な読書体験を確保します。
    </p>
    <p class="text-sm text-gray-500 mt-4">注釈や補助テキストには小さいサイズを使用</p>
  </div>
</body>
</html>
▶ 試してみよう

フォントサイズ参照：

クラス サイズ 行の高さ
text-xs 12px 16px
text-sm 14px 20px
text-base 16px 24px
text-lg 18px 28px
text-xl 20px 28px
text-2xl 24px 32px
text-3xl 30px 36px
text-4xl 36px 40px
text-5xl 48px 1
text-6xl 60px 1
text-7xl 72px 1
text-8xl 96px 1
text-9xl 128px 1

従来のCSSとTailwindの比較 従来の方法では正確なピクセル値を覚える必要がありますが、Tailwindは覚えやすく使いやすいセマンティックなサイズ名を使用します。

💡 ヒント： 任意値構文を使えば任意のフォントサイズを設定できます。例：text-[22px]やtext-[1.375rem]。

フォントウェイト

Tailwindはfont-thin（100）からfont-black（900）まで、全範囲のフォントウェイトオプションを提供しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォントウェイトデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-4">
    <p class="font-thin text-xl">font-thin (100) - 極細</p>
    <p class="font-extralight text-xl">font-extralight (200) - 薄い</p>
    <p class="font-light text-xl">font-light (300) - 細字</p>
    <p class="font-normal text-xl">font-normal (400) - 標準</p>
    <p class="font-medium text-xl">font-medium (500) - 中太</p>
    <p class="font-semibold text-xl">font-semibold (600) - 半太</p>
    <p class="font-bold text-xl">font-bold (700) - 太字</p>
    <p class="font-extrabold text-xl">font-extrabold (800) - 極太</p>
    <p class="font-black text-xl">font-black (900) - 最太</p>
    
    <hr class="my-8">
    
    <!-- 実践例 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-bold text-2xl mb-4">見出しの強調には太字を使用</h2>
      <p class="font-normal text-base mb-2">本文には標準ウェイトを使用</p>
      <p class="font-light text-sm text-gray-500">補助テキストには細字を使用</p>
      <span class="font-semibold text-blue-600">重要なラベルには半太字を使用</span>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではfont-weight: 700のような数値を覚える必要がありますが、Tailwindはfont-boldのような直感的なセマンティック名を使用します。

行の高さ

行の高さはテキスト行間の間隔を制御します。Tailwindはleading-noneからleading-looseまでのプリセットオプションを提供しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行の高さデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 行の高さの比較 -->
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-none (line-height 1)</h3>
        <p class="leading-none text-gray-700">
          このテキストは最小の行の高さを使用し、行間にほとんど間隔がありません。見出しやコンパクトなレイアウトに最適です。
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-tight (line-height 1.25)</h3>
        <p class="leading-tight text-gray-700">
          このテキストはより狭い行の高さを使用し、サブタイトルやよりコンパクトな表示が必要なテキストに適しています。
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-normal (line-height 1.5)</h3>
        <p class="leading-normal text-gray-700">
          このテキストはデフォルトの行の高さを使用し、ほとんどの本文に理想的です。読みやすさとスペース効率のバランスを取っています。
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-relaxed (line-height 1.625)</h3>
        <p class="leading-relaxed text-gray-700">
          このテキストはよりゆとりのある行の高さを使用し、長文の読書に最適です。余分な間隔が視覚的な疲労を軽減します。
        </p>
      </div>
    </div>

    <!-- 数値による行の高さ -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">数値で指定する行の高さ</h3>
      <div class="space-y-4">
        <p class="leading-[1] text-gray-700">leading-[1] - 厳密に1に設定</p>
        <p class="leading-[2rem] text-gray-700">leading-[2rem] - 厳密に2remに設定</p>
        <p class="leading-[32px] text-gray-700">leading-[32px] - 厳密に32pxに設定</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

行の高さ参照：

クラス 行の高さ 用途
leading-none 1 見出し、ボタン
leading-tight 1.25 サブタイトル
leading-snug 1.375 コンパクトなテキスト
leading-normal 1.5 デフォルトの本文
leading-relaxed 1.625 長文の読書
leading-loose 2 非常にゆとりのある間隔

従来のCSSとTailwindの比較 従来の方法では異なるテキストコンテキストごとにline-height値を個別に設定する必要がありますが、Tailwindはセマンティックな行の高さオプションを提供し、すぐに選択できます。

テキストカラー

Tailwindは一般的なテキストカラーのニーズをすべてカバーする包括的なカラーシステムを提供しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テキストカラーデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基本カラー -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">基本テキストカラー</h3>
      <div class="space-y-2">
        <p class="text-gray-900">text-gray-900 - 最も濃い灰色</p>
        <p class="text-gray-600">text-gray-600 - 中間の灰色</p>
        <p class="text-gray-400">text-gray-400 - 薄い灰色</p>
      </div>
    </div>

    <!-- セマンティックカラー -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">セマンティックテキストカラー</h3>
      <div class="space-y-2">
        <p class="text-blue-600">text-blue-600 - リンク/情報</p>
        <p class="text-green-600">text-green-600 - 成功</p>
        <p class="text-yellow-600">text-yellow-600 - 警告</p>
        <p class="text-red-600">text-red-600 - エラー</p>
        <p class="text-purple-600">text-purple-600 - 特別な強調</p>
      </div>
    </div>

    <!-- 不透明度 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">テキストカラーの不透明度</h3>
      <div class="space-y-2">
        <p class="text-blue-600 opacity-100">opacity-100 - 完全に不透明</p>
        <p class="text-blue-600 opacity-75">opacity-75 - 75%不透明</p>
        <p class="text-blue-600 opacity-50">opacity-50 - 50%不透明</p>
        <p class="text-blue-600 opacity-25">opacity-25 - 25%不透明</p>
      </div>
    </div>

    <!-- グラデーションテキスト -->
    <div class="bg-gray-900 p-6 rounded-lg">
      <h3 class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 text-3xl font-bold">
        グラデーションテキストエフェクト
      </h3>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではCSSにカラー変数や16進数値を定義する必要がありますが、Tailwindはセマンティックなカラーシステム（例：text-red-600）を提供し、視覚的な意図を直接表現できます。

テキスト配置と装飾

Tailwindは様々なタイポグラフィニーズに対応する、完全なテキスト配置と装飾のオプションを提供しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テキスト配置と装飾デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- テキスト配置 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">テキスト配置</h3>
      <div class="space-y-4">
        <p class="text-left bg-gray-100 p-3 rounded">text-left - 左揃えテキスト</p>
        <p class="text-center bg-gray-100 p-3 rounded">text-center - 中央揃えテキスト</p>
        <p class="text-right bg-gray-100 p-3 rounded">text-right - 右揃えテキスト</p>
        <p class="text-justify bg-gray-100 p-3 rounded">
          text-justify - 両端揃えテキスト。この段落は両端揃えの例を示しています。複数行にわたる場合、テキストがコンテナ全体に均等に配置されます。
        </p>
      </div>
    </div>

    <!-- テキスト装飾 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">テキスト装飾</h3>
      <div class="space-y-4">
        <p class="underline">underline - 下線付きテキスト</p>
        <p class="overline">overline - 上線付きテキスト</p>
        <p class="line-through">line-through - 取り消し線テキスト</p>
        <p class="no-underline">no-underline - 装飾なし</p>
      </div>
    </div>

    <!-- テキスト変換 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">テキスト変換</h3>
      <div class="space-y-4">
        <p class="uppercase">uppercase - 大文字変換</p>
        <p class="lowercase">LOWERCASE - 小文字変換</p>
        <p class="capitalize">capitalize - 先頭大文字変換</p>
        <p class="normal-case">normal-case - 通常の大文字小文字</p>
      </div>
    </div>

    <!-- 装飾の色と太さ -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">装飾線のスタイル</h3>
      <div class="space-y-4">
        <p class="underline decoration-blue-500">青い下線</p>
        <p class="underline decoration-2">太い下線 (2px)</p>
        <p class="underline decoration-4 decoration-wavy">波線の装飾</p>
        <p class="underline decoration-dashed">破線の装飾</p>
        <p class="underline decoration-dotted">点線の装飾</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではtext-align、text-decoration、text-transformなどのプロパティを個別に設定する必要がありますが、Tailwindはtext-center、underline、uppercaseのような簡潔なクラス名を使用します。

リストスタイル

Tailwindはリストマーカーの種類と位置を含む、リストスタイルの制御を提供しています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>リストスタイルデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- 順序なしリスト -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">順序なしリストのスタイル</h3>
      <ul class="list-disc space-y-2 pl-5">
        <li>list-disc - 黒丸</li>
        <li>2番目のリスト項目</li>
        <li>3番目のリスト項目</li>
      </ul>
      
      <ul class="list-[square] space-y-2 pl-5 mt-4">
        <li>list-[square] - 四角</li>
        <li>任意値構文を使用</li>
      </ul>
      
      <ul class="list-none space-y-2 mt-4">
        <li>list-none - マーカーなし</li>
        <li>カスタムリストスタイルに適している</li>
      </ul>
    </div>

    <!-- 順序付きリスト -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">順序付きリストのスタイル</h3>
      <ol class="list-decimal space-y-2 pl-5">
        <li>list-decimal - 数字</li>
        <li>2番目のリスト項目</li>
        <li>3番目のリスト項目</li>
      </ol>
      
      <ol class="list-[upper-alpha] space-y-2 pl-5 mt-4">
        <li>大文字のアルファベット番号</li>
        <li>list-[upper-alpha]</li>
      </ol>
      
      <ol class="list-[lower-roman] space-y-2 pl-5 mt-4">
        <li>小文字のローマ数字</li>
        <li>list-[lower-roman]</li>
      </ol>
    </div>

    <!-- リスト位置 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">リストマーカーの位置</h3>
      <ul class="list-disc list-inside space-y-2 bg-gray-100 p-4 rounded">
        <li>list-inside - マーカーがコンテンツ領域の内側</li>
        <li>長いリスト項目のテキストはインデントなしでマーカーの下に折り返される</li>
      </ul>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">リストマーカーの位置</h3>
      <ul class="list-disc list-outside space-y-2 pl-5 bg-gray-100 p-4 rounded">
        <li>list-outside - マーカーがコンテンツ領域の外側</li>
        <li>長いリスト項目のテキストはインデントを維持する</li>
      </ul>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではlist-style-typeとlist-style-positionプロパティを設定する必要がありますが、Tailwindはlist-discやlist-insideのような簡潔なクラス名を使用します。

💡 ヒント： 任意値構文を使えば任意のリストスタイルを設定できます。例：list-[upper-alpha]やlist-[lower-roman]。

❓ よくある質問

Q Tailwindでカスタムフォントを使うにはどうすればよいですか？
A tailwind.configのfontFamily設定を拡張するか、font-["MyFont",sans-serif]のような任意値構文を使用してください。HTMLにフォントファイルまたはCDNリンクを含めるのを忘れないでください。
Q text-baseのデフォルトサイズは何ですか？変更できますか？
A text-baseのデフォルトは16pxです。tailwind.configのfontSize設定で変更するか、CSSの@themeディレクティブでカスタマイズできます。
Q テキストのグラデーションエフェクトを作るにはどうすればよいですか？
A text-transparent、bg-clip-text、bg-gradient-to-rクラスを組み合わせて、背景のグラデーションをテキストの形にクリップします。
Q leading-tightとleading-[1.25]の違いは何ですか？
A 同じ結果になります。leading-tightはプリセットのセマンティック名です。一貫性のためプリセット名を優先し、特別な要件にのみ任意値を使用してください。

📖 まとめ

📝 課題

  1. ⭐ 見出し（text-4xl font-boldを使用）、サブタイトル、本文、注釈を含む記事ページを作成し、異なるフォントサイズとウェイトの組み合わせを紹介してみましょう

  2. ⭐⭐ 価格にグラデーションテキストを使用し、元価格（line-through）と割引価格を含む料金カードを作成し、テキスト装飾の実践的な使い方を示してみましょう

  3. ⭐⭐⭐ 順序付き・順序なしリスト、引用、コードブロックを含む完全なコンテンツページを作成し、ライト/ダークモード切替に対応したテキストカラーの実装をしてみましょう

100%