Tailwind CSS Academy · レッスン

フォントサイズとフォントの太さ

text-smからtext-9xlまで、font-thinからfont-blackまでを使い、テキストの視覚的な強調度を調整します。

レッスン 1/413 ステップ

「フォントサイズとフォントの太さ」はCoddyKit上の無料Tailwind CSS Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。

Tailwindのフォントサイズスケール

text-*スケールを使って、text-xsからtext-9xlまでの文字サイズを設定します。ピクセル値を手入力する代わりにこの段階から選ぶことで、タイポグラフィに一貫性を保てます。

<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>

ディスプレイテキストとヒーローの文字サイズ

ヒーローセクションの大きなディスプレイテキストには、text-7xl、text-8xl、text-9xlを使います。font-extraboldやtracking-tightと組み合わせると、注目を集める見出しになります。

<h1 class="text-7xl font-black tracking-tight text-gray-900">
  Make it big.
</h1>

フォントウェイトのユーティリティ

フォントウェイトで太さを調整します。本文にはfont-normal、ラベルにはfont-semibold、見出しにはfont-bold、大きな強調にはfont-extraboldまたはfont-blackを使います。

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>

サイズと太さを組み合わせる

サイズと太さは独立しているため、組み合わせて使えます。ナビゲーションラベルにはtext-sm font-medium、見出しにはtext-4xl font-boldという具合です。組み合わせることで階層を表現できます。

<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>

レスポンシブなフォントサイズ

文字サイズは画面に合わせて変更できます。md:のようなブレークポイントプレフィックスを任意のサイズに追加します。text-3xl md:text-5xlなら、スマートフォンでは小さく、デスクトップでは大きく表示されます。

<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
  Scales with the screen
</h1>

フォントスタイル：斜体

italicを追加すると文字が斜体になり、not-italicで元に戻せます。引用や出典に適しており、italic font-light text-gray-500なら典型的な推薦文の雰囲気になります。

<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
  'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>

フォントバリアント数値

数値にはtabular-numsを使うと、すべての数字の幅が同じになります。そのため、表や列で価格や統計値をきれいに揃えられます。小さな工夫ですが、見た目がとても整います。

<!-- Tabular numbers align in columns -->
<table>
  <tr>
    <td class="tabular-nums text-right">1,234.56</td>
  </tr>
  <tr>
    <td class="tabular-nums text-right">98,765.00</td>
  </tr>
</table>

実践：ナビゲーションのタイポグラフィ

ナビゲーションリンクには、text-sm font-mediumの小さめで中程度のスタイルが適しています。アクティブなリンクにはfont-semibold text-indigo-600を追加して、目立たせます。

<nav class="flex gap-6">
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
  <a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>

実践：記事本文のテキスト

読みやすい本文テキストには、text-baseまたはtext-lgと、ゆったりした間隔、text-gray-700を使います。強い黒は避けましょう。max-w-proseを追加すると、行幅を読みやすく保てます。

<article class="max-w-prose mx-auto">
  <p class="text-lg font-normal text-gray-700 leading-relaxed">
    This is body text set at a comfortable reading size.
    The max-w-prose constraint keeps lines short enough
    to read without losing your place.
  </p>
</article>

実践：データ表示のタイポグラフィ

ダッシュボードでは、数字を目立たせます。値には text-3xl font-bold text-gray-900 を使い、その上に小さめの text-sm uppercase tracking-wider のラベルを配置します。

<div class="text-center">
  <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
    Total Users
  </p>
  <p class="text-3xl font-bold text-gray-900 tabular-nums">
    24,781
  </p>
</div>

一般的なフォントサイズの目安

頭の中での目安として、キャプションには text-xs、本文には text-base、見出しには text-2xl から text-4xl、ヒーローテキストには text-5xl 以上を使います。それぞれに適切なウェイトを組み合わせてください。

クイックチェック

クイックチェックです。サイズとウェイトが身に付いたか確認しましょう。🔤

対話的なレッスンで答える

レッスンのまとめ

いいですね。text-* はサイズを制御し、font-thin から font-black でウェイトを設定します。サイズ、ウェイト、色を組み合わせることで階層を作れます。次は、テキストの色と不透明度です。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 30
レッスン: 120

無料で学習を始めるコース全体を表示

よくある質問

「フォントサイズとフォントの太さ」レッスンは無料ですか？

はい。「フォントサイズとフォントの太さ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。

「フォントサイズとフォントの太さ」で何を学びますか？

text-smからtext-9xlまで、font-thinからfont-blackまでを使い、テキストの視覚的な強調度を調整します。ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Tailwind CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「フォントサイズとフォントの太さ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTailwind CSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Tailwind CSS Academyに戻る