CSS ドキュメント
簡潔で実例中心の CSS リファレンス。概念を読み、コードを見て、Coddy のジャーニーで実践しましょう。
コースを始めるはじめに
- インライン CSSインライン CSS は style 属性を使って要素に直接宣言を書きます。書き方、インラインスタイルが適している場面、スタイルシートより優先される理由、内部 CSS や外部 CSS との違いを解説します。
- 外部 CSS外部 CSS は .css ファイルに書き、各ページから <link rel="stylesheet"> で読み込みます。内部 CSS は 1 つのページの <style> 要素に書きます。両方の書き方、ファイルパスの指定、両者がぶつかったときにどちらが勝つかを解説します。
- CSS コメントCSS のコメントの書き方は /* ... */ の 1 種類だけで、1 行でも複数行でも使えます。コメントを書ける場所、ルールのコメントアウト、// や入れ子のコメントが次のルールを黙って壊す理由を解説します。
- !important!important を付けた宣言は、詳細度に関係なく通常の宣言に勝ちます。何に勝ち、何に負けるのか、その下で詳細度がどう計算されるのか、スタイルの競合をもっときれいに解決する方法を解説します。
- CSS 変数CSS 変数 (カスタムプロパティ) は値を一度だけ定義し、var() で使い回す仕組みです。:root での宣言、スコープと上書き、フォールバック値、JavaScript でのテーマ切り替え、無効な値の落とし穴を解説します。
セレクタ
- CSS セレクタCSS セレクタは、ルールがスタイルを当てる要素を選びます。すべてのセレクタの種類、4 つの結合子 (子孫、子、隣接兄弟、一般兄弟)、属性セレクタ、グループ化を解説し、セレクタをその場で試せます。
- クラスセレクタクラスセレクタ (.name) はそのクラスを持つすべての要素を、ID セレクタ (#name) はその id を持つ 1 つの要素をスタイルします。書き方、複数クラスとクラスの連結、class と id の違い、命名ルール、JavaScript でのクラスの切り替えを解説します。
- CSS 疑似クラス疑似クラスは位置や状態で要素を選択します。:nth-child()、:first-child、:not()、:focus、:checked、:has() などです。書き方、an+b の数式 (その場で試せるテスター付き)、nth-child と nth-of-type の違いを解説します。
- ::before と ::after::before と ::after は、CSS だけで要素の最初と最後の子として生成コンテンツを挿入します。content プロパティ、空の content が必要な理由、配置のしかた、attr() を使ったツールチップ、カウンター、使えない要素を解説します。
- CSS ホバー:hover 疑似クラスは、ポインターが要素の上にある間だけ要素をスタイルします。ボタンやカードのホバー効果、なめらかなトランジション、:link、:visited、:hover、:active を正しい順番で書くリンクの色、タッチスクリーンでのホバーを解説します。
ボックスモデル
- ボックスモデルすべての要素は content、padding、border、margin の 4 層でできたボックスです。各層がサイズにどう加わるか、box-sizing: border-box で計算がどう変わるかを解説し、各層をその場で測って見せます。
- CSS paddingpadding は要素の内側、内容と border の間の余白です。1 から 4 つの値で書く padding のショートハンド、片側だけのプロパティ、論理プロパティの padding、パーセント指定、padding で要素のサイズがどう変わるかを解説します。
- CSS marginmargin は要素の border の外側にある透明な余白で、ほかの要素を押しのけます。margin のショートハンド、margin: 0 auto での中央寄せ、マイナスの margin、flexbox での margin auto、縦の margin が相殺される理由を解説します。
- margin と paddingpadding は要素の border の内側の余白、margin は外側の余白です。同じボックスで両方を並べてその場で確認し、背景、クリックできる範囲、要素間の余白、中央寄せでどちらを使うべきかを解説します。
- CSS borderborder プロパティは要素の padding の周りに線を描きます。border のショートハンド、すべての線の種類、色と片側だけの指定、border-radius での角丸、border と outline の違いを解説します。
- width と heightwidth と height は要素のボックスのサイズを指定します。固定サイズとパーセント、height: 100% がよく効かない理由、柔軟なレイアウトのための min-height と max-width、auto と 100% の違い、fit-content などのキーワードを解説します。
テキストとフォント
- CSS 文字サイズfont-size プロパティは文字の大きさを指定します。使える単位 (px、rem、em、%、キーワード、vw)、HTML で文字サイズを変える方法、rem が無難な選択である理由、em のサイズが掛け算で積み重なる仕組みを解説します。
- CSS 太字font-weight プロパティは文字を太字、細字、その中間にします。100 から 900 までの数値、normal と bold、相対指定の bolder と lighter、太さを変えても見た目が変わらないことがある理由を解説します。
- CSS 行間line-height はテキストの各行の高さ、つまり行と行の間隔を指定します。単位なしの数値が基本の選択である理由、px、em、% の値が継承のされ方でどう違うか、本文と見出しに適した値を解説します。
- CSS 文字色<font color> タグは廃止されていて、HTML の文字色は CSS の color プロパティで指定します。ページ全体、1 つの単語、リンク、見出しの色の変え方を、色の名前、16 進数、rgb を使って解説し、テキストを読みやすく保つ方法も紹介します。
- CSS 下線text-decoration でテキストに下線を引き、その線の色、種類、太さ、テキストからの距離を調整します。リンクの下線を消す方法と、消すべきでない場面も解説します。
- CSS 文字の影text-shadow はテキストの後ろに 1 つ以上の影を描きます。4 つの値 (横のずれ、縦のずれ、ぼかし、色)、影を重ねて光彩、縁取り、立体の効果を作る方法、影で騒がしい背景の上の文字を読みやすくする方法を解説します。
色と背景
- CSS 色指定CSS で色を書くすべての方法を解説します。色の名前、16 進数のカラーコード、rgb() と rgba()、hsl()、アルファチャンネルによる透明度、currentColor、新しい oklch() と color-mix()。それぞれにライブ例と変換ツールがあります。
- CSS 背景色background-color は要素のボックスを色で塗ります。ページ全体、div、テーブルの行、1 つの単語の背景色の指定方法、透明度の仕組み、bgcolor が廃止された理由、background-color と background ショートハンドの違いを解説します。
- CSS 背景画像background-image は要素の内容の後ろに画像やグラデーションを表示します。url() とグラデーション、background-size (cover と contain)、background-position、background-repeat、複数の背景の重ね方、background のショートハンドを解説します。
- CSS グラデーションCSS のグラデーションは、ブラウザが色から描く画像です。radial-gradient (形、サイズ、位置)、linear-gradient (方向と角度)、conic-gradient、カラーストップ、ストライプを作るくっきりした境目、繰り返しグラデーション、グラデーション文字を解説します。
- CSS box-shadowbox-shadow は要素のボックスの周りに影を描きます。5 つの値 (x、y、ぼかし、広がり、色)、内側の影 inset、自然な奥行きを出す複数の影の重ね方、spread で作るフォーカスリング、影がにごって見える間違いを解説します。
レイアウト
- CSS displaydisplay プロパティは、要素がレイアウトにどう参加するかを決めます。block、inline、inline-block の違いを並べたボックスで確かめ、display: none と visibility: hidden の違い、flex、grid、flow-root、contents の使いどころを解説します。
- CSS positionposition: absolute は、一番近い位置指定された祖先の中で、要素を正確な座標に置きます。absolute と position: relative の組み合わせ方、fixed と sticky、top/right/bottom/left と inset、sticky が効かないときの原因を解説します。
- CSS z-indexz-index は、重なった要素のどれを手前に描くかを決めます。z-index が効く要素、z-index 9999 でも負けることがある理由 (スタッキングコンテキスト)、スタッキングコンテキストを作るもの、z-index が効かないときの直し方を解説します。
- CSS overflowoverflow は、ボックスに収まらない内容をどうするか (表示する、切り取る、スクロールバーを付ける) を決めます。visible、hidden、scroll、auto、clip、overflow-x と overflow-y、文字の省略記号 (…)、overflow がレイアウトに与える副作用を解説します。
- CSS float と clearfloat は要素を片側に寄せ、雑誌の写真のように文章を回り込ませます。float の left、right、inline-start、clear による回り込みの解除、float の親の高さが 0 になる理由と display: flow-root での直し方、ページのレイアウトに float を使わなくなった理由を解説します。
- CSS 中央寄せdiv を横、縦、上下左右の中央に寄せる方法をすべて紹介します。flexbox、grid、margin auto、absolute と transform、inset と margin auto、align-content。どの例もその場で動き、中央からのずれを自分で測ります。どれを使うべきかの表付きです。
- 画像の中央寄せ<img> はインライン要素なので、文字と同じく親に text-align: center を指定すれば中央に寄ります。block にして margin: 0 auto にする方法、flexbox や grid で縦方向も含めて中央に置く方法もあります。どの方法もその場で動き、結果を測ります。
FlexboxとGrid
- CSS flexboxflexbox は要素を横か縦に並べ、スペースの分け方と揃え方を制御します。display: flex、主軸と交差軸、コンテナのすべてのプロパティ、flex-grow、flex-shrink、flex-basis を、各アイテムの位置を実測するプレイグラウンドで解説します。
- CSS justify-contentjustify-content は flex アイテムを主軸に沿って、align-items は交差軸に沿って配置します。すべての値を実測して並べ、クリックで揃え方を試せるグリッド、align-self、justify-content が効かないときの原因を解説します。
- CSS flex-wrapflex-wrap は flex アイテムを 1 行に詰めるか次の行に折り返すかを決め、flex-direction は横に並べるか縦に並べるかを決めます。どちらもライブ例で解説し、flex-flow のショートハンド、align-content、メディアクエリなしのレスポンシブなカードの並びも紹介します。
- CSS GridCSS grid は要素を行と列に同時に配置します。display: grid、grid-template-columns、fr 単位、repeat() と minmax()、auto-fill と auto-fit の違い、grid-column での配置、grid-template-areas を、編集して実測できるライブのグリッドで解説します。
レスポンシブデザイン
- メディアクエリメディアクエリは、画面の最小幅、ダークモード、マウスのポインターなどの条件が成り立つときだけ CSS を適用します。@media の書き方、モバイルファーストのブレイクポイント、範囲の構文、prefers-color-scheme、JavaScript の matchMedia、コンテナクエリを解説します。
- rem と em と pxrem はルートのフォントサイズ、em はその要素のフォントサイズが基準で、px は固定、% はプロパティによって基準が変わります。入れ子のデモで各単位を実測し、em が掛け算で増える理由、使い分け、vw、vh、dvh のしくみを解説します。
- CSS clamp()clamp(MIN, PREFERRED, MAX) は推奨値を返しますが、MIN より小さく、MAX より大きくはなりません。メディアクエリなしでフォントサイズや余白を画面に合わせて変える方法、真ん中の値の計算方法、min() と max() との関係を解説します。
- CSS calc()calc() を使うと CSS の中で計算ができ、100% から固定の 200px のサイドバーを引くように、単位を混ぜられます。書き方のルール (空白が重要)、CSS 変数と組み合わせた calc()、calc() で解決できるよくあるレイアウト、無効な calc() が黙って無視される理由を解説します。
トランジションとエフェクト
- CSS transitionCSS の transition は、ホバーなどでプロパティが変わったとき、古い値から新しい値へアニメーションさせます。transition のショートハンド、すべてのタイミング関数の比較、変化させられるものとできないもの、height: auto の回避策、動きを減らす設定を解説します。
- CSS アニメーションCSS アニメーションは、@keyframes で決めた段階に沿って、要素を自動で、何度でも動かします。@keyframes の書き方、8 つの animation プロパティすべて、fill-mode と direction、読み込み中の表示、一時停止、動きを減らす設定への対応を解説します。
- CSS transformtransform プロパティは、周りのレイアウトを変えずに要素を移動、拡大縮小、回転、傾斜させます。すべての transform 関数、関数の順番が重要な理由、transform-origin、個別の translate、scale、rotate プロパティ、translate(-50%, -50%) で中央に置くテクニックを解説します。
- CSS rotate (回転)transform: rotate(45deg) か、新しい rotate プロパティで要素を回転させます。角度の単位 (deg、turn、rad)、transform-origin で角を中心に回転させる方法、文字やアイコンの回転、回り続けるローディング、rotateX と rotateY の 3D 回転を解説します。
- CSS opacity (透明度)opacity は、要素とその中のすべてを 0 (見えない) から 1 (不透明) までの透明度にします。値の書き方、opacity で文字まで薄くなる理由と背景だけを透明にする方法、opacity: 0 と visibility と display の違い、ホバーでのフェードを解説します。
- CSS filter (ぼかし)filter: blur(5px) は要素をぼかし、backdrop-filter: blur() はその後ろにあるものをぼかします。すべての filter 関数 (brightness、contrast、grayscale、sepia、saturate、hue-rotate、invert、drop-shadow) をスライダーで試し、組み合わせ方と、ぼかしの縁の問題を解説します。
