色、タイポグラフィ、ボックスモデル
hex、rgb、hsl値で色を適用し、フォントを選び、サイズと行の高さを設定し、margin、border、paddingで要素間の間隔を調整します。
「色、タイポグラフィ、ボックスモデル」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
CSSの色の値
CSSは複数の色形式に対応しています。文脈に応じて、最もわかりやすい形式を使ってください。ブランドカラーには16進数コード、色の調整にはhsl()、プログラムで扱う値にはrgb()、素早いプロトタイピングには名前付きカラーが適しています。
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */背景色と背景画像
background-colorで要素の背景を設定します。グラデーションやURLにはbackground-imageを使用します。backgroundの短縮記法を使うと、色、画像、位置、サイズ、繰り返しを1つの宣言にまとめられます。
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;フォントプロパティ
タイポグラフィは次のプロパティで制御します。font-family（書体）、font-size（em、rem、px）、font-weight（100～900）、font-style（斜体）、line-height（読みやすさを左右する行の高さ）、letter-spacing（字間）です。
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}テキストプロパティ
その他のテキストスタイルには、text-align（left、center、right、justify）、text-decoration（underline、line-through、none）、text-transform（uppercase、capitalize）、切り詰めに使うtext-overflow: ellipsisがあります。
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}remとemとpxの違い
pxは絶対値です。emは要素自身のフォントサイズを基準とする相対値で、カスケードの影響を受けます。remはルートのフォントサイズを基準とするため、予測しやすい値です。ユーザーのフォント設定を尊重するため、サイズ指定の多くにはremを使用してください。
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */ボックスモデル
すべてのHTML要素は、4つの層を持つ長方形のボックスです。content（要素そのものの寸法）、padding（ボーダーの内側の余白）、border、margin（ボーダーの外側の余白）で構成されます。
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
デフォルトのcontent-boxでは、指定した幅にpaddingとborderが加算されます。box-sizing: border-boxを指定すると、paddingとborderが指定した幅に含まれます。ほとんどの場合、こちらが望ましい動作です。
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}マージンの相殺
隣接するブロック要素間の垂直方向のマージンは相殺され、大きい方のマージンだけが適用されます。親要素とその最初または最後の子要素のマージンも相殺されます。FlexboxとGridの子要素ではマージンは相殺されません。
paddingの短縮記法
短縮記法padding: top right bottom leftですべての辺を設定できます。2つの値を指定すると、垂直方向と水平方向に設定されます。3つの値を指定すると、上、左右、下に設定されます。
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */borderプロパティ
border: width style colorの短縮記法でボーダーを設定します。個別の辺にはborder-topなどを使用します。角を丸くするにはborder-radiusを使用します。outlineは似ていますが、レイアウトに影響しません。
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}オーバーフロー
overflow: hiddenは、要素のサイズを超えたコンテンツを切り取ります。overflow: scrollはスクロールバーを追加します。overflow: autoは必要な場合にだけスクロールバーを追加します。overflow-xとoverflow-yを使うと、軸ごとに個別に制御できます。
確認問題
box-sizing: border-box、width: 300px; padding: 20px; border: 2px solidの場合、要素のレンダリング後の合計幅はいくつですか？
まとめ：色、タイポグラフィ、ボックスモデル
色はhex、rgb、hslで設定します。フォントはfont-family、サイズ、太さ、line-heightで適用します。すべての要素はcontent + padding + border + marginからなるボックスです。予測しやすいサイズ指定のために、グローバルでbox-sizing: border-boxを有効にしてください。
よくある質問
「色、タイポグラフィ、ボックスモデル」レッスンは無料ですか？
はい。「色、タイポグラフィ、ボックスモデル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「色、タイポグラフィ、ボックスモデル」で何を学びますか？
hex、rgb、hsl値で色を適用し、フォントを選び、サイズと行の高さを設定し、margin、border、paddingで要素間の間隔を調整します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「色、タイポグラフィ、ボックスモデル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。