CSS は、さわってわかる。

background: linear-gradient(135deg, #88d1c7 0%, #77a7d7, #eaac3a 100%);

linear-gradient() は、2 つ以上の色が直線に沿って移り変わるグラデーション画像を作る関数です。background や background-image など、画像を受け取るプロパティに指定します。

background: radial-gradient(circle at 30% 30%, #88d1c7, #77a7d7 50%, #eaac3a);

radial-gradient() は、中心から外側へ円や楕円の形に色が広がるグラデーション画像を作る関数です。background や background-image など、画像を受け取るプロパティに指定します。

background: conic-gradient(from 45deg, #88d1c7, #77a7d7, #eaac3a, #88d1c7);

conic-gradient() は、中心のまわりを時計の針のように回りながら色が移り変わるグラデーション画像を作る関数です。円グラフや色相環のような模様を描けます。

background-size: 50%;

background-size は背景画像を描く大きさを指定します。幅と高さを直接書くほか、cover と contain で要素に合わせて伸び縮みさせられます。

background-position: 25% 75%;

background-position は背景画像を置く位置を指定します。キーワード・長さ・パーセントで、横と縦の順に書きます。

background-blend-mode: multiply;

background-blend-mode は、背景画像どうしや、背景画像と背景色をどう混ぜるかを指定します。1 つの要素の背景だけで、写真に色を乗せたような効果が作れます。

border: 8px solid #88d1c7;

border は要素の枠線を指定するショートハンドです。border-width・border-style・border-color の 3 つを、順不同かつ一部を省略してまとめて書けます。

border-radius: 48px 8px;

border-radius は要素の角を丸めます。4 つの角をまとめて指定するショートハンドで、/ で区切ると横と縦の半径が違う楕円の角も作れます。

outline: 4px solid #4a86cb;

outline は要素の外側に線を描くショートハンドです。border と同じく太さ・線種・色を順不同で書けますが、レイアウトには影響しません。

box-shadow: 0 1px 2px #0f172a1f, 0 16px 40px -8px #0f172a40;

box-shadow は要素の枠の外側（または内側）に影を落とします。カンマで区切って複数の影を重ねられます。

filter: hue-rotate(90deg) drop-shadow(0 8px 12px #0f172a40);

filter は、ぼかし・明るさ・色相の回転などの画像効果を、要素の描画結果（子要素も含む）にまとめてかけます。空白で区切って複数の関数を並べられます。

backdrop-filter: blur(8px);

backdrop-filter は、要素の後ろに見えているものにぼかしや色の変化をかけます。すりガラスのような半透明のパネルを作るときの定番です。

opacity: 0.6;

opacity は要素全体の不透明度を指定します。0 で完全に透明、1 でそのままです。子要素も含めて、まとめて透けます。

mix-blend-mode: multiply;

mix-blend-mode は、要素の色をその後ろに描かれているものの色とどう混ぜるかを指定します。画像編集ソフトの「描画モード」と同じ考え方です。

mask-image: linear-gradient(to bottom, #000000 40%, #00000000);

mask-image は、画像やグラデーションの透明度を使って、要素の一部を透けさせます。端をふわっと消したり、模様の形にくり抜いたりできます。

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

clip-path は、要素を図形の形に切り抜きます。円・楕円・四角・多角形などの外側は見えなくなります。

text-shadow: 2px 4px 6px #0f172a40;

text-shadow は文字の形に沿って影を落とします。カンマで区切って複数の影を重ねられます。

text-decoration: underline wavy #e66465 3px;

text-decoration は、文字に下線・上線・打ち消し線を引くショートハンドです。線の種類・線種・色・太さを順不同でまとめて書けます。

-webkit-text-stroke: 3px #4a86cb;

-webkit-text-stroke は、文字の輪郭に線を引いて縁取りします。太さと色を順不同で書くショートハンドです。

text-transform: uppercase;

text-transform は、英字の大文字・小文字や、半角・全角を見た目の上だけ変換します。

letter-spacing: 0.2em;

letter-spacing は、文字と文字の間に足す空きを指定します。負の値にすると詰まります。

text-underline-offset: 12px;

text-underline-offset は、下線を文字からどれだけ離して引くかを指定します。リンクの下線を少し下げたいときなどに使います。

text-emphasis: filled sesame #e66465;

text-emphasis は、文字の 1 つずつに傍点（圏点）を打つショートハンドです。点の形と色をまとめて書けます。

text-emphasis-position: under;

text-emphasis-position は、傍点（text-emphasis）を文字のどちら側に打つかを指定します。横書きは上か下、縦書きは右か左です。

font-weight: 300;

font-weight は文字の太さを指定します。1〜1000 の数値か、normal・bold などのキーワードで書きます。

font-style: italic;

font-style は文字を斜めにするかどうかを指定します。イタリック体（italic）と、ふつうの字形を傾けた斜体（oblique）を選べます。

line-height: 2;

line-height は 1 行の高さを指定します。単位なしの数値で書くと、文字の大きさの何倍かになります。

word-spacing: 0.5em;

word-spacing は、単語の間の空白に足す幅を指定します。負の値にすると単語の間が詰まります。

word-break: break-all;

word-break は、行をどこで折り返してよいかの決まりを変えます。英単語の途中で折り返したり、日本語を文節で折り返したりできます。

overflow-wrap: anywhere;

overflow-wrap は、そのままでは枠からはみ出す長い単語や URL を、途中で折り返してよいかを指定します。

text-align: center;

text-align は、行の中の文字を左右どちらに寄せるかを指定します。中央揃えや両端揃えもできます。

text-indent: 2em;

text-indent は、段落の 1 行目の字下げを指定します。負の値にすると、1 行目が左にはみ出します。

writing-mode: vertical-rl;

writing-mode は、文字を横に並べるか縦に並べるか、行をどちらへ進めるかを指定します。日本語の縦書きは vertical-rl です。

text-orientation: upright;

text-orientation は、縦書きの中で文字を立てるか横に倒すかを指定します。英字を立てて縦に並べたいときに使います。

white-space: pre-wrap;

white-space は、HTML に書いた空白と改行をどう扱うかと、行を折り返すかどうかを決めます。

text-wrap: balance;

text-wrap は、行を折り返すかどうかと、どこで折り返すかの選び方を決めます。見出しの行の長さをそろえたり、最後の行に 1 語だけ残るのを防いだりできます。

text-overflow: ellipsis;

text-overflow は、箱からはみ出した文字の終わりをどう見せるかを決めます。ellipsis にすると、切れたところに「…」が付きます。

-webkit-line-clamp: 2;

-webkit-line-clamp は、文章を決めた行数で打ち切り、最後の行の終わりに「…」を付けます。カードの説明文などを 2〜3 行にそろえるときに使います。

transform: translateX(40px) rotate(15deg);

transform は要素を移動・回転・拡大縮小・傾斜させます。空白で区切って複数の関数を並べると、順番に組み合わさります。

object-fit: contain;

object-fit は、img や video の中身を、要素の枠にどう収めるかを指定します。縦横比が枠と違う画像を、ゆがめずに表示するときに使います。

object-position: 25% 75%;

object-position は、img や video の中身を要素の枠のどこに置くかを指定します。書き方は background-position と同じです。