Web Programming

CSS is a language that specifies the design and layout of webpage elements, providing a way to centrally control colors, text sizes, margins, and other stylistic properties so that webpages look visually appealing.

CSSを初めて学ぶ場合は、セレクタ、色と単位、ボックスモデル、Flexbox・Gridの順に進むと、見た目を段階的に整えられます。

CSS

CSSとは？

HTMLで作った構造に色・文字・余白・配置などの見た目を指定する仕組みです。

Selectors 「セレクタ」

属性セレクタ

pseudo-class（疑似クラス）

HTML要素に特定の状態がある場合にスタイルを適用するためのものです。

::after

要素の直後に内容を挿入する。

::before

要素の直前に内容を挿入する。

:focus

フォーカスが当たった要素にスタイルを指定するための CSSの擬似クラスで、アクセシビリティの向上に役立ちます。

:focus-visible

キーボード操作など、ユーザーに見える形で必要なときだけフォーカスを表示できる仕組みです。

pseudo-element（擬似要素）

コンテンツ内に生成された仮想的な要素を指定するための仕組みです。

::first-letter

要素の最初の文字にスタイルを適用する。

::focus-within

フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。

nth selectors（n番目系セレクタ）

特定の順番に位置する子要素を指定して選択するためのセレクタです。

色の指定方法

CSSでは、キーワードや16進数（Hex）、RGB/RGBA、HSL/HSLAなど複数の形式で色を指定でき、それぞれ透明度やブラウザ対応を考慮しながら目的に応じて使い分けるのがポイントです。

CSSの単位

CSSの単位は、要素のサイズや位置を指定するためのもので、固定された値を持つ絶対単位と、他の要素や画面サイズに応じて変動する相対単位に分かれています。

viewport units

ビューポート単位。画面いっぱいに要素を表示する方法。

グローバル値

inherit

要素のプロパティの計算値を親要素から取得するよう指定します。

initial

要素にプロパティの初期値 (または既定値) を設定します。

unset

プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。

Custom Properties（カスタムプロパティ : CSS Variables）

CSS内で変数を宣言して動的に値を管理できる機能で、デザインの一貫性や保守性を高めるのに役立つ仕組みです。

ボックスモデル

要素の内容、内側の余白、境界線、外側の余白がサイズと配置にどう影響するかを説明します。

Dark mode

CSS で Web サイトをダークモードに対応させる方法

Vendor prefix

ベンダープレフィックスとは、各ブラウザが新しい CSS機能を正式にサポートする前に、それらを試験的に適用できるようにするためのブラウザ固有の接頭辞です。

polyfill

古いブラウザでも新しいCSS機能を使えるようにする仕組みです。

点滅する CSS

animation と @keyframes を使って、文字や要素を点滅させてみます。

3D effect

3D効果とは、要素に奥行きを持たせ、視点やパースペクティブを設定することで、ウェブページ上で立体的に見せる技術です。

Properties

/* 〜 */ comment

:active

クリックして押している間の見た目を指定するための疑似クラスです。

::after

要素の直後に内容を挿入する。

align-content

コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置を指定する。

align-items

フレックスボックスやグリッドコンテナ内の要素の垂直方向（縦方向）の配置を制御する。

align-self

コンテナ内の個別アイテムの縦方向の揃え位置を指定する。

alignment-adjust

テキストや要素のベースラインを微調整して、垂直方向の配置を制御するためのプロパティです。

alignment-baseline

SVGなどでテキストのベースラインを親要素や周囲のテキストに対してどこに合わせるかを指定するためのものです。

animation

アニメーションについてまとめて指定する。

animation-delay

アニメーションがいつ始まるかを指定する。

animation-direction

アニメーションが正方向、逆方向、または交互に再生されるかどうかを指定するために使用されます。

animation-duration

アニメーション１回分の時間の長さを指定する。

animation-fill-mode

アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

animation-iteration-count

アニメーションの繰り返し回数を指定する。

animation-name

要素に適用するアニメーションの名前を指定し、その名前は同じ CSSファイル内で定義された @keyframesルールと一致させる必要があります。

animation-play-state

再生中か一時停止かを指定する。

animation-timing-function

アニメーションのタイミング・進行割合を指定する。

appearance

プラットフォームにおける標準的な UI の外観にする。

aspect-ratio

アスペクト比を定義する。

attr()

HTML要素の属性値をスタイルシート内で利用できるようにする機能です。

backface-visibility

3D空間で変形する要素の背面の表示方法を指定する。

background

背景に関するすべてのプロパティをまとめて一括指定できる。

background-attachment

背景画像の固定・移動を指定する。

background-break [廃止]

インライン要素の背景画像の繰り返し方法を指定する。

background-clip

背景の適用範囲を指定する。

background-color

要素の後ろをベタっと塗る色を決めて、色名・16進数・RGB/HSL・透明度つきまで「どう書けばどう見えるか」をまとめてつかめる。

background-image

背景画像を指定する際に使用します。

background-origin

背景の基準位置を指定する。

background-position

背景（background-image）の置き場所を決めるプロパティです。言い換えると「背景のどの部分を、要素のどこに合わせるか」を指定します。

background-repeat

要素の背景画像を上下左右にどのように繰り返して表示するかを指定するためのプロパティです。

background-size

背景画像のサイズを指定する際に使用します。

baseline-shift

テキストの特定範囲のベースラインを指定し直す。

::before

HTMLを書き足さずに、テキストやアイコンなどの小さな飾りを要素の「手前」に表示してデザインを整えるためのCSSのしくみ。

binding

結合するスタイル規則の参照。

block-size

文章の向き（横書き/縦書き）に関係なく、いつでも“高さ側”の大きさを指定できるプロパティ。横書きでは height と同じ感覚で使え、縦書きでもそのまま効くから、多言語でもレイアウトが崩れにくい。

bookmark-label

ブックマークのラベル（名前）の指定。

bookmark-level

階層構造のブックマークのレベル指定。

bookmark-target

ブックマークのリンク先の指定。

border

ボックスの上下左右のボーダー（境界）のスタイル・太さ・色に対して同じ値をまとめて指定することができます。

border-block-end-width

書字方向に合わせて「最後側の枠線の太さ」を調整できるCSSのプロパティです。

border-block-start-color

要素の上側にあるボーダーの色を指定する。

border-block-start-width

要素の始点側に配置されるボーダーの幅を設定する。

border-bottom

要素の下端に線（ボーダー）を指定して、色・太さ・線の種類などを設定できるプロパティです。

border-bottom-color

下側のボーダーの色を指定する。

border-bottom-left-radius

ボックスの左下の角丸を指定する。

border-bottom-right-radius

ボックスの右下の角丸を指定する。

border-bottom-style

要素の下辺に引く線の種類（実線・点線・破線・二重線など）を指定し、デザインを制御できるプロパティです。

border-bottom-width

下側のボーダーラインの太さを指定する。

border-collapse

セルの枠線（ボーダー）の表示の仕方を指定する。

border-color

ボーダー色の一括指定。

border-image

画像ボーダーを指定する。

border-image-outset

ボーダーイメージ領域がボーダーボックスを超えて拡がる量を指定する。

border-image-repeat

画像ボーダーの繰り返し方法を指定する。

border-image-slice

ボーダー画像の使用範囲を指定する。

border-image-source

画像ボーダーに使用する画像ファイルを指定する。

border-image-width

画像ボーダーの太さを指定する。

border-inline-end-width

border-inline-start-width

border-left

要素の左側にだけボーダー（太さ・色・線のスタイル）をまとめて設定できるプロパティです。

border-left-color

左側のボーダーの色を指定する。

border-left-style

要素の左側に表示するボーダーの「線の種類」を個別に指定する。

border-left-width

左側のボーダーラインの太さを指定する。

border-radius

ボックスの角丸をまとめて指定する。

border-right

要素の右側に枠線の太さ、スタイル、色を一括して設定するショートハンドプロパティです。

border-right-color

右側のボーダーの色を指定する。

border-right-style

右側のボーダーのスタイルを指定する。

border-right-width

右側のボーダーラインの太さを指定する。

border-spacing

セルのボーダーの間隔を指定する。

border-style

ボーダーのスタイルを一括指定する。

border-top

要素の上のふち線を自由にデザインできるスタイルです。

border-top-color

上側のボーダーの色を指定する。

border-top-left-radius

ボックスの左上の角丸を指定する。

border-top-right-radius

ボックスの右上の角丸を指定する。

border-top-style

上側のボーダーのスタイルを指定する。

border-top-width

上側の境界線（border）の幅（width）を指定する。

border-width

ボーダーの太さを一括指定する。

bottom

要素の下端を基準にして、指定された距離分だけ上に位置を調整するプロパティです。

box-decoration-break

ボックスが改行する際の表示形式を指定する。

box-shadow

box-shadow で「控えめで再現性の高い影」を作り、効かない・切れる・重いを原因から切り分けて、実務と試験で迷わない判断ができるようにします。

box-sizing

ボックスサイズの算出方法を指定する。

break-after

ボックス後でのカラムの区切り方法を指定する。

break-before

ボックス前でのカラムの区切り方法を指定する。

break-inside

ボックス途中でのカラムの区切り方法を指定する。

calc()

calc()関数は算術演算を行い、その結果を要素のサイズやマージン、パディングなどに指定することができます。

caption-side

表のタイトルを「上」か「下」に表示するかを決めて、見やすいレイアウトにできるプロパティ。

clamp()

画面が小さい時も大きい時も、値を「ちょうどいい範囲」に自動でおさえてくれる関数で、最小・理想・最大を一度に指定して文字サイズや幅を気持ちよく伸び縮みさせる。

clear

回り込みを解除する

clip

ボックスを切り抜き表示（クリッピング）する

clip-path

指定された形状で要素を切り抜くことができる。

color

文字の色（前景色）を設定します。

color()

先進的な色空間を使って色を細かく指定できる関数です。

color-mix()

2つの色を好きな割合で混ぜて新しい色を作れる関数です。

color-profile

色の表現方法を定義する。

column-count

ブロック要素を複数の列に分割する。

column-fill

複数の列を持つコンテンツを均等に配置するためのプロパティで、"balance"値を指定することで余白を最小限に抑えられます。

column-gap

アイテム同士の縦方向の間隔を指定する。

column-rule

マルチカラムレイアウトの境界線を設定する。

column-rule-color

多列レイアウトで各列の境界線の色を指定する。

column-rule-style

カラムの区切り線のスタイルを指定する。

column-rule-width

多列レイアウトで列間の縦線の太さを指定する。

column-span

複数のカラムを持つレイアウトで、カラムの境界をまたぐ要素を指定する。

column-width

カラム幅を指定する。

columns

要素内のテキストを複数の列に分割する。

container-type

要素のサイズを使って中身のデザインを変えられるように、その要素をコンテナとして指定するためのプロパティです。

content

要素の前後に文字やアイコンをサッと差し込み、リンク先や番号も自動で見せられる “ちょい足し” の道具箱（::before/::after・attr()・counter系の基本とコツまで）。

counter()

Webページ内で項目の自動番号付けを管理するために使用されます。

counters()

Webページ内のネストされた要素に自動的に階層的な番号付けを行うための関数です。

counter-increment

要素の連番（カウンタ）の値を進める。

counter-reset

要素の連番（カウンタ）の値をリセットする。

currentColor

文字色（color）を枠線・影・アイコン（SVG）にもそのまま回して、テーマ切替や保守を楽にする currentColor の使い方と事故回避をまとめたページ。

cursor

カーソルの形状を指定する。

direction

文字表記の方向（左右）を指定する。

display

HTML要素がページ上でどのように配置され表示されるかを決定する基本的な設定です。

empty-cells

空白セルのボーダーの表示・非表示を指定する。

env()

スマホなどの画面の安全な表示領域に合わせて、スタイルを自動調整できる関数です。

::first-letter

段落の最初の1文字だけを簡単に装飾でき、雑誌風のドロップキャップや頭文字の色変更をCSSだけで実現できる疑似要素。

:first-of-type

同じ親要素内にある特定のタグタイプの最初の要素にスタイルを適用するためのCSSセレクタです。

fit-content()

内容に合わせて自動でサイズを決めつつ、指定した上限を超えないようにするための関数で、ボタンやラベル、Grid の列幅などを“ちょうどよく”収めたいときに使う。

flex

フレックスアイテムの伸縮性、縮小性、および基本的なサイズを一度に定義するためのショートハンドです。

flex-basis

Flexboxレイアウト内の要素の初期メインサイズを指定します。

flex-direction

フレックスコンテナ内のアイテムの配置方向を指定する。

flex-grow

フレックスボックス内のアイテムが利用可能な追加スペースをどのように分割して占めるかを決定するための比率を設定します。

flex-shrink

フレックスボックス内のアイテムがコンテナーの空間が不足した際にどれだけ縮小するかを定義する数値を指定します。

flex-wrap

Flexboxコンテナ内の要素の折り返し（改行）の挙動を制御します。

Flexbox

コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。

float

左または右に寄せて配置する。

:focus

いま「どの要素を操作しているか」をハッキリ見せるための合図が:focus。キーボードのTab移動やクリック後に出る“フォーカスの見た目”を、outline中心に安全に整えるコツをまとめています。

:focus-visible

キーボード操作など、ユーザーに見える形で必要なときだけフォーカスを表示できる仕組みです。

:focus-within

フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。

font

フォントに関する指定をまとめて行う。

@font-face

インターネット上のフォントを適用する。

font-family

文字の書体（フォント）の候補をいくつか並べて指定し、パソコンやスマホごとの環境の違いがあっても、できるだけ同じ雰囲気の文字で表示してくれるように調整する。

font-size

文字サイズの指定を、rem・em・%・clamp()の基準から理解して、読みやすさとレイアウト崩れを両立する判断ができるようになります。

font-size-adjust

フォントのサイズを調整する。

font-stretch

フォントの形状を幅広・幅狭にする。

font-style

フォントをイタリック体・斜体にする。

font-variant

フォントをスモールキャップにする。

font-variant-numeric

数字の形や揃え方を細かく調整して、見やすく整えるための設定です。

font-weight

フォントの太さを指定する。

gap

グリッドやフレックスの子要素間のすき間を行・列ごとに指定し、余白（margin）より安全に間隔をそろえます。

grid-area

グリッド内での表示位置と範囲をまとめて指定できるプロパティです。

grid-auto-flow

グリッド内の未配置アイテムを行または列方向に自動的に並べる方法を指定するためのものです。

grid-column

列グリッドの開始と終了についてまとめて指定する。

grid-gap

グリッド内の行や列のすき間を設定するプロパティです。

grid-row

グリッドレイアウトにおいて要素が配置される開始行と終了行を指定するプロパティです。

grid-template-areas

レイアウトの位置を名前で指定して、見た目どおりに並べられる方法です。

grid-template-columns

グリッドトラックの横方向のサイズリストを指定する。

grid-template-rows

グリッドレイアウトにおける各行の高さ（サイズ）を指定して、行方向のレイアウトをコントロールするためのものです。

:has()

中に特定の要素がある親をCSSだけで選べる新しい方法です。

height

要素の高さを指定し、%/vhの基準やoverflow・min/max-heightとの関係まで含めて見切れや崩れを防ぐために使います。

:hover

マウスカーソルが要素の上に乗っている間だけ、色や下線、影などの見た目を切り替えて「ここ押せます」「反応しています」を分かりやすく伝えられる仕組みです。

hsl()

色を「色相・彩度・明度」で直感的に指定できる関数です。

hsla()

色相・彩度・明度・透明度で色を指定する関数。

hyphens

長い単語を途中で改行するかどうかを指定できます。

!important

他のスタイルよりも強く優先して適用させたいときに使います。

inline-block

横に並び、高さや幅を指定できる表示方法です。

inline-end

文字が流れる向きを基準に、「行の終わり側（右や左）」を自動で判断して位置や余白をつけられるキーワード。英語でもアラビア語でも、言語に合わせて自然に見た目を調整できる。

inline-size

文字が流れる向きに合わせて大きさを決める書き方で、横書きなら横幅、縦書きなら高さとして働き、縦書き・横書きを切り替えても同じCSSで扱える。

inline-start

文字が流れる向きに合わせて、自然に「行の始まり側」を指定できる書き方で、左から右の言語なら左、右から左の言語なら右が自動で対象になります。

inset

要素の上下左右の位置をまとめて指定できるプロパティです。

inset-block

段の並ぶ向き（ブロック方向）への位置ズレを、書字方向に合わせて上下または左右として自動で解釈し、inset-block-start/inset-block-end をひとまとめに指定できるショートハンド。

inset-block-end

文字の流れに合わせて「ブロックの終わり側」（横書きなら下）からの距離を指定し、ボタンやバッジを端にぴったり配置できるプロパティ。

inset-block-start

ページの書き方に合わせて、要素を“段落が始まる側”からどれだけ離すかを決める指定で、横書きなら〈上からの距離〉、縦書きなら〈右や左からの距離〉として自然に切り替わる、top の言語対応版です。

inset-inline

文字が流れる向き（横書き/縦書き・LTR/RTL）に合わせて、要素をインライン方向の両端からどれだけ離すかを一度に指定できる位置プロパティ。

inset-inline-end

文字の流れで見た「終わり側」からの距離を指定して、要素をその側に寄せたり固定したりできるプロパティで、右/左や上下が書字方向に合わせて自動で切り替わる。

inset-inline-start

文章の向き（左から右／右から左）に合わせて、自動で「横方向のスタート側」の位置を決められるプロパティ。

:invalid

入力内容が正しくないときに自動で適用されるスタイル指定用の仕組みです。

:is()

複数のセレクターをひとまとめにして『この中のどれでも当てていいよ』という感じでCSSを短く書けるしくみで、同じスタイルをいろんな要素へラクに広げられる。

justify-content

要素の水平方向（横方向）の配置を調整し、余白やスペースの使い方を制御します。

justify-items

コンテナ内のアイテムの主軸方向（初期値では横方向）のデフォルト揃え位置を指定する際に使用します。

justify-self

コンテナ内の個別アイテムの横方向（主軸方向）の揃え位置を指定する。

@keyframes

アニメーションの動きを指定する。

lab()

人間の目に自然な色合いを再現できる新しい色指定方法です。

:last-of-type

指定された要素の兄弟要素の中で最後の特定の要素を選択するために使用されます。

lch()

色の明るさ・鮮やかさ・色味を自然にコントロールできる色指定方法です。

left

左からの配置位置（距離）を指定する。

letter-spacing

文字の間隔を指定する。

line-height

文字サイズを含む「行の高さ」を決めて読みやすさを整えるプロパティで、まずは単位なし 1.5 前後を目安にすると本文がスッと読みやすくなります。

linear-gradient()

画像を使わずに色が直線的に滑らかに変化する背景グラデーションを作成できる機能です。

list-style

リスト項目のマーカーの形・位置・画像を一括で指定できるショートハンドです。

list-style-image

リストのマーク画像。

list-style-position

リストのマークの表示位置を指定する。

list-style-type

リストの先頭に表示するマーカー文字の種類を指定する。

margin

マージンに関する指定をまとめて行う。

margin-block

文章の流れに応じて、上下の余白をまとめて設定します。

margin-bottom

下マージンを指定する。

margin-inline

左右の余白を表示方向に合わせて調整するためのプロパティです。

margin-inline-end

文章の流れの終わり側にできる余白を指定し、書く向きが変わっても自動で位置が切り替わるマージン。

margin-inline-start

文章の書き始め側に自動で余白をつけてくれるプロパティで、左から書く言語なら左側、右から書く言語なら右側にマージンをつけられる。

margin-left

左マージンを指定する。

margin-right

右マージンを指定する。

margin-top

上マージンを指定する。

::marker

リストのマーカー部分だけにスタイルを当てられます。

marker-offset

リストマーカーとリスト内容の間隔を指定する。

mask

画像やグラデーションを“型紙”みたいに使って、要素の見える部分だけを切り抜いたり、じわっと消したりできるCSSです。

mask-image

要素の見える部分だけを“型抜き”するための画像（またはグラデーション）を指定して、透明〜不透明の濃さで“どこをどれだけ見せるか”をコントロールできる機能

max()

複数のサイズ候補の中から“いちばん大きい値”を自動で選ばせて、文字やブロックが小さくなりすぎない“下限”をかんたんに守らせる道具。

max-block-size

文章の流れに合わせた縦方向の最大サイズを決めて、それ以上は広がらないようにできるプロパティ。

max-content

中身が収まる最適なサイズまで広がる自動サイズ指定。

max-height

高さの最大値を指定する。

max-inline-size

長い文章やボックスが横に伸びすぎないように、**書き方向に合わせた“最大の広がり”**を決めて読みやすさを保つための上限スイッチ。

max-width

要素の最大幅を指定する。

@media

画面サイズやデバイスの特性に合わせて、どの幅・向き・操作環境のときにどんなレイアウトやデザインを適用するかを、CSS の @media で切り替えるための書き方と代表的なメディア特性をまとめたページです。

min()

画面や文字の大きさを候補として並べ、常に“いちばん小さい値”だけを採用して、広がりすぎ・大きくなりすぎを手軽に止める関数。

min-block-size

要素が縦書きでも横書きでも、これ以上小さくならない最小の高さ（または幅）を決めておくためのプロパティ。

min-content

内容の一番長い単語に合わせて幅が決まります。

min-height

高さの最小値を指定する。

min-inline-size

文字が並ぶ方向に対して、これ以上小さくならないように最小サイズを決めるプロパティ。

min-width

幅の最小値を指定する。

minmax()

要素のサイズを「最小サイズと最大サイズの間」で自動調整する関数です。

object-fit

画像やビデオがそのコンテナ要素にどのように収まるか（縦横比を保つかどうかなど）を指定するプロパティです。

object-position

<img> や <video> のような「置き換え要素」の中身（画像/動画）を、箱の中でどこに寄せるかを決めるプロパティです。

opacity

0.0～1.0の数値で要素全体の透明度を指定し、その中の子要素も含めて一括して「どれだけ透けて見えるか」を制御できるプロパティです。

orphans

テキストブロックの最後の行に少なくともいくつの単語を残すかを制御する。

outline

アウトラインのスタイル・太さ・色を指定する。

outline-color

要素のアウトライン（輪郭）の色を指定する。

outline-offset

アウトラインの位置を指定する。

outline-style

アウトラインのスタイルを指定する。

outline-width

要素の周囲に描かれるアウトラインの太さを指定する。

overflow

はみ出た要素の表示方法を指定する。

overflow-wrap

長い単語やURLを自動で途中改行して、レイアウト崩れを防ぎます。

overflow-x

ボックスの範囲内に内容が収まらない場合に、はみ出た要素の左右の表示方法を指定する。

overflow-y

はみ出た要素の上下の表示方法を指定する。

padding

要素の内側の余白（コンテンツと枠線の間）を指定して、読みやすさやタップ領域を整え、%の基準やbox-sizing絡みの崩れも防ぐために使います。

padding-block

文章の流れに合わせて上下の余白をまとめてつけられる、レイアウトが崩れにくい便利なプロパティ。

padding-bottom

要素の下部に余白（内側のスペース）を設定する。

padding-inline

文字の流れる方向に合わせて、左右の内側のすき間をまとめて決められるプロパティ。

padding-inline-start

文章が始まる側にだけ余白をつけてくれるプロパティで、文字の流れが左→右でも右→左でも自動でちょうどいい場所にパディングが入るようにしてくれるもの。

padding-left

要素の左側の余白（内側のスペース）を設定する。

padding-right

要素の右側の余白（内側のスペース）を設定する。

padding-top

要素の上部に余白（内側のスペース）を設定する。

page-break-after → break-after

印刷時の改ページ位置を指定する。

page-break-before

印刷時に要素の前で強制的に改ページを行い、新しいページの先頭に配置するためのプロパティです。

page-break-inside

印刷やページ分割時に要素内で改ページを制御する。

perspective

要素に3D効果を与える際の視点の距離を設定し、その要素の奥行き感を調整するためのものです。

perspective-origin

3D変換において視点の位置を設定し、要素がどの方向から見られるかを決定するプロパティです。

place-content

グリッドやフレックスの中で、中身全体を上下・左右どこに寄せるかをまとめて決めるプロパティ。

place-items

グリッドやフレックスの中で、子要素を上下・左右にそろえる位置を、まとめて指定できるショートカット。

pointer-events

要素を「クリックできる／できない」に切り替えて、上にかぶさっている飾りやオーバーレイを“触れない透明な存在”にして、背後のリンクやボタンをそのまま操作できるようにするためのCSSです。

position

ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する。

prefers-color-scheme

ユーザーのダーク／ライト設定に応じてデザインを自動切替できます。

prefers-reduced-motion

ユーザーの「動きを減らす」設定に応じて、アニメーションなどを控えめにできる仕組みです。

quotes

引用符を設定する

radial-gradient()

円や楕円を中心に色が広がる背景グラデーションを作る関数です。

repeat()

同じサイズの列や行を何回も繰り返して指定できるグリッド用の書き方。

resize

要素をドラッグしてサイズ変更できるようにするプロパティです。

rgb()

色を赤・緑・青の光の強さで作るための色指定方法です。

rgba()

透明度つきの色を指定できる方法です。

right

要素の位置を、右端からの距離で調整します。

:root

ページ全体に共通する設定や変数をまとめておける、いちばん上の親のようなセレクター。

row-gap

アイテム同士の横方向の間隔を指定する。

tab-size

テキスト内のタブ文字の幅を設定する。

table-layout

テーブルの幅と列の幅の調整方法を指定する。

text-align

行揃えの位置・均等割付を指定する。

text-align-last

テキストコンテンツの最後の行の水平方向の位置を指定する。

text-decoration

テキストの下線・上線・取消線・点滅を指定する。

text-decoration-color

text-decoration-lineプロパティでテキストにつけた傍線の色を指定する。

text-decoration-line

テキストに傍線をつける。

text-decoration-skip

テキスト傍線のスキップ方法を指定する。

text-decoration-style

テキスト傍線のスタイルを指定する。

text-decoration-thickness

text-decoration-lineプロパティで指定された下線、上線、打ち消し線、または二重線の太さを変更する。

text-indent

インデント（字下げ）を制御する。

text-orientation

縦書きを指定した場合の文字の表示方向を指定します。

text-overflow

コンテナの幅を超えたテキストを切り取るか、省略記号（…）で表示するかを指定するプロパティです。

text-shadow

文字のまわりに影や光のにじみを足して、背景がごちゃついていても文字を読みやすくしたり、立体感やネオンっぽい雰囲気を作ったりできる指定です。

text-size-adjust

一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。

text-transform

大文字・小文字・全角文字への変換を指定する。

text-underline-offset

テキストの下線を基準位置からどれだけ離すか（オフセット）を指定し、可読性やデザイン面での調整を柔軟に行えるようにするためのプロパティです。

top

top は“上からどれだけズラすか”を決めるプロパティです。position を relative/absolute/fixed/sticky にしたときの違いや、%の基準、動かない時のチェック方法を、短いコード例つきでやさしく解説します。

touch-callout

対象を長押しすることで現れるコールアウト表示を制御します。

transform

要素に2D変形、または、3D変形を適用する。

transform-style

要素の子要素が3D変換の影響を受けるかどうかを指定するためのもので、flatは2D平面上で描画し、preserve-3dは3D空間内で描画します。

transition

transition効果（時間的変化）をまとめて指定する。

transparent

要素の色や背景を完全に透明にして、背後を透けさせるために使います。

unicode-bidi

Unicode の文字表記の方向を上書きする。

url()

背景画像やフォントなどの外部ファイルを「この場所にあるよ」と指定して、ページに読み込ませるための仕組みです。

user-select

要素内のテキストや画像をユーザーが範囲選択できるかどうかを制御し、コピー操作の可否を指定します。

var()

デザインでよく使う色や余白などの値を「名前」でまとめておき、あとから var() で呼び出せるしくみ。全体のデザイン変更が簡単になる。

vertical-align

インライン要素やテーブルセル内のテキストや画像を上下方向に揃えるために使います。

view-transition-name

ページの切り替え時に特定の要素を個別にアニメーションさせるために付ける“ラベル”です。

visibility

visibilityで「見えないけど場所は残す」非表示を作り、displayやopacityと混同せずに実務で安全に使い分けられるようになります。

white-space

要素内の空白や改行の扱いと、テキストの折り返し方法を指定するためのものです。

widows

改ページされる際の次ページの最低行数を指定する。

width

要素の幅を指定する。

word-break

長い英単語やURLが横幅からはみ出しそうなときに、単語の途中で切ってもよいか・なるべく区切りで折り返すかを選んで、レイアウト崩れと読みやすさのバランスを取るためのスイッチ。

word-spacing

テキスト内の単語の間隔を調整する。

word-wrap

長い単語やURLを途中で折り返して表示できるプロパティです。

writing-mode

縦書き・横書きの別と行ブロックを並べる方向を指定します。

z-index

要素のスタッキングコンテキスト内での優先順位（重なり）を調整するために使用される。