display: flex;でFlexboxレイアウトを有効にします。子要素をフレキシブルに配置できます。

flex-directionプロパティで主軸の方向を指定します。row（横）、column（縦）などがあります。

rowは子要素を横方向に並べ、columnは縦方向に並べます。主軸の方向が変わります。

justify-content: center;で主軸方向（通常は横）の中央に配置します。

align-items: center;で交差軸方向（通常は縦）の中央に配置します。

justify-content: space-between;で最初と最後の要素を両端に、間に均等なスペースを配置します。

flex-wrap: wrap;は子要素が親要素の幅を超えたときに折り返しを許可します。

flex-growは余白がある場合の伸び率、flex-shrinkは縮み率を指定します。flexで一括指定もできます。

display: grid;でCSS Gridレイアウトを有効にします。2次元のレイアウトに適しています。

grid-template-columnsプロパティで列の数とサイズを定義します。

grid-template-rowsプロパティで行の数とサイズを定義します。

frは利用可能なスペースの割合を表す単位です。この場合、1:2:1の比率で3列に分割されます。

gapプロパティでグリッドアイテム間の間隔を指定します。row-gapとcolumn-gapで個別指定も可能です。

repeat(3, 1fr)は「1frを3回繰り返す」という意味で、1fr 1fr 1frと同じです。

メディアクエリは画面サイズやデバイスの特性に応じて異なるスタイルを適用するために使用します。レスポンシブデザインの基本です。

@media (条件) { スタイル }の形式でメディアクエリを記述します。

max-width: 768pxは「画面幅が768px以下」の条件です。タブレットやスマートフォン向けのスタイルによく使います。

min-width: 1024pxは「画面幅が1024px以上」の条件です。デスクトップ向けのスタイルによく使います。

:hoverはマウスカーソルが要素の上にある状態を表します。インタラクティブな効果に使用します。

:focusは要素にフォーカスがある状態（入力欄が選択されているなど）を表します。

:activeは要素がアクティブな状態（クリックされている間など）を表します。

:first-childは親要素の最初の子要素を選択します。

:last-childは親要素の最後の子要素を選択します。

:nth-child(2)は親要素の2番目の子要素を選択します。数値やパターン（odd、evenなど）を指定できます。

oddは奇数番目（1, 3, 5...）、evenは偶数番目（2, 4, 6...）の子要素を選択します。

::beforeは要素の内容の前にコンテンツを挿入する擬似要素です。contentプロパティと一緒に使います。

::afterは要素の内容の後にコンテンツを挿入する擬似要素です。contentプロパティと一緒に使います。

contentプロパティが必須です。空でもcontent: '';と指定する必要があります。

transitionプロパティでプロパティの変化をアニメーション化できます。

すべてのプロパティの変化を0.3秒かけてスムーズ（ease）にアニメーションします。

easeは最初と最後がゆっくり、linearは一定速度、ease-inは最初がゆっくりで加速します。

rotate()関数で要素を回転させます。transformプロパティと一緒に使用します。

scale()関数で要素を拡大・縮小します。transformプロパティと一緒に使用します。

translate()関数で要素を移動させます。transformプロパティと一緒に使用します。

要素を時計回りに45度回転させます。負の値で反時計回りになります。

@keyframesでアニメーションの各段階を定義します。

fadeInという名前のアニメーションを定義し、透明（opacity: 0）から不透明（opacity: 1）に変化させます。

animationプロパティ（またはanimation-name）で定義したアニメーションを要素に適用します。

animation-iteration-count: infinite;でアニメーションを無限に繰り返せます。

relativeは元の位置を基準に配置され、元の位置のスペースは保持されます。子要素の基準点にもなります。

absoluteは最も近いpositionが設定された祖先要素を基準に配置され、元の位置のスペースは消えます。

fixedはビューポート（画面）を基準に配置され、スクロールしても位置が固定されます。

stickyは通常はrelativeのように動作し、指定した位置に達するとfixedのように固定されます。

z-indexプロパティで要素の重なり順（スタック順）を指定します。値が大きいほど前面に表示されます。

z-indexはpositionがstatic以外（relative、absolute、fixed、sticky）の要素にのみ効きます。

[type="text"]はtype属性がtextである要素を選択します。フォーム要素のスタイリングによく使います。

^=は「〜で始まる」を意味し、href属性がhttpsで始まる要素を選択します。

$=は「〜で終わる」を意味し、src属性が.jpgで終わる要素を選択します。

+は隣接兄弟セレクタで、h2の直後にあるp要素を選択します。

~は一般兄弟セレクタで、h2の後にあるすべての兄弟p要素を選択します。

calc()はCSS内で計算を行う関数です。異なる単位を組み合わせた計算も可能です。

親要素の幅から20pxを引いた幅になります。異なる単位を計算できるのがcalc()の特徴です。

min-widthは最小幅、max-widthは最大幅を指定します。要素の幅がその範囲内に制限されます。

object-fitは<img>や<video>などの置換要素がコンテナにどのようにフィットするかを指定します。

coverは要素のアスペクト比を維持しながら、コンテナを完全に覆うようにサイズ調整します。はみ出た部分は切り取られます。

containは要素のアスペクト比を維持しながら、コンテナ内に完全に収まるようにサイズ調整します。余白ができる場合があります。

ellipsisははみ出たテキストを省略記号（...）で表示します。overflow: hidden;とwhite-space: nowrap;と一緒に使います。

nowrapはテキストの折り返しを禁止し、1行で表示します。

break-allは単語の途中でも改行を許可します。長い英単語やURLの折り返しに便利です。

::placeholder擬似要素でプレースホルダーテキストのスタイルを変更できます。

:checked擬似クラスでチェックされたチェックボックスやラジオボタンを選択できます。

:disabled擬似クラスでdisabled属性が付いた無効化されたフォーム要素を選択できます。

:required擬似クラスでrequired属性が付いた必須入力のフォーム要素を選択できます。

:invalid擬似クラスでHTML5バリデーションに失敗した（無効な値の）フォーム要素を選択できます。

outlineはボックスモデルに影響せず（スペースを取らない）、borderはボックスモデルの一部でスペースを取ります。

outline: none;でアウトラインを消せますが、アクセシビリティのために代替のフォーカススタイルを提供すべきです。

border-boxはwidthとheightにパディングとボーダーを含めます。サイズ計算が直感的になります。

text-shadowプロパティでテキストに影を付けます。box-shadowは要素全体の影です。

blur()フィルターは要素にぼかし効果を適用します。値が大きいほどぼかしが強くなります。

grayscale()フィルターは要素をグレースケール（白黒）にします。100%で完全なグレースケールになります。

複数のフィルター関数をスペースで区切って指定します。例：filter: blur(5px) grayscale(50%);

linear-gradient()で直線的なグラデーション、radial-gradient()で放射状のグラデーションを作成できます。

左から右に向かって赤から青に変化する直線グラデーションを作成します。

aspect-ratioは要素のアスペクト比（幅と高さの比率）を指定します。例：aspect-ratio: 16 / 9;

scroll-behavior: smooth;でページ内リンクのスクロールをスムーズなアニメーションにします。

align-selfで個別のフレックスアイテムの交差軸方向の配置を変更できます。

flex: 1;はflex-grow: 1; flex-shrink: 1; flex-basis: 0%;の省略形で、利用可能なスペースを均等に分配します。

grid-columnやgrid-rowで開始位置と終了位置を指定するか、spanキーワードで複数セルにまたがらせます。

グリッドの1番目のラインから3番目のラインまで（2列分）を占めることを意味します。

clamp(min, preferred, max)は値を最小値と最大値の範囲内に制限します。レスポンシブなサイズ指定に便利です。

フォントサイズは2.5vwを基準に、最小1rem、最大2remの範囲内で可変します。

vwはビューポート幅の1%、vhはビューポート高さの1%を表します。レスポンシブデザインに便利です。

pointer-events: none;は要素へのマウスイベント（クリック、ホバーなど）を無効にします。

user-select: none;はユーザーによるテキスト選択を無効にします。