English 中文 العربية 日本語 Português

CSS プロパティリファレンス

最終更新：2026-09-13

CSS プロパティリファレンス

Alphabetical list of 153 CSS properties with descriptions.

A
aspect-ratioaspect-ratio プロパティは要素に固定の幅対高さ比を保たせ、昔の padding パーセンテージのハックを不要にします。初期値の auto は画像などと同様に要素の固有の比率を使います。これは比較的新しい CSS 機能で、動画やカードのレスポンシブなコンテナを大きく簡素化します。
align-itemsalign-items プロパティは、すべての flex アイテムの交差軸（cross axis）方向の配置を設定し、主軸（main axis）に垂直な方向の位置を制御します。初期値は stretch で、アイテムは交差軸方向にコンテナの高さいっぱいに引き伸ばされます。このプロパティは垂直中央揃え、上端揃え、下端揃え、ベースライン揃えなどの一般的なレイアウトによく使われます。
animationanimation は、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state をまとめたショートハンドです。@keyframes と組み合わせることで、多段階でループ可能・一時停止可能なアニメーションシーケンスを定義できます。transition と異なり、トリガーなしで自動再生されるため、ローディング表示やカルーセル、呼吸（ブリージング）エフェクトなど継続的な視覚表現に最適です。
align-selfalign-self プロパティは単一のフレックスアイテムの交叉軸方向の配置を設定し、コンテナの align-items の既定値を上書きします。初期値は auto で、コンテナの align-items の値を継承します。これにより、他のアイテムとは異なる配置（たとえば他が上揃えのときに 1 つのアイテムだけ中央揃え）ができ、ナビゲーションバーやカードレイアウトで非常に便利です。
align-contentalign-content プロパティは、フレックスアイテムの複数行が交叉軸上でどう配置され、どう間隔を空けるかを設定します。効果を発揮するのは、折り返し（flex-wrap: wrap）によって複数行になったときだけです。justify-content と同様に機能しますが、交叉軸上で作用し、行間の空間を分配します。1 行のみの場合は何もしません。その場合は align-items を使ってください。
animation-durationanimation-duration プロパティは、アニメーションが 1 周期を完了するまでにかかる時間を設定します。短い値はアニメーションを速くし、長い値は遅くします。これは animation ショートハンドの一部であり、単独で使うとショートハンドで設定した時間を上書きします。
animation-timing-functionanimation-timing-function プロパティは、アニメーションの速度が時間とともにどう変化するかを定義します — 一定の割合で進むか、初めが速くて遅くなるか、あるいは弾むような感じになるか。中間フレームの時間分布を制御することで、動きをより物理的に、あるいはより樣式化して感じさせ、洗練されたアニメーション品質の鍵となるプロパティです。
appearanceappearance プロパティは、要素がブラウザのネイティブな外観（フォームコントロールのデフォルトのレンダリング）を使用するかどうかを制御します。none に設定すると、要素はネイティブな見た目を捨て、そのスタイルが CSS によって完全に制御されるようになるため、フォームコントロールをカスタマイズするための重要なプロパティとなります。
B
box-sizingbox-sizing プロパティは width と height がどう計算されるかを決定し、CSS ボックスモデルを理解する鍵です。初期値の content-box はコンテンツ領域だけをサイズとし、padding と border がその上に加算されます。border-box は指定した width と height の中に padding と border を含み、より直感的です。現代のプロジェクトでは border-box をグローバルに設定するのが一般的です。
borderborder 省略形プロパティは CSS で最もよく使われるプロパティの一つで、要素の境界線の幅・スタイル・色を1つの宣言で設定できます。border は要素のコンテンツの周りを、padding のすぐ内側に囲み、ボックスモデルの重要な一部です。border を使えば、どんな要素にもすばやく見える輪郭を与えられます。
border-widthborder-width は要素のボーダーの太さを設定します。あらかじめ定義されたキーワード thin、medium、thick を使うか、px や em などの明示的な長さの値を指定できます。単独で使用した場合、幅のみを制御し、スタイルと色は変更しません。
border-styleborder-style はボーダーの線の外観（solid、dashed、dotted など）を定義します。ボーダーが表示されるかどうかの鍵であり、border-width や border-color を設定していても、border-style が none の場合はボーダーは表示されません。CSS では 10 種類の線スタイルから選択できます。
border-colorborder-color は要素のボーダーの色を設定します。color 名、hex 値、rgb()、rgba()、hsl() など、あらゆる CSS の色形式を受け付けます。単独で使用した場合、幅やスタイルではなくボーダーの色だけに影響します。
border-radiusborder-radius は要素の鋭角な角を丸め、モダンな UI デザインで最もよく使われる装飾プロパティの一つです。長さまたはパーセントの値を受け付け、値が大きいほど丸みが強くなります。半径が辺の長さの半分以上になると、角は半円または完全な円になります。
background-colorbackground-color は要素の背景色を設定し、ページデザインで最も基本的なプロパティの一つです。すべての CSS の色の値を受け付け、transparent キーワードで透過背景になります。このプロパティは継承されず、すべての要素の背景は既定で透明です。
backgroundbackground は背景プロパティのショートハンドで、背景色・画像・位置・サイズ・繰り返しなどを 1 つの宣言で設定できます。このショートハンドはコードを簡潔に保ち、省略したサブプロパティは既定値にリセットされます。これは CSS で最も広く使われるショートハンドの一つです。
background-imagebackground-image は要素に 1 つ以上の背景画像を設定し、url() パスとグラデーション関数に対応します。複数の背景はカンマ区切りで、先に書いた画像が上層になります。通常は background-size や background-position と組み合わせて使われます。
background-positionbackground-position は要素内での背景画像の開始位置を設定し、既定は左上隅（0% 0%）です。キーワード（left、center、right、top、bottom）、長さの値、パーセントを受け付けます。通常は background-image と組み合わせて背景を正確に配置します。
background-sizebackground-size は背景画像の大きさを制御し、CSS3 で導入されました。auto（画像の本来のサイズ）、cover（コンテナ全体を覆う）、contain（コンテナ内に画像全体を表示）、および明示的な長さとパーセントの値に対応します。このプロパティはレスポンシブデザインで非常に役立ちます。
box-shadowbox-shadow プロパティは、要素のボックス（border box）の周囲または内部に 1 つ以上の影のレイヤーを追加し、ページ上で要素に奥行きと階層感を与えます。これはフローティングカードや押し込まれたボタンなどのモダンな UI エフェクトの中核となるプロパティであり、オフセット、ブラー半径（ぼかし）、スプレッド半径（拡散）、および色をサポートします。
border-imageborder-image を使うと、実線や破線の代わりに画像を使って要素のボーダーを描画できます。画像は 9 分割のグリッド（4 つの角、4 つの辺、中央の領域）にスライスされ、各部分が対応するボーダー領域にマッピングされます。これは複雑な装飾ボーダーを作るための強力なツールです。
background-attachmentbackground-attachment は、背景画像がページと一緒にスクロールするかどうかを決めます。デフォルトの scroll は、背景が要素のコンテンツと共にスクロールすることを意味します。fixed は背景をビューポートに固定し、視差（パララックス）効果を生み出します。local は背景を要素の内部コンテンツと共にスクロールさせます。視覚的な効果のためによく使われます。
background-clipbackground-clip は背景の塗りつぶし領域を制御し、背景（色または画像）がどのボックスモデルの領域に表示されるかを決めます。デフォルトの border-box は背景をボーダーの下まで広げ、padding-box はパディング領域にクリップし、content-box はコンテンツ領域のみに表示します。CSS3 では、テキストクリップ効果のための text 値も追加されました。
background-originbackground-origin は背景画像の位置決めの基準領域を設定し、background-position の基準線を決定します。デフォルトの padding-box は背景をパディング領域に対して配置し、border-box はボーダー領域、content-box はコンテンツ領域に対して配置します。background-clip と組み合わせてよく使われます。
background-blend-modebackground-blend-mode は、要素の背景画像同士、および背景画像と背景色の間のブレンドモード（混合モード）を設定します。multiply、screen、overlay などのモードをサポートしており、Photoshop のレイヤー合成と似ています。CSS3 で追加され、リッチな視覚効果に適しています。
backdrop-filterbackdrop-filter は、要素の後ろ側の領域にフィルター効果（blur や brightness など）を適用し、すりガラス（frosted-glass）効果を作る標準的な方法です。filter と異なり、要素自体ではなくその下のコンテンツに影響します。モダンブラウザのサポートは良好ですが、効果を表示するには要素の背景が少なくとも部分的に透明である必要があります。
bottombottom プロパティは、配置された要素がその包含ブロックの下端から上方向にどれだけ離れているかを定義します。static 以外の配置要素にのみ適用され、通常は absolute または fixed 配置と組み合わせて要素を下端に配置したり、高さを伸ばしたりするために使用されます。
backface-visibilitybackface-visibility プロパティは、3D 回転後に要素の背面が観察者に向いたときに、その要素が表示されるかどうかを制御します。デフォルト値 visible は、背面に正面の内容が鏡像として表示されます。hidden にすると、背面が観察者に向いたときに要素は非表示になります。これはカードの裏返しや立方体など、表裏を区別する 3D 効果で一般的に使われます。
box-decoration-breakbox-decoration-break プロパティは、background、border、padding などの要素の装飾が、改行や改ページのような区切り位置でどのようにレンダリングされるかを制御します。デフォルト値の slice は、装飾が切り取られたようにレンダリングされます。clone は、各フラグメントに対して完全な装飾をレンダリングします。これは主に、行内要素が改行や印刷のページ分割にまたがる場合の見た目に影響します。
C
colorcolor プロパティは要素のテキストの前景色を設定し、最もよく使われる CSS プロパティの一つです。color キーワード、hex 値、RGB、HSL など、多くの色形式を受け付けます。このプロパティは子要素に継承されるため、通常は親要素に設定してテキストの塊全体の色を統一します。
cursorcursor プロパティは、マウスポインタが要素の上に乗ったときに表示されるカーソルの形状を制御します。これはインタラクティビティを示す重要な視覚的な手がかりです。pointer、text、not-allowed などの異なるカーソルタイプを選ぶことで、要素がクリック可能か、ドラッグ可能か、無効化されているかをユーザーにひと目で伝えられます。
clearclear プロパティは、要素が左側、右側、または両側の浮動要素の横に置かれることを許可するかどうかを制御します。left、right、both に設定すると、要素は該当する浮動要素の下に移動します。これは浮動レイアウトでのレイアウト崩れを防ぐための重要なツールです。
columnscolumns プロパティは column-count と column-width の略記であり、要素のコンテンツを自動的に複数列に分割します。これは新聞の組版に似ています。長いテキストを複数の列に表示して読みやすさを向上させるためによく使用されます。
column-countcolumn-count プロパティは、要素のコンテンツが分割される列数を指定します。CSS マルチカラムレイアウトの一部であり、通常は column-gap や column-rule と組み合わせて新聞風の複数列組版を作成するために使用されます。
column-gapcolumn-gap プロパティは、複数列レイアウトにおける列と列の間の間隔を設定します。CSS マルチカラムレイアウトの重要な要素であり、適切な間隔を選ぶことで複数列テキストの読みやすさと見た目が大きく向上します。
column-rulecolumn-rule プロパティは column-rule-width、column-rule-style、column-rule-color の略記であり、複数列レイアウトの列と列の間に区切り線を描画します。border と同様に、列間隔の内部にのみ描画され、複数列テキストの視覚的な区切りを強調します。
column-spancolumn-span プロパティは、要素が複数の列にまたがるかどうかを指定します。all に設定すると、要素はすべての列にまたがります。複数列レイアウトの見出しや小見出しによく使用され、分栏されたコンテンツとは視覚的に区別されます。
column-widthcolumn-width プロパティは、複数列レイアウトにおける各列の理想の幅を指定します。ブラウザはコンテナの幅とこの値から実際の列数を導き出し、コンテンツは各列に適応的に流れます。これは柔軟な複数列組版に適しています。
clip-pathclip-path プロパティは、要素を円や多角形、楕円など指定した幾何形状にクリップし、形状の内側だけを表示して外側をすべて隠します。従来の overflow: hidden による矩形クリップとは異なり、clip-path は任意の形状の可視領域を作れるため、クリエイティブなレイアウトや視覚効果の強力なツールとなります。
contentcontent プロパティは要素の前後に生成コンテンツを挿入し、::before および ::after 疑似要素に必須です。文字列、画像、カウンター値、属性値を挿入でき、HTML を変更せずに装飾コンテンツの追加、フロートのクリア、リンク URL の表示などによく使われます。
counter-incrementcounter-increment は 1 つ以上の CSS カウンターの値を増やし、自動番号付けの中心的な仕組みの一つです。要素がセレクタに一致するたびに、指定したカウンターが指定したステップ分（デフォルト 1）増加します。完全な自動番号付けを行うには counter-reset と content の counter() 関数が必要です。
counter-resetcounter-reset は新しい CSS カウンターを作成し、指定した値（デフォルト 0）で初期化します。自動番号付けの第一歩であり、通常は親要素に設定します。counter-increment と content の counter() 関数と組み合わせることで、複雑な多階層番号付けシステムを構築できます。
caret-colorcaret-color プロパティは、input や textarea などの編集可能な要素におけるキャレット（点滅する縦棒）の色を設定します。キャレットの色をカスタマイズすると、フォーム要素をページの配色に合わせたり、現在の入力位置を強調したりできます。
color-schemecolor-scheme プロパティは、要素がどの配色スキーム（ライト/ダーク）をサポートしているかをブラウザに伝え、スクロールバーやフォーム要素などのネイティブコントロールをレンダリングする際に適切なデフォルト色を選択できるようにします。これはダークモード対応において重要なプロパティです。
D
displaydisplay プロパティは要素がページでどう表示されるかを定義します。ブロックレベル要素、インライン要素として振る舞うか、Flex や Grid などのモダンなレイアウトモデルを使うかを決めます。CSS レイアウトの中で最も基本的で強力なプロパティの一つであり、ほぼすべての要素のドキュメントフロー内の振る舞いを変えられます。
directiondirection プロパティはテキストの書字方向（左から右へ ltr、右から左へ rtl）を設定します。主にアラビア語やヘブライ語などの右から左へ書く言語に影響し、テキストの配置、スクロールバーの位置、レイアウトの流れも変更します。多言語サイトでは、CSS プロパティよりも HTML 要素の dir 属性を使うことを推奨します。
E
empty-cellsempty-cells は、空のセル（内容がない、または空白文字のみのセル）の境界線と背景を表示するかどうかを制御します。デフォルトの show は通常通り表示し、hide はよりすっきりとした見た目のために非表示にします。このプロパティは border-collapse: separate が指定された表にのみ適用されます。
F
fontCSS の font ショートハンドプロパティは、font-style、font-variant、font-weight、font-stretch、font-size、line-height、font-family を 1 つの宣言で設定します。スタイルシートを簡潔に保ちますが、font-size と font-family は必須で、サブプロパティは固定の順序に従う必要があります。
font-familyfont-family プロパティは、要素に適用するフォントファミリー名や汎用フォントファミリー名の優先リストを指定します。ブラウザはリストの中から最初に利用可能なフォントを使用し、フォントが見つからない場合は順に後続のものへ移ります。
font-sizefont-size プロパティはテキストのサイズを設定します。絶対キーワード、固定長、em や rem などの相対単位を受け付け、最もよく使われるテキスト装飾プロパティの一つです。
font-weightfont-weight プロパティはテキストの太さを設定します。名前付きキーワードのほか、1〜1000 の数値を受け付け、太字は見出しや強調によく使われます。
font-stylefont-style プロパティはテキストをイタリック体またはオブリーク体で描画するかどうかを設定します。normal、italic、oblique の 3 値を受け付け、引用や強調、特殊な組版によく使われます。
floatfloat プロパティは、要素を通常フローから外し、包含ブロックや別の浮动要素の端に触れるまで左または右へ浮动させます。もともとは画像の周りをテキストで囲む（回り込み）ために設計されましたが、その後は段組みレイアウトに広く使われました。現在では Flexbox や Grid が普及したことで、本来の目的に回帰しています。
flexflex プロパティは、CSS の Flexible Box Layout モジュールの中核となるショートハンドです。これは flex アイテムがどれだけ伸縮し、コンテナー内の残りの空間に対してどのくらいのスペースを占めるかを設定します。flex-grow・flex-shrink・flex-basis のショートハンドであり、それぞれアイテムの拡大率・縮小率・主軸方向の初期サイズを制御します。flex を使えば、等幅カラムや可変幅、流れるような配置といった一般的なレイアウトを簡単に構築できます。
flex-directionflex-direction プロパティは、flex コンテナー内の主軸の方向、つまり flex アイテムがどの方向に並ぶかを定義します。デフォルトでは、アイテムは左から右へ水平に並びます（row）。このプロパティでレイアウトを垂直方向や逆順に切り替えられます。これは flexbox における最も基本的な方向制御であり、justify-content と align-items がどちらの軸に作用するかを決定します。
flex-growflex-grow プロパティは、flex アイテムの拡大率を設定します。コンテナー内の残りの空間をアイテムがどれだけ獲得できるかを決めます。デフォルト値は 0 で、これはアイテムが伸長せず元のサイズを保つことを意味します。値を大きくするほどアイテムの取り分は大きくなります。残りの空間は、すべてのアイテムの flex-grow 値に比例して分配されます。
font-variantfont-variant CSS プロパティは、small-caps（小型大文字）のように、小文字を小さめの大文字として表示するフォントバリアント効果を適用します。small-caps 値は最も広くサポートされている機能です。
font-size-adjustfont-size-adjust プロパティは、フォントのフォールバック時に x 高（小文字 x の高さ）を一定に保ち、異なるフォントが混在しても視覚的なサイズの急変を防ぎます。CSS3 のプロパティです。
font-stretchfont-stretch プロパティは、フォントの凝縮（condensed）または拡張（expanded）された変異体を選択します。ultra-condensed から ultra-expanded まで 9 段階あります。実際に一致する幅の変異体をフォントが備えている場合にのみ効果があります。
flex-wrapflex-wrap プロパティは、フレックスアイテムを 1 行にまとめるか、複数行に折り返すかを制御します。初期値は nowrap で、アイテムが圧縮されたりコンテナからはみ出したりしてもすべてを 1 行に維持します。wrap を設定すると、アイテムは次の行へと流れ、レスポンシブレイアウトや複数列のカード配置に非常に便利です。
flex-flowflex-flow は flex-direction と flex-wrap の両方のショートハンドです。1 つの宣言で主軸の方向とアイテムを折り返すかどうかを定義します。この 2 つのプロパティはほぼ常に同時に使われるため、flex-flow を使うとコードをより簡潔に保てます。初期値は row nowrap、つまり折り返しのない水平方向の配置です。
flex-shrinkflex-shrink プロパティはフレックスアイテムの収縮係数を設定し、コンテナの空間が不足したときにアイテムがどれだけ縮むかを決めます。初期値は 1 で、アイテムは必要に応じて縮みます。値を 0 にすると、空間が不足してもアイテムは元のサイズを維持します。値が大きいほど、空間が足りないときにより強く縮みます。
flex-basisflex-basis プロパティは、残りの空間が分配される前のフレックスアイテムの初期主軸サイズ、つまりアイテムの「理想のサイズ」を設定します。初期値は auto で、アイテムのサイズはコンテンツまたは設定された width/height から決まります。具体的な長さを指定した場合、アイテムはそのサイズから始まり、その後 flex-grow と flex-shrink に応じて伸縮します。
filterfilter プロパティは、ぼかしや明るさ、コントラスト、グレースケールなど、Photoshop のフィルタのようなグラフィック効果を要素に適用します。要素の描画結果に作用し、要素とそのすべての子要素に影響するため、画像処理や視覚効果の一般的なツールとなっています。
G
grid-template-columnsgrid-template-columns プロパティは、グリッドコンテナ内の列トラックの数と幅を定義します。各列トラックのサイズを指定することで列構造を正確に制御でき、CSS Grid の中心となる設定の一つです。固定長、パーセント、fr 単位、そして repeat() や minmax() といった強力な関数をサポートします。
gridgrid プロパティは CSS Grid のショートハンドです。1 つの宣言でグリッドコンテナの明示トラック、自動トラック、自動配置方向（auto-flow）を設定します。grid-template 系と grid-auto 系の集合体であり、グリッド構造全体を記述したいときに使える最も包括的なショートハンドです。
gapgap プロパティはフレックスレイアウトとグリッドレイアウトにおける行と列の間隔を設定します。これは row-gap と column-gap のショートハンドです。gap はアイテム同士の間にだけ空間を追加し、コンテナの端には追加しません。そのため margin よりもすっきりとして予測しやすくなります。従来の margin ベースの間隔で必要だった最初と最後の margin の相殺処理が不要になります。
grid-template-rowsgrid-template-rows プロパティは、グリッドコンテナ内の行トラックの数と高さを定義します。各行トラックのサイズを指定することで、行構造を正確に制御できます。grid-template-columns と組み合わせることで、グリッドの基本的な骨組みを形成します。固定長、パーセンテージ、fr 単位、minmax() などの関数をサポートします。
grid-template-areasgrid-template-areas プロパティを使うと、名前付き領域でグリッドレイアウトの構造を視覚的に定義できます。各文字列が 1 行を表し、文字列内の各識別子がセルが属する領域を表します。同じ名前の隣接するセルは自動的に 1 つの領域に統合されます。これによりグリッドレイアウトの可読性が大きく向上し、ページ全体のデザインに特に適しています。
grid-columngrid-column は grid-column-start と grid-column-end のショートハンドです。グリッドアイテムを水平方向に配置します。開始と終了のグリッドライン番号を指定することで、アイテムが何列にまたがるかを制御できます。柔軟なグリッドレイアウトを作るための重要なプロパティです。
grid-rowgrid-row は grid-row-start と grid-row-end のショートハンドです。グリッドアイテムを垂直方向に配置します。開始および終了のグリッドライン番号を指定することで、アイテムが跨ぐ行数を制御できます。grid-column と組み合わせることで、アイテムの位置とサイズを正確に制御できます。
grid-areagrid-area は、grid-row-start、grid-column-start、grid-row-end、grid-column-end の 4 つの値を一度に設定してグリッドアイテムを配置するショートハンドです。正確な配置にはグリッドライン番号を、あるいは grid-template-areas で定義した名前付き領域を使えます。グリッド配置において最も柔軟なプロパティです。
grid-auto-columnsgrid-auto-columns プロパティは、グリッドコンテナ内で暗黙的に作成される列トラックの幅を制御します。grid-template-columns が定義していない列にグリッドアイテムが配置されると、ブラウザは自動的に暗黙の列を作成します。このプロパティはその自動作成された列のサイズを設定します。動的コンテンツやグリッドアイテム数が不確定な場合に非常に便利です。
grid-auto-rowsgrid-auto-rows プロパティは、グリッドコンテナ内で暗黙的に作成される行トラックの高さを制御します。grid-template-rows が定義していない行にグリッドアイテムが配置されると、ブラウザは自動的に暗黙の行を作成します。このプロパティはその自動作成された行のサイズを設定します。明示的に定義されていない行も一貫した高さを持つようにします。
grid-auto-flowgrid-auto-flow プロパティは、明示的に配置されていないグリッドアイテムが自動的に配置される方法を制御します。アイテムが行単位か列単位で埋まるか、およびレイアウトの隙間を埋める dense 詰めモードを有効にするかを決定します。このプロパティはグリッド全体の順序に直接影響します。
H
heightheight プロパティは要素のコンテンツ領域の高さを設定し、width と同様に CSS ボックスモデルの中心的なサイズ指定プロパティです。初期値の auto では、ブラウザーがコンテンツから高さを計算します。これが最も一般的で推奨される方法です。パーセンテージの高さは、親に明示的な高さがある場合にのみ有効です。それ以外の場合は 0 として解決されます。
hyphenshyphens プロパティは、ブラウザが単語の内部でハイフン（-）を使って改行（断詞）するかどうかを制御します。英語のような多音節言語の組版でよく使われます。自動断詞を有効にすると、ブラウザは言語の辞書に基づいて適切な位置にハイフンを挿入し、コンテナの境界でより自然に折り返され、不揃いな隙間が減ります。
I
isolationisolation プロパティは、要素が新しい層叠コンテキスト（stacking context）を作成するかどうかを制御します。isolate に設定すると、要素は独立したブレンド環境を形成するため、子要素の mix-blend-mode は要素の内部のコンテンツとのみブレンドされ、外部の要素に漏れることはありません。これはブレンドモードの範囲を正確に制御するための重要なプロパティです。
insetinset プロパティは、top、right、bottom、left の 4 つのオフセットプロパティのショートハンドで、配置された要素のすべての辺のオフセットを一度に設定します。デフォルト値の auto はオフセットなしを意味します。position が static 以外の要素にのみ適用され、構文は margin と同様に 1〜4 個の値をサポートします。
J
justify-contentjustify-content プロパティは、flex アイテムが主軸に沿ってどう配置されるか、およびアイテム間やアイテムとコンテナー端との間の空間がどう分配されるかを設定します。これは flexbox で最もよく使われる配置プロパティであり、left・right・center・space-between・space-around・space-evenly などの配置をサポートします。主軸は flex-direction によって決まります。
justify-itemsjustify-items プロパティは、コンテナ内のすべてのアイテムのインライン軸（行）方向の既定の配置を設定します。主にグリッドレイアウトに適用され、フレックスボックスでは効果がありません。これは justify-content のアイテムごとの対応版で、アイテムをグループではなく、それぞれのグリッドセル内で配置します。初期値は stretch で、アイテムを引き伸ばしてセルを埋めます。
justify-selfjustify-self プロパティは単一アイテムのインライン軸方向の配置を設定し、コンテナの justify-items の既定値を上書きします。主にグリッドレイアウトに適用され、フレックスボックスでは効果がありません。これにより、他のアイテムの配置に影響を与えずに、1 つのアイテムをセル内で独立して配置できます。
L
line-heightline-height プロパティはテキストの行間の垂直方向の余白を設定します。適切な行の高さは長文の可読性を大きく高め、通常はフォントサイズの約 1.5 倍です。
letter-spacingletter-spacing プロパティは、テキスト内の文字間の間隔を設定します。正の値は間隔を広げ、負の値は狭めます。見出しや、大文字の英文本の可読性向上によく使われます。
leftleft プロパティは、配置された要素がその包含ブロックの左端から右方向にどれだけ離れているかを定義します。static 以外の配置要素にのみ適用され、最もよく使われるオフセットプロパティの一つで、通常は absolute または fixed 配置と組み合わせて左側に正確に配置するために使用されます。
list-stylelist-style は list-style-type、list-style-position、list-style-image のショートハンドで、リスト項目のマーカーに関するすべてを一度に設定します。デフォルトは disc outside none です。リストの見た目を制御する最も効率的な方法であり、リストスタイルの迅速なカスタマイズやリセットによく使われます。
list-style-typelist-style-type はリスト項目の前のマーカー（塗りつぶしの点、中空の丸、数字、ローマ数字など）を設定します。デフォルトは disc です。多くの定義済みマーカーやカスタム文字列に対応しており、リストの視覚的な見た目を制御する最も一般的に使われるプロパティです。
list-style-positionlist-style-position は、リストマーカーがリスト項目のコンテンツブロックの内側か外側かに配置するかを制御します。デフォルトの outside はマーカーをコンテンツブロックの外側に置き、テキストの最初の行がきれいに揃います。inside はマーカーをコンテンツブロック内に引き込み、テキストがその周りを回り込みます。リストの流れとインデントに影響します。
list-style-imagelist-style-image はリスト項目のデフォルトのマーカー（点、数字など）をカスタム画像に置き換えます。デフォルト値 none は画像を使わないことを意味します。リストにブランド化された小さなアイコンや装飾的な矢印を付け、より豊かな見た目にするのによく使われます。
M
min-widthmin-width プロパティは要素の最小幅を設定し、コンテナが狭くなったときに要素が小さすぎるまで圧縮されるのを防ぎます。初期値の 0 は下限がないことを意味します。これは width や max-width と組み合わせて使われることが多く、レスポンシブレイアウトで可読性を守るための重要な道具です。
max-widthmax-width プロパティは要素の最大幅を設定し、大画面で広がりすぎて可読性を損なうのを防ぎます。初期値の none は上限がないことを意味します。これはレスポンシブデザインの中心的な道具であり、width:100% と組み合わせてメディア要素が本来のサイズを超えずに適応するようにすることがよくあります。
min-heightmin-height プロパティは要素の最小高さを設定し、コンテンツが短くても一定の高さを保つことを保証します。初期値の 0 は下限がないことを意味します。これはページのセクションを視覚的に統一したり、フッターをページ下部に固定したりするのによく使われます。
max-heightmax-height プロパティは要素の最大高さを設定し、高くなりすぎてレイアウトを破壊するのを防ぎます。初期値の none は上限がないことを意味します。これは overflow:auto と組み合わせて、上限を超えるコンテンツにスクロールバーを表示させることがよくあり、固定高さのスクロール領域で一般的なパターンです。
marginmargin プロパティは要素の周囲の外部スペース、つまりその境界線と隣接する要素との距離を設定します。これはボックスモデルの中で最も広く使われるプロパティの一つで、要素間の間隔の制御、要素の水平方向の中央揃え、余白の追加に役立ちます。margin は固定長さ、パーセンテージ、あるいはブラウザーが計算する auto を取ることができます。
mix-blend-modemix-blend-mode プロパティは、要素のコンテンツがその下にあるコンテンツ（背景や隣接する要素）と色をどう混ぜ合わせるかを制御します。Photoshop のレイヤーブレンドモードに似ています。テキストや画像が背景に対して豊かな色の合成を生み出せるようになり、ポスターやバナー、芸術的なページデザインでよく使われます。
O
overflowoverflow プロパティは、コンテンツがコンテナの境界を超えたときの挙動を制御し、溢れたコンテンツを扱うための中核となる道具です。初期値の visible は溢れたコンテンツを表示させ、hidden は切り取り、scroll は常にスクロールバーを表示し、auto は必要なときだけスクロールバーを表示します。これが最もよく使われる値です。
outlineoutline は要素のボーダーの外側に線を描くもので、主にフォーカスされた状態を示すために使われます。border と異なり、outline はスペースを占有せず、要素のサイズやページのレイアウトに影響を与えません。これはアウトラインの色・スタイル・幅を一度に設定するショートハンドです。
opacityopacity プロパティは要素全体の透明度を設定し、値の範囲は 0 から 1 です。0 は完全に透明、1 は完全に不透明です。透明な背景と異なり、opacity は要素とそのコンテンツ全体に影響するため、フェードイン／アウト効果や視覚的な階層付けによく使われます。
overflow-xoverflow-x プロパティは、コンテナから水平方向にはみ出したコンテンツの扱い方を個別に制御し、overflow と同じ値を受け付けます。デフォルト値の visible は、はみ出した部分を表示します。これは、ページの水平スクロールを無効にしたり、ある領域を水平方向にのみスクロール可能にしたりするのによく使われます。
overflow-yoverflow-y プロパティは、コンテナから垂直方向にはみ出したコンテンツの扱い方を個別に制御し、overflow と同じ値を受け付けます。デフォルト値の visible は、はみ出した部分を表示します。これは最もよく使われるオーバーフロー制御であり、max-height と組み合わせて固定高さのスクロール可能な領域にすることが多いです。
outline-offsetoutline-offset は、アウトライン（要素の輪郭線）と要素のボーダー端との距離を制御します。正の値はアウトラインを要素から離して外側へ押し出し、負の値は要素に近づけて内側、あるいは要素の中に引き込みます。通常は outline と組み合わせて、視覚的な効果を調整するために使われます。
orderorder プロパティはコンテナ内のフレックスアイテムの表示順序を設定します。初期値は 0 です。値が小さいアイテムが先に表示され、値が同じアイテムは DOM 上の位置順に並びます。このプロパティが変更するのは視覚的な順序だけで、DOM 構造を変えることはありません。そのため、スクリーンリーダーの読み上げ順や Tab キーのフォーカス順にも影響します。慎重に使用してください。
object-fitobject-fit プロパティは、<img> や <video> などの置換要素のコンテンツが、指定された幅と高さにどう収まるかを制御します。要素のアスペクト比がコンテンツと異なる場合、object-fit は引き伸ばすか、比率を保ったまま切り取るか、すべてを表示するかを決定します。レスポンシブな画像レイアウトに欠かせないツールです。
object-positionobject-position プロパティは、<img> や <video> などの置換要素のコンテンツがコンテナ内のどこに表示されるかを制御します。object-fit によって余白が生じたりコンテンツが切り取られたりする場合、object-position は重要な部分が可視領域内に残るよう位置揃えの焦点を調整します。
overscroll-behavioroverscroll-behavior プロパティは、スクロールコンテナが境界に達した際の挙動を制御します。たとえば、スクロールイベントを親コンテナに渡す（スクロールチェーニング）か、ページの更新や履歴ナビゲーションなどのブラウザデフォルトを発動するかを決めます。入れ子になったスクロールコンテナの「スクロール貫通」問題を解決する重要なプロパティです。
orphansorphans は、印刷時に段落の末尾から新しいページの先頭に残すべき最小行数を制御し、デフォルトは 2 です。これは CSS のページメディアプロパティで、段落の最終行が前のページの下部に単独で表示される（「孤行」）のを防ぎ、印刷時の可読性を向上させます。
P
paddingpadding プロパティは要素のコンテンツと境界線の間の内部スペースを設定します。CSS ボックスモデルの中心的な一部であり、コンテナ内のコンテンツに余白を持たせたり、クリック領域を広げたり、背景に対してコンテンツを際立たせたりするのによく使われます。padding の値は長さまたはパーセンテージのみで、負の値にはできず、相殺もされません。
positionposition プロパティは要素がどう配置されるかを指定します。ドキュメントフローに残るか、ある基準点に対してオフセットされるかを決めます。top、right、bottom、left と組み合わせることで、相対配置、絶対配置、固定配置、粘着配置といった一般的なレイアウト効果を実現できます。
pointer-eventspointer-events プロパティは、要素がクリックやホバーなどのポインタイベントのターゲットになれるかどうかを制御します。none に設定すると、要素はポインタイベントを完全に無視し、それらは下層の要素へと通り抜けます。これはクリックスルー、インタラクションの無効化、複雑な階層化された UI のインタラクションに使われる一般的なツールです。
place-itemsplace-items は align-items と justify-items のショートハンドです。グリッドコンテナ上で、すべてのグリッドアイテムが自分のセル内でどう整列するかを 1 つの宣言で設定します。垂直方向（align）と水平方向（justify）の両方の整列を同時に制御するため、グリッドコンテンツの中央揃えや整列に便利なツールです。
place-contentplace-content は align-content と justify-content のショートハンドです。グリッドコンテナ上で、グリッド内容全体の領域がコンテナに対してどう整列するかを制御します。グリッドトラックの合計サイズがコンテナより小さい場合、このプロパティは残りの空間をどう分配するかを決定します。グリッド全体の中央揃えと分配の鍵となります。
place-selfplace-self は align-self と justify-self のショートハンドです。単一のグリッドアイテムが自分のセル内でどう整列するかを制御します。place-items とは異なり、place-self は個々のグリッドアイテムに設定され、コンテナレベルの place-items 設定を上書きし、1 つのアイテムに対する特別な整列ニーズに対応します。
perspectiveperspective プロパティは、3D 変換における透視の強さ、すなわち観察者の目から z=0 平面までの距離を定義します。値が小さいほど効果が強く（近大遠小がより誇張され）、値が大きいほど透視が平坦になります。このプロパティは 3D 変換を適用する要素の親に設定する必要があり、リアルな 3D シーンの基礎となります。
perspective-originperspective-origin プロパティは、3D 透視における観察者の位置、つまり消失点が要素に投影される位置を定義します。デフォルトは要素の中心（50% 50%）です。これを調整すると、3D シーンが見える角度（上から、横からなど）が変化し、perspective と連携して機能します。
Q
quotesquotes プロパティは、q 要素や content の open-quote/close-quote キーワードが使う引用符をカスタマイズします。デフォルトではブラウザが言語に基づいて選択します。複数の引用符ペアに対応しているため、入れ子の引用で自動的にスタイルが切り替わります。国際化された組版において重要なツールです。
R
rightright プロパティは、配置された要素がその包含ブロックの右端から左方向にどれだけ離れているかを定義します。static 以外の配置要素にのみ適用され、通常は absolute または fixed 配置と組み合わせて要素を右側に配置するために使用されます。
rotaterotate プロパティは、指定した軸を中心に要素を 2D または 3D 空間で回転させる個別変換プロパティです。独立したプロパティとしては、translate や scale などの他の変換と分けて制御でき、特に回転角度を単独でアニメーションさせたい場合に便利です。
resizeresize プロパティは、ユーザーがドラッグで要素のサイズを変更できるかどうか、およびどの方向に変更できるかを制御します。<textarea> などの要素でよく使用され、ユーザーが必要に応じてサイズを自由に変更でき、フォームの使い勝手を向上させます。
S
scalescale プロパティは、2D または 3D 空間で要素を拡大・縮小する個別変換プロパティです。独立したプロパティとしては、translate や rotate などの他の変換と分けて制御でき、特に拡大縮小を単独でアニメーションさせたい場合（ボタンの押下フィードバック、画像の拡大プレビューなど）に便利です。
scroll-behaviorscroll-behavior プロパティは、スクロールが目的地へ瞬時にジャンプするか、滑らかにアニメーションするかを制御します。smooth にすると、アンカーリンクのクリックや JavaScript からのスクロールが、ジャンプするのではなく目的地へ滑らかに移動し、ユーザー体験を大きく向上させます。
scroll-snap-typescroll-snap-type プロパティは、スクロール時にスナップ（吸着）効果を有効にし、スクロールコンテナが停止した際に指定した要素をコンテナの端または中央に整列させます。カルーセル、全画面スクロールページ、横スワイプリストなどに一般的に使われ、スクロール体験をより正確かつ制御しやすくします。
scrollbar-colorscrollbar-color プロパティは、ブラウザのスクロールバーの色（つまみ thumb とトラック track の両方）をカスタマイズします。CSS Scrollbars 仕様の一部であり、JavaScript プラグインを使わずにスクロールバーをページ全体の配色に合わせるシンプルな方法を提供します。
T
text-aligntext-align プロパティはブロックレベル要素内のテキストの水平方向の配置を設定します。left、right、center、justify の値をサポートし、段落、見出し、表のセル、その他のブロックコンテナに適用されます。なお text-align は要素内部のコンテンツを揃えるもので、要素自体を揃えるものではありません。
text-decorationtext-decoration プロパティはテキストに装飾線を追加します。最も一般的なのは下線、上線、打ち消し線です。これは text-decoration-line、text-decoration-style、text-decoration-color、text-decoration-thickness の 4 つのサブプロパティのショートハンドです。既定ではリンク（a 要素）に下線が引かれますが、リセットスタイルでは通常この下線を消します。
text-transformtext-transform プロパティは、元の内容を変更せずに、テキストを大文字・小文字・単語の先頭大文字で表示する方法を変更します。HTML 内の元のテキストはそのままなので、スクリーンリーダーやコピーしたテキストには影響しません。変換は純粋に視覚的なものです。
text-indenttext-indent プロパティはブロックレベル要素の先頭行の水平方向の字下げを設定します。段落の先頭行の字下げによく使われます。最初の行にだけ影響します。値には固定長（2em など）や包含ブロックの幅に対するパーセントが使え、負の値でぶら下げインデントを作ります。
text-shadowtext-shadow プロパティはテキストに影を追加し、背景に対して奥行きと視覚的な階層を与えます。各影は水平オフセット、垂直オフセット、ぼかし半径、色を持ちます。複数の影をカンマで区切って重ねることで、発光や浮き出し、縁取りなどの効果を作れます。
toptop プロパティは、配置された要素がその包含ブロックの上辺からどれだけ離れているか（オフセット）を定義します。このプロパティが適用されるのは、position が relative・absolute・fixed・sticky の要素だけであり、要素の垂直方向の位置を正確に制御するために使われます。
transitiontransition は、要素のプロパティ値が滑らかに変化するよう指定する CSS のショートハンドです。:hover や :focus などの状態変化時に、スタイルをアニメーションで表現し、瞬間的な切り替えを防ぎます。対象プロパティ・継続時間・速度曲線・遅延を指定するだけで、滑らかなインタラクション効果を簡単に作れます。モダンな Web のマイクロインタラクションを作る基本ツールです。
transformtransform プロパティは、要素に対して平行移動・回転・拡縮・傾斜などの 2D または 3D の幾何変換を適用します。変換はレンダリング段階で発生し、ドキュメントフローのレイアウトには影響しないため、高パフォーマンスな視覚効果を作るための定番ツールです。transform は CSS アニメーションやインタラクション設計の中核をなすプロパティの一つです。
tab-sizefont-size-adjust ではなく tab-size プロパティは、ページに表示されるタブ文字（\t）の幅を設定します。通常、コードブロックや pre 要素のインデントを制御するために使われます。既定値は 8 です。
text-align-lasttext-align-last プロパティは、ブロックレベル要素内の最終行の配置を設定します。多くは text-align: justify と組み合わせて使われます。既定では text-align の配置規則は段落の最終行には適用されませんが、text-align-last を使えば最終行だけを個別に制御でき、両端揃えのレイアウトをより柔軟で美しくできます。
text-justifytext-justify プロパティは、text-align が justify（両端揃え）のときに、ブラウザがどのように間隔を調整するかを指定します。単語間隔、文字間隔、またはその両方の組み合わせで両端揃えを実現するかを制御します。このプロパティは主に justify 値を使う際のタイポグラフィの細部に影響します。
text-overflowtext-overflow プロパティは、テキストがコンテナからあふれたときの表示を制御します。最も一般的な使い方は、overflow: hidden と white-space: nowrap と組み合わせて、单行テキストに省略記号を付けることです。clip（切り捨て）と ellipsis（…）の 2 つのモードをサポートし、UI デザインで長いテキストを扱う際の標準的な手段です。
text-underline-offsettext-underline-offset プロパティは、テキストの下線とベースラインの距離を設定し、下線の位置をより柔軟で洗練されたものにします。既定では下線はテキストの下端にぴったりと寄りますが、オフセットを設定すると下線と文字の間に隙間ができ、g や y のような下伸び部分との重なりを避けられます。
transition-propertytransition-property プロパティは、値が変化したときにどの CSS プロパティにトランジション効果を適用するかを指定します。デフォルト値は all で、すべてのアニメーション可能なプロパティがトランジションに参加することを意味します。不要なパフォーマンスコストや予期しないアニメーション動作を避けるため、特定のプロパティ名を明示的に列挙することもできます。
transform-origintransform-origin プロパティは、要素が変換される基準点（原点）を設定します。デフォルトは要素の中心（50% 50%）で、回転・拡縮・スキューはすべてこの点を中心に実行されます。原点を調整すると、辺を中心に回転したり、角から拡縮したりするなど、大きく異なる効果を生み出せます。
transform-styletransform-style プロパティは、要素の子が空間内で 3D 位置を維持するかどうかを決定します。デフォルト値 flat は子を親の 2D 平面に押しつぶします。preserve-3d では子を独立した 3D 空間に配置でき、perspective と組み合わせることで真に立体的なシーンを構築します。
translatetranslate プロパティは、要素を 2D または 3D 空間で移動させる個別変換プロパティです。transform: translate() と同じ効果を持ちますが、独立したプロパティとしては、回転やスケーリングなどの他の変換に影響を与えずに移動を個別に制御でき、各変換を個別にアニメーションさせたい場合に非常に便利です。
table-layouttable-layout は表の列幅を計算するアルゴリズムを決定します。デフォルトの auto は内容に基づいて列幅を決めるため、大量の内容に合わせて列が広がります。fixed は最初の行または明示的な幅から列幅を決め、内容を無視して高速に描画されます。大量データの表に適しています。
U
unicode-bidiunicode-bidi プロパティはテキストの Unicode 双方向アルゴリズム（Unicode Bidirectional Algorithm）を制御し、異なる方向のテキスト（英語とアラビア語など）が混在する場合を処理します。テキストの埋め込みレベルを変更したり、方向を上書きしたり、要素を親の方向コンテキストから切り離したりでき、国際化されたサイトで複雑なテキスト方向を扱うための重要なプロパティです。
user-selectuser-select プロパティは、ユーザーがマウスでテキストを選択できるかどうかを制御します。none に設定すると、要素内のテキストは選択できなくなります。これは、コピーが不要なボタン、ラベル、アイコンなどでよく使用され、関係のないコンテンツの誤選択を防ぎます。
V
visibilityvisibility プロパティは要素が可視かどうかを制御します。display:none との決定的な違いは、hidden であってもレイアウト上のスペースを占める点です。要素は単に視覚的に描画されないだけです。初期値の visible は要素を通常通り表示します。このプロパティは継承され、スペースを残したまま要素を隠すのによく使われます。
vertical-alignvertical-align プロパティは、行内要素や表セル内のコンテンツの垂直配置を制御します。top、middle、baseline などのキーワードや、長さ・パーセンテージ値をサポートし、アイコンと文字の整列、行内要素の位置調整、表内のコンテンツの垂直位置の制御によく使われます。ただし vertical-align はブロックレベル要素には無効である点に注意してください。
W
widthwidth プロパティは要素のコンテンツ領域の幅を設定し、CSS ボックスモデルで最もよく使われるサイズ指定プロパティの一つです。このプロパティは非置換要素（non-replaced elements）にのみ影響し、初期値の auto では、ブラウザーが包含ブロックに基づいて幅を自動計算します。実際のレイアウトでは、width はよく max-width や min-width と組み合わせてレスポンシブデザインを実現するために使われます。
white-spacewhite-space プロパティは要素内の空白文字（スペース、タブ、改行）の扱いとテキストが自動的に折り返されるかを制御します。ブラウザーが連続するスペースをまとめるか、元の書式を保持するか、テキストがあふれたときに改行するかを決めます。コードの表示、書式の保持、1 行の省略記号の効果に欠かせません。
word-spacingword-spacing プロパティは、テキスト内の単語間の間隔を設定します。スペースで単語を区切る英語のような言語で最も効果が現れます。中国語にはスペースで区切られた単語がないため、このプロパティは一般に中国語に影響しません。
word-breakword-break プロパティは、コンテナの境界での単語の折り返し規則を制御し、主に長い単語や URL がコンテナからあふれる問題を解決します。単語の内部で改行してよいか、および CJK（中国・日本・韓国）テキストの折り返しをどう扱うかを決定します。ユーザーが入力した長い文字列を扱う際に特に便利です。
word-wrapword-wrap プロパティは overflow-wrap の別名で、長い単語や URL がコンテナ幅を超えたときに単語内部で改行してよいかを制御します。折り返せない長い文字列がコンテナからあふれるのを防ぐために設計され、テキスト溢れ問題の定番ツールです。現代の CSS 仕様では overflow-wrap への移行を推奨しています。
writing-modewriting-mode プロパティはテキストの全体的なレイアウト方向を設定し、水平（horizontal-tb）と垂直（vertical-rl、vertical-lr）のモードをサポートします。中国の古典や日本の書籍のような縦書きテキストを作成するために使用され、ブロック要素やインライン要素の配置方法も変更するため、東アジアの組版において重要なツールです。
widowswidows は、印刷時に段落の先頭から前のページの下部に残すべき最小行数を制御し、デフォルトは 2 です。orphans と組み合わせることで、段落の最初の行がページ下部に単独で残される（「寡行」）のを防ぎ、印刷された段落を完全な状態に保ちます。
Z
z-indexz-index プロパティは、position が指定された要素の z 軸（画面に垂直な方向）での重なり順（スタック順）を制御します。値が大きい要素ほど、小さい要素の上に描画されます。通常は position と組み合わせて、モーダルやドロップダウン、オーバーレイなど、階層化された UI に使われます。
zoomzoom プロパティは、標準外のスケーリング変換を適用し、要素とそのすべての子要素を比率的に拡大または縮小します。transform: scale() と異なり、zoom は要素のレイアウト空間に影響します（拡大縮小後の実際の空間を占有する）し、完全な再描画（reflow）を引き起こします。CSS 標準ではありませんが、ブラウザの対応は広範です。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%