フォントサイズ、太さ、スタイル
font-sizeで文字サイズ、font-weightで太さ、font-styleでスタイルを制御します。
「フォントサイズ、太さ、スタイル」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
font-size
font-sizeはグリフの高さを設定します。任意の長さの単位を指定できます。拡大縮小に対応したアクセシブルなタイポグラフィには、remの使用が推奨されます。
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
キーワードによるフォントサイズ
CSSには、絶対値のキーワードサイズ（xx-smallからxx-largeまで）と、親要素のフォントサイズを基準とする相対値のキーワード（smaller、larger）も用意されています。
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weightはテキストの太さを設定します。数値（100〜900の100刻み）またはキーワードを使用します。
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weightと可変フォント
可変フォントでは、任意の整数値のウェイト（例：font-weight: 550）を指定でき、フォントは定義された軸の間を補間します。これにより、タイポグラフィを細かく制御できます。
font-style
font-styleは、イタリック体や斜体での表示を制御します。
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variantを使うと、small-capsなどのタイポグラフィ機能を有効にできます。
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
fontのショートハンド
fontショートハンドには、スタイル、バリアント、ウェイト、サイズ、行の高さ、フォントファミリーをまとめて指定できます。
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
レスポンシブなフォントサイズの拡大縮小
clamp()を使うと、最小サイズから最大サイズまで滑らかに変化する流動的なタイポグラフィを作成できます。
<h1>Resize the window — this heading scales fluidly.</h1>
読みやすさのためのline-height
line-heightは行間の垂直方向の間隔を設定します。単位なしの値（例：1.5）が推奨されます。子孫要素のフォントサイズに合わせて拡大縮小されるためです。
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacingとword-spacing
letter-spacingは文字間に余白を追加し、word-spacingは単語間に余白を追加します。フォントサイズに合わせて拡大縮小されるよう、em単位を使用します。
<h2 class="heading">Spaced Out Heading Text</h2>
アクセシブルなフォントサイズの設定
html要素やbody要素でfont-sizeをpx単位に設定してはいけません。ブラウザーでユーザーが設定したフォントサイズの優先設定が上書きされるためです。代わりに、ブラウザーのデフォルト値を基準とするrem単位を使用します。
確認問題
boldキーワードと同じ数値のfont-weightはどれですか？
まとめ
ユーザー設定を尊重するため、フォントサイズにはremを使用します。font-weightには100〜900の数値またはキーワードを指定できます。fontショートハンドには複数のプロパティをまとめて指定できます。流動的なタイポグラフィにはclamp()を、間隔を一貫させるには単位なしのline-heightを使用します。
よくある質問
「フォントサイズ、太さ、スタイル」レッスンは無料ですか？
はい。「フォントサイズ、太さ、スタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「フォントサイズ、太さ、スタイル」で何を学びますか？
font-sizeで文字サイズ、font-weightで太さ、font-styleでスタイルを制御します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「フォントサイズ、太さ、スタイル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- フォントファミリーとWebセーフフォント
- フォントサイズ、太さ、スタイル
- テキストの配置、装飾、間隔
- Google Fontsと@font-face