CSS入門

CSSの書式

CSS(Cascading Style Sheets)の略です。HTMLは、HTML文書の内容に意味付けを行いますが、CSSではHTML文書のデザインやレイアウトといったスタイルを整えます。

基本書式

CSSはセレクタと呼ばれる指定で、対象要素を選択し続けて波括弧({})の中にプロパティを指定して選択した要素に適用するスタイルを指定します。

CSS基本書式

①セレクタ

スタイルを適用する対象を表します。対象の指定には、要素名を指定したりセレクタを指定します。

②波括弧

セレクタに続けて波括弧{を記述し、波括弧内にCSSプロパティを記述し波括弧で閉じます。{}で囲んだ部分は、スタイルを具体的に指定する宣言ブロックと呼ばれています。

③プロパティと値

プロパティと値は:(コロン)で区切ります。最後にセミコロン(;)を記述して終わります。改行して複数プロパティと値を記述していくことができます。

最後のプロパティの指定はセミコロンを省略することもできます。

h1{ font-size:1em; color:red;}
/* コードを読みやすくコードフォーマットを意識する */
h1{
    font-size: 1em;
    color: red;
}

セレクタのグループ化

複数の要素に同じスタイルを適用したいときは、セレクタをカンマ(,)で区切って指定します。たとえば、ul要素とol要素に同じスタイルを適用するときは、以下のようになります。

ul,
ol{
    font-size: 1em;
}

CSSをHTML文書に組み込む方法

外部スタイルシートを組み込む方法

CSSを外部のファイルに記述し、HTML文書に組み込むことができます。デザインを変更する場合、HTML文書内を修正するよりデザイン毎のスタイルシートを準備しておき切り替えることで保守性が向上します。多くのWebサイトでは、HTML文書に直接CSSを記述することはせず、ベースとなるスタイルシートやサイト共通のスタイルを外部ファイルに定義して、HTML文書に組み込んで運用しています。

すべてを外部ファイルに記述するのではなく、そのページのみ使用する場合やPCやスマホで切り替える必要がないデザインなどは、逆にHTML内に記述するほうが良いでしょう。

<head>
    <link rel="stylesheet" href="base.css">
</head>
h1 {
    background-color:red;
}
p {
   color:red;
}

style要素を使ってスタイルを組み込む

HTML文書のhead要素内にstyle要素にCSSを直接記述することで、文書内にスタイルを指定できます。HTML5から定義された新しいscoped属性を使用することで、特定の範囲にのみスタイルを適用することもできます。

<head>
   <style type="text/css">
   <!--
         a:link{
                 color: red;
          }
    -->
    </style>
</head>

style属性を使ってスタイルを組み込む

対象の要素にのみスタイル適用することができます。

<body>
      <p style="color:green;">すなりんの公式サイトは<a href="https://kcfran.com/">こちら</a>です!</p>
</body>

@import規則を使ってスタイルを組み込む

@import規則はCSSの文書内や、HTML文書のstyle要素内に記述して外部のスタイルシートを読み込むための方法です。@import規則は、CSS文書内に組み込む場合でも、HTML文書のstyle要素内に組み込む場合も必ず他のプロパティの指定よりも先頭にくるように指定します。

@import url("base.css")
<style type="text/css">
   <!--
         @import url("base.css")
         a:link{
                 color: red;
          }
    -->
</style>

@charset貴族を使って文字コードを指定する

外部スタイルシートを組み込む際の文書内で日本語を使っている場合などは文字コードを指定することが望ましいです。文字コードを指定しない場合は、組み込む先のHMTL文書と同じ文字コードで処理されます。

@charset規則をCSSの文書内の先頭に記述します。@charset “Shift_JIS”

@charset "Shift_JIS";

ボックスモデル

HTMLのすべてのよそは、ボックスモデルに準じた領域を持っています。以下の図で示すように4つの領域で構成されています。

ボックスモデルの解説図

content(コンテンツ)

要素の内容が表示される領域です。このサイズはwidthとheightプロパティで指定できます。テキストや画像、ボタン、リスト、フォーム等Webページを構成する要素がコンテンツにあたります。

padding(パディング)

要素内の内側の余白領域です。このサイズは、paddingプロパティで指定できます。パディングにはボックスに指定した背景色や画像が適用されます

border(ボーダー)

要素の枠線です。このサイズはborder-widthプロパティ等で指定できます。

margin(マージン)

外側の余白領域です。このサイズは、marginプロパティで指定できます。マージンは常に透明領域として扱われ、親ボックスの背景色が適用されます。

ボックスの種類と要素の分類

ボックスの種類はdisplayプロパティで指定できます。ブロックボックス(blcok)とインラインボックス(inline)等の種類があります。ただし、ブラウザーの既定スタイルであらかじめ要素にはボックスの種類が決められています。

address、article、aside、blockquote、body、dd、div、dl、dt、figcaption、figure、footer、form、h1~h6、header、hr、html、legend、nav、ol、p、pre、section、ul要素などはブロックボックス。span、strong、emなどはインラインボックス

ブロックボックスとインラインボックス

ブロックボックスは、他のブロックボックスやインラインボックスを含めることができます。ウィンドウ幅いっぱになる長方形の領域を形成します。多くのブラウザは上から下の書字方向に向かって要素は配置されます。インラインボックスにはブロックボックスやインラインボックスを含めることができません。また、ブロックボックス内を左から右に向かって配置されます。

数値+単位の指定方法

詳細はこちらを参照

色の指定方法

詳細はこちらを参照

CSS関数とは

CSS3には、CSS関数と呼ばれる書式があります。CSS関数とは計算を実行したり条件を指定したりすることができます。指定方法は関数名と括弧()で囲い引数を指定します。例:calc( 100*10 )

基本記述

関数名( 引数 )

コメントアウト

CSSでは、「/* コメント */」という形式でコメントができます。CSSとしては処理されないので説明やメモとして使用できます。コメントは改行することもできます。

/*
Webサイトに共通のクラスを適用
*/

サンプルコード

/* h1のタイトルクラスの色は青に指定 */
h1.title {
  color: blue;
}
h2.title {
  color: red;
  /*
  一時的にfont-sizeは無効
  font-size: 15px;
  */
}

ベンダープレフィックス

CSS3には正式に勧告される前の機能があります。ブラウザメーカによって正式勧告前の機能を先行して実装しているものもあります。また、ブラウザ独自の機能を実装しているケースもあります。これらの機能を使用する場合、明示的にプロパティの先頭に接頭辞(ベンダープレフィックス)を付ける必要があります。

ベンダープレフィックス種類

-webkit-Chrome、Safari、Opera
※Operaは元は「-o-」でしたが現在は「-webkit-」になっている。
-moz-Firebox
-ms-Internet Explorer、Microsoft Edge

ブラウザは常にバージョンアップを繰り返しているのでベンダープレフィックスを外しても動作するケースがあります。そのよう場合は、対象のブラウザがベンダープレフィックスが必要かこちらのサイトで確認することができます。

スタイルの優先順位

HTMLに適用されるCSSのスタイルは、記述方法や記述する順番によって優先度が異なります。

組み込まれるスタイルの優先順位

CSSは後に組まれた宣言ほど優先順位が高くなるという基本ルールがあります。ブラウザーの既定スタイルよりも閲覧者がブラウザーに設定したユーザースタイル、さらには正尺者が設定したスタイルが優先されます。

また、HTML文書に組み込んだ外部スタイルシートよりもstyle要素内で宣言されたほうが優先され、さらにstyle属性による宣言がもっとも優先されます。

p{color:red;}
p{color:blue;}

p要素に2つの同じスタイルを定義していますが、後のカラーが青が優先されます。

スタイル優先の得点計算

CSSを要素に適用するセレクタで指定するstyle属性を使うといった方法がありますが、利用する方法で得点計算され一番高い指定が適用されます。

指定方法点数
style属性style=””1000点
id属性のセレクタ指定#sample{}100点
class属性のセレクタ指定.sample{}10点
疑似クラスのセレクタ指定input[name=”text”]{}10点
要素名のセレクタ指定h1{}1点
疑似要素のセレクタ指定li:first-child{}1点
全称セレクタ指定*{}0点

以下の3つのスタイルを適用した場合、最後の指定が一番得点が高いため優先的にスタイルが適用されます。

指定計算式点数
h1{color: red;}要素名のセレクタ1点
.title{color: blue;}class属性のセレクタ10点
h1 .title{color: green;}要素名のセレクタ+class属性のセレクタ合計11点

!important宣言

スタイルの区切りを表すカンマ(;)の前に「!important」を追記すると、そのスタイルは最優先で適用されます。

p{color:red !important;}
p{color:blue;}

MIMEタイプの種類

詳細はこちらを参照

メディアタイプとメディアクエリ

詳細はこちらを参照

CSSプロパティ目次

疑似クラスとは

疑似クラスは、主にその要素の「状態」によって適用されるかどうかが決定されるセレクタ。

疑似要素とは

要素ではない部分(タグで囲われていない範囲)を適用先として指定するためのセレクタ。

セレクタ

クラス解説
要素名{~}タイプセレクター指定した要素にスタイルを適用する
要素名.クラス名{~}クラスセレクター指定したクラス名を持つ要素にスタイルを適用する
要素名A 要素名B{~}子孫セレクター
子孫要素にスタイルを適用する
要素名A+要素名B{~}隣接セレクター直後の要素にスタイルを適用する
要素名[属性]{~}属性セレクター
指定した属性を持つ要素にスタイルを適用する
要素名[属性~=”属性値”]{~}属性セレクター
指定した属性値を含む要素にスタイルを適用する
要素名[属性$=”属性値”]{~}属性セレクター指定した文字列で終わる属性値を持つ要素にスタイルを適用する
要素名[属性|=”属性値”]{~}属性セレクター指定した文字列がハイフンの前にある属性値を持つ要素にスタイルを適用する
要素名:first-of-type{~}疑似クラス
最初の子要素にスタイルを適用する(同一要素のみ)
要素名:last-of-type{~}疑似クラス
最後の子要素にスタイルを適用する(同一要素のみ)
要素名:nth-of-type(n)疑似クラスn番目の子要素にスタイルを適用する(同一要素のみ)
要素名:nth-last-of-type(n){~}疑似クラス
最後からn番目の子要素にスタイルを適用する(同一要素のみ)
要素名:only-of-type{~}疑似クラス唯一の子要素にスタイルを適用する(同一要素のみ)
:root{~}疑似クラス文書のルート要素にスタイルを適用する
要素名:visited{~}疑似クラス閲覧者が訪問済みのリンクにスタイルを適用する
要素名:hover{~}疑似クラスマウスポインターが重ねられた要素にスタイルを適用する
要素名:focus-within{~}疑似クラスフォーカスを持った要素を含む要素にスタイルを適用する
要素名:target{~}疑似クラスアンカーリンクの移動先となる要素にスタイルを適用する
要素名:not(条件){~}疑似クラス指定した条件を除いた要素にスタイルを適用する
@page :left{~}
@page:right{}
疑似クラス
印刷文書の左右ページにスタイルを適用する
要素名:enabled{~}疑似クラス
有効な要素にスタイルを適用する
要素名:in-range{~}
要素名:out-of-range{~}
疑似クラス
制限範囲内、または範囲外の値がある要素にスタイルを適用する
要素名:valid{~}疑似クラス内容の検証に成功したフォーム関連要素にスタイルを適用する
要素名:invalid{~}疑似クラス無効な入力内容が含まれたフォーム関連要素にスタイルを適用する
要素名:optional{~}疑似クラス必須ではないフォーム関連要素にスタイルを適用する
要素名:read-only{~}疑似クラス編集不可能な要素にスタイルを適用する
要素名:indeterminate{~}疑似クラス中間の状態にあるフォーム関連要素にスタイルを適用する
要素名:placeholder{~}疑似クラスプレースホルダーの文字列にスタイルを適用する
要素名::first-letter{~}疑似要素要素の1文字目にのみスタイルを適用する
要素名::backdrop{~}疑似要素全画面モード時の背後にあるボックスにスタイルを適用する
要素名::selection{~}
疑似要素選択された要素にスタイルを適用する
※一般的なブラウザで動作しない。
クラス解説
*{~}ユニバーサルセレクターすべての要素にスタイルを適用する
要素名 #ID名{~}IDセレクター
指定したID名を持つ要素にスタイルを適用する
要素名A > 要素名B {~}子セレクター子要素にスタイルを適用する
要素名A~要素名B{~}間接セレクター
弟要素にスタイルを適用する
要素名[属性=”属性値”]{~}属性セレクター指定した属性と属性値を持つ要素にスタイルを適用する
要素名[属性^=”属性値”]{~}属性セレクター
指定した文字列で始まる属性値を持つ要素にスタイルを適用する
要素名[属性*=”属性値”]{~}属性セレクター指定した文字列を含む属性値を持つ要素にスタイルを適用する
要素名:first-child{~}疑似クラス
最初の子要素にスタイルを適用する
要素名:last-child{~}疑似クラス
最後の子要素にスタイルを適用する
要素名:nth-child(n){~}疑似クラスn番目の子要素にスタイルを適用する
要素名:nth-last-child(n){~}疑似クラス最後からn番目の子要素にスタイルを適用する
要素名:only-child{~}疑似クラス唯一の子要素にスタイルを適用する
要素名:empty{~}疑似クラス子要素を持たない要素にスタイルを適用する
要素名:link{~}疑似クラス閲覧者が未訪問のリンクにスタイルを適用する
要素名:any-link{~}疑似クラス訪問の有無に関係なくリンクにスタイルを適用する
要素名:active{~}疑似クラスアクティブになった要素にスタイルを適用する
要素名:focus{~}疑似クラス
フォーカスされている要素にスタイルを適用する
:host{~}疑似クラス
Shadow DOMの内部からホストにスタイルを適用する
要素名:lang(言語){~}疑似クラス特定の言語コードを指定した要素にスタイルを適用する
要素名:fullscreen{~}疑似クラス
全画面モードでスタイルを適用する
@page :first{~}疑似クラス印刷文書の最初のページにスタイルを適用する
要素名:disabled{~}疑似クラス無効な要素にスタイルを適用する
要素名:checked{~}疑似クラスチェックされた要素にスタイルを適用する
要素名:default{~}疑似クラス既定値となっているフォーム関連要素にスタイルを適用する
要素名:required{~}疑似クラス必須のフォーム関連要素にスタイルを適用する
要素名:read-write{~}疑似クラス
編集可能な要素にスタイルを適用する
要素名:defined{~}疑似クラス定義されているすべての要素にスタイルを適用する
要素名:placeholder-shown{~}疑似クラスプレースホルダーが表示されている要素にスタイルを適用する
要素名::first-line{~}疑似要素
要素の1行目にのみスタイルを適用する
要素名::before{~}
要素名::after{~}
疑似要素要素の内容の前後に指定したコンテンツを挿入する
要素名::cue{~}疑似要素WEBVTTにスタイルを適用する
要素名::slotted(セレクター){~}疑似要素slot内に配置された要素にスタイルを適用する

カテゴリ別

フォント/テキスト

プロパティ解説
font-familyフォントを指定
font-styleフォントのスタイルを指定
font-variantフォントの形状をまとめて指定
font-variant-capsスモールキャピタルの使用を指定
font-variant-numeric数字、分数、序数標識の表記を指定
font-variant-alternates代替字体の使用を指定
font-variant-ligatures合字や前後関係に依存する字体を指定
font-variant-east-asianフォントの形状をまとめて指定
font-weightフォントの太さを指定
font-sizeフォントのサイズを指定
font-size-adjust小文字の高さに基づいたフォントサイズの選択を指定
line-height行の高さをまとめて指定
fontフォントと行、高さ等まとめて指定
font-stretchフォントの幅を指定
font-feature-settingsOpenTypeフォントの機能の有効・無効を指定
@font-faceWebフォントの利用を指定
font-kerningカーニング情報の使用方法を制御
text-transform英文字の大文字や小文字の表示方法を指定
text-align文章の揃え位置を指定する
text-justify文章の均等割付の形式を指定
text-align-last文章の最終行の揃え位置を指定
text-overflowボックスに収まらない文章の表示方法を指定
vertical-align行内やセル内の縦方向の揃え位置を指定
text-indent文章の1行目の字下げ幅を指定
letter-spacing文字の間隔を指定
word-spacing単語の間隔を指定
tab-sizeタブの表示幅を指定
プロパティ解説
overflow-wrap単語の途中での改行を指定
word-wrap単語の途中での改行を指定
hyphens単語の途中での改行におけるハイフンを指定
direction文字を表示する方向を指定
unicode-bidi文字の書字方向の上書き方法を指定
writing-mode縦書き、または横書きを指定
text-combine-upright縦中横を指定
text-orientation縦書き時の文字の向きを指定
text-decoration-line傍線の位置を指定
text-decoration-color傍線の色を指定
text-decoration-style傍線のスタイルを指定
text-decoration-thickness傍線の太さを指定
text-decoration傍線をまとめて指定
text-underline-position下線の位置を指定
text-emphasis-style傍線のスタイルと形を指定
text-emphasis-color傍線の色を指定
text-emphasis文字の傍線をまとめて指定
text-emphasis-position傍線の位置を指定
text-shadow文字の影を指定
list-style-imageリストマーカーの画像を指定
list-style-typeリストマーカーの種類を指定
list-style-positionリストマーカーの位置を指定
list-styleリストマーカーをまとめて指定
color文字の色を指定
word-break文章の改行方法を指定
white-spaceスペース、タブ、改行の表示方法を指定
line-break改行の禁則処理を指定

色/背景/ボーダー

プロパティ解説
background-color要素の背景色を指定
background-image要素の背景画像を指定
background-repeat背景画像の繰り返しを指定
background-attachmentスクロールしたときの背景画像の
表示方法を指定
background-position背景画像を表示する水平・垂直位置を指定
background-size背景画像の表示サイズを指定
background-origin背景画像を表示する基準位置を指定
background-clip背景画像を表示する領域を指定
background背景のプロパティをまとめて指定
mix-blend-mode要素同士の混合方法を指定
background-blend-mode背景色と背景画像の混合方法を指定
isolation重ね合わせコンテキストの生成を指定
opacity色の透明度を指定
color-adjust画面を表示する端末に応じた色の設定を許可
filterグラフィック効果を指定
backdrop-filter要素の背後のグラフィック
効果を指定
linear-gradient線形のグラデーションを表示
radial-gradient円形のグラデーションを表示
repeating-linear-gradient線形のグラデーションを繰り返して表示
repeating-radial-gradient円形のグラデーションを繰り返して表示
shape-outsideテキスト回り込みの形状を指定
shape-marginテキストの回り込みの形状にマージンを指定
shape-image-thresholdテキストの回り込みの形状を
画像から抽出する際のしきい値を指定
caret-color入力キャレットの色を指定
border-top-styleボーダーのスタイルを指定
border-right-styleボーダーのスタイルを指定
border-bottom-styleボーダーのスタイルを指定
border-left-styleボーダーのスタイルを指定
border-styleボーダーのスタイルをまとめて
指定する
border-top-widthボーダーの幅をまとめて指定
border-right-widthボーダーの幅をまとめて指定
border-bottom-widthボーダーの幅をまとめて指定
border-left-widthボーダーの幅をまとめて指定
border-top-left-radiusボーダーの角丸を指定
border-top-right-radiusボーダーの角丸を指定
border-bottom-left-radiusボーダーの角丸を指定
border-bottom-right-radiusボーダーの角丸を指定
border-image-widthボーダー画像の幅を指定
border-image-slice
ボーダー画像の分割位置を指定
border-image-outsetボーダー画像の領域を広げるサイズを指定
プロパティ解説
border-widthボーダーの幅をまとめて指定
border-top-colorボーダーの色を指定
border-right-colorボーダーの色を指定
border-bottom-colorボーダーの色を指定
border-left-colorボーダーの色を指定
border-colorボーダーの色をまとめて指定
border-topボーダーの各辺をまとめて指定
border-rightボーダーの各辺をまとめて指定
border-bottomボーダーの各辺をまとめて指定
border-leftボーダーの各辺をまとめて指定
borderボーダーをまとめて指定
border-block書字方向に応じたボーダーの幅、スタイル、色をまとめ指定
border-inline書字方向に応じたボーダーの幅、スタイル、色をまとめ指定
border-block-start開始側のボーダーをまとめて指定
border-block-end終了側のボーダーをまとめて指定
border-inline-start開始側のボーダーをまとめて指定
border-inline-end終了側のボーダーをまとめて指定
border-block-start-style書字方向に応じてボーダーのスタイルを
指定
border-block-end-style書字方向に応じてボーダーのスタイルを
指定
border-inline-start-style書字方向に応じてボーダーのスタイルを
指定
border-inline-end-style書字方向に応じてボーダーのスタイルを
指定
border-block-style書字方向に応じてボーダーのスタイルを
まとめて指定
border-inline-style書字方向に応じてボーダーのスタイルを
まとめて指定
border-block-start-width書字方向に応じてボーダーの幅を指定
border-block-end-width書字方向に応じてボーダーの幅を指定
border-inline-start-width書字方向に応じてボーダーの幅を指定
border-inline-end-width書字方向に応じてボーダーの幅を指定
border-blcok-width書字方向に応じてボーダーのスタイルを
まとめて指定
border-inline-width書字方向に応じてボーダーのスタイルを
まとめて指定
border-block-start-color書字方向に応じてボーダーの色を
まとめて指定
border-block-end-color書字方向に応じてボーダーの色を
まとめて指定
border-inline-start-color書字方向に応じてボーダーの色を
まとめて指定
border-inline-end-color書字方向に応じてボーダーの色を
まとめて指定
border-block-color書字方向に応じてボーダーの色を
まとめて指定
border-inline-color書字方向に応じてボーダーの色を
まとめて指定
border-radiusボーダーの角丸をまとめて指定
border-image-sourceボーダーに利用する画像を指定
border-image-repeatボーダー画像の繰り返しを指定
border-imageボーダー画像をまとめて指定

ボックス/テーブル

プロパティ解説
box-decoration-break分割されたボックスの表示方法指定
box-shadowボックスの影を指定
box-sizingボックスサイズの算出方法指定
widthボックス幅と高さ指定
heightボックス幅と高さ指定
max-widthボックス幅と高さの最大値指定
max-heightボックス幅と高さの最大値指定
min-widthボックス幅と高さの最小値指定
min-heightボックス幅と高さの最小値指定
max-block-size書字方向に応じボックス幅と高さの最大値指定
max-inline-size書字方向に応じボックス幅と高さの最大値指定
min-block-size書字方向に応じボックス幅と高さ最小値指定
min-inline-size書字方向に応じボックス幅と高さ最小値指定
overflowボックスに収まらない内容の表示方法指定
overflow-xボックスに収まらない内容の表示方法個別に指定
overflow-yボックスに収まらない内容の表示方法個別に指定
margin-topボックスのマージン幅指定
margin-rightボックスのマージン幅指定
margin-bottomボックスのマージン幅指定
margin-leftボックスのマージン幅指定
marginボックスのマージン幅まとめて指定
padding-topボックスのパディング幅指定
padding-rightボックスのパディング幅指定
padding-bottomボックスのパディング幅指定
padding-leftボックスのパディング幅指定
paddingボックスのパディング幅まとめて指定
margin-block-start書字方向に応じボックスマージン幅を指定
margin-blcok-end書字方向に応じボックスマージン幅を指定
margin-inline-start書字方向に応じボックスマージン幅を指定
margin-inline-end書字方向に応じボックスマージン幅を指定
margin-block書字方向に応じボックスマージン幅をまとめて
指定
margin-inline書字方向に応じボックスマージン幅をまとめて
指定
padding-block-start書字方向に応じボックスのパディング幅指定
padding-block-end書字方向に応じボックスのパディング幅指定
padding-block書字方向に応じてボックスのパディングまとめて指定
padding-inline書字方向に応じてボックスのパディングまとめて指定
padding-inline-start書字方向に応じボックスのパディング幅指定
padding-inline-end書字方向に応じボックスのパディング幅指定
scroll-padding-block-start書字方向に応じスクロールコンテナパディング幅指定
scroll-padding-block-end書字方向に応じスクロールコンテナパディング幅指定
scroll-padding-inline-start書字方向に応じスクロールコンテナパディング幅指定
scroll-padding-inline-end書字方向に応じスクロールコンテナパディング幅指定
scroll-margin-block-start書字方向に応じスナップされる位置の
マージン幅指定
scroll-margin-block-end書字方向に応じスナップされる位置の
マージン幅指定
scroll-margin-inline-start書字方向に応じスナップされる位置の
マージン幅指定
scroll-margin-inline-end書字方向に応じスナップされる位置の
マージン幅指定
プロパティ解説
outline-styleボックスのアウトラインのスタイルを指定
outline-widthボックスのアウトラインの幅を指定する
outline-colorボックスのアウトラインの色を指定
outlineボックスのアウトラインをまとめて指定
outline-offsetアウトラインのボーダーの間隔を指定
resizeボックスのサイズ変更の可否を指定
displayボックスの種類を指定
positionボックスの配置方法を指定
topボックスの配置位置を指定
rightボックスの配置位置を指定
bottomボックスの配置位置を指定
leftボックスの配置位置を指定
floatボックスの回り込み位置を指定
clearボックスの回り込みを解除
z-indexボックスの重ね順を指定
visibilityボックスの表示・非表示を指定
clip-pathボックスの部分的に切り抜いて表示
table-layout表組みのレイアウト方法を指定
border-collapse表組みの内のボーダーの表形式を指定
border-spacing表組み内のボーダーの間隔を指定
empty-cells空白セルのボーダーの表示方法を指定
caption-side表組みのタイトルの表示位置を指定
scroll-behaviorボックスにスクロール時の動きを指定
scroll-snap-typeスクロールにスナップさせる方法を指定
scroll-snap-alignボックスをスナップする位置を指定
scroll-margin-topスナップされる位置のマージンの幅を指定
scroll-margin-rightスナップされる位置のマージンの幅を指定
scroll-margin-bottomスナップされる位置のマージンの幅を指定
scroll-margin-leftスナップされる位置のマージンの幅を指定
scroll-marginスナップされる位置のマージンの幅を
まとめて指定
scroll-padding-top
スクロールコンテナパディング幅を指定
scroll-padding-rightスクロールコンテナパディング幅を指定
scroll-padding-bottomスクロールコンテナパディング幅を指定
scroll-padding-leftスクロールコンテナパディング幅指定
scroll-paddingスクロールコンテナパディング幅をまとめ指定
scroll-margin-block書字方向に応じスナップされる位置の
マージン幅まとめ指定
scroll-margin-inline書字方向に応じスナップされる位置の
マージン幅まとめ指定
scroll-padding-block書字方向に応じてスクロールコンテナ
パディング幅まとめ指定
scroll-padding-inline書字方向に応じてスクロールコンテナ
パディング幅まとめ指定
padding-start書字方向に応じボックスのパディング幅
まとめて指定
padding-end書字方向に応じボックスのパディング幅
まとめて指定

段組み

プロパティ解説
column-count段組みの列数を指定
column-width段組みの列幅を指定
columns段組みの列幅と列数をまとめて指定
column-gap段組みの間隔を指定する
column-span段組みをまたがる要素を指定する
column-fill段組みの内容を揃える方法を指定する
column-rule-width段組みの罫線の幅を指定
column-rule-style段組みの罫線のスタイルを指定
column-rule-color段組みの罫線の色を指定
column-rule段組みの罫線の幅とスタイル、色をまとめて指定
windows先頭に表示されるブロックコンテナーの最小行数を指定
orphans末尾に表示されるブロックコンテナーの最小行数を指定
break-beforeブロックの前後での改ページや段区切り指定
break-afterブロックの前後での改ページや段区切り指定
break-insideブロック内での改ページや段区切りを指定

フレキシブルボックス

プロパティ解説
displayフレキシブルボックスレイアウトを指定する
flex-directionフレックスアイテムの配置方法を指定する
flex-wrapフレックスアイテムの折り返しを指定する
flex-flowフレックスアイテムの配置方法と折り返しを指定する
orderフレックスアイテムを配置する順序を指定する
flex-growフレックスアイテムの幅の伸び率を指定する
flex-shrinkフレックスアイテムの幅の縮み率を指定する
flex-basisフレックスアイテムの基本の幅を指定する
flexフレックスアイテムの幅をまとめて指定する
justify-contentフレックスアイテムの主軸方向の揃え位置を指定する
place-contentボックス全体の揃え位置をまとめて指定する
justify-self個別のボックスの横方向の揃え位置を指定する
align-itemsフレックスアイテムのクロス軸方法の揃え位置を指定する
align-selfフレックスアイテムのクロス軸方向の揃え位置を個別に
指定する
place-self個別のボックスの揃え位置をまとめて指定する
justify-itemsすべてのボックスの横方向の揃え位置を指定する
place-itemsすべてのボックスの揃え位置をまとめて指定する
align-content複数行のアイテムのクロス軸方向の揃え位置を指定する

トランジション

プロパティ解説
transition-propertyトランジションを適用するプロパティを指定する
transition-durationトランジションが完了するまでの時間を指定する
transition-timing-functionトランジションの進行度を指定する
transition-delayトランジションが開始されるまでの時間を
指定する
transitionトランジションをまとめて指定する

トランスフォーム

プロパティ解説
transform平面空間で要素を変形する
transform3D空間で要素を変形する
transform-origin変形させる要素の中心点を指定する
perspective3D空間で変形する要素の奥行を表す
transform-style3D空間で変形する要素の子要素の配置を指定する
perspective-origin3D空間で変形する要素の視点の位置を指定する
backface-visibility3D空間で変形する要素の背面の表示方法を指定する
transform-box変形の参照ボックスを指定する

アニメーション

プロパティ解説
@keyframesアニメーションの動きを指定する
animation-nameアニメーションを適用する要素を指定する
animation-durationアニメーションが完了するまでの時間を
指定する
animation-delayアニメーションが開始するまでの時間指定する
animation-play-stateアニメーションの再生、または一時停止を
指定する
animation-timing-functionアニメーションの進行度を指定する
animation-fill-modeアニメーションの再生中・再生後のスタイルを
指定する
animation-iteration-countアニメーションの実行回数を指定する
animation-directionアニメーションの再生方向を指定する
animationアニメーションのプロパティをまとめて指定する

コンテンツ

プロパティ解説
cursorマウスポインターの表示方法を指定
touch-actionタッチ画面におけるユーザーの操作を指定
content:afterと:beforeを対象にコンテンツを挿入
quotescontentプロパティで挿入する記号を指定
counter-incrementカウンター値を更新
counter-resetカウンター値をリセット
object-fit画像などをボックスにフィットさせる方法を指定
object-position画像などをボックスに揃える位置を指定
image-orientaion画像の回転角度を指定
ime-modeテキスト入力欄での入力モードを指定
will-changeブラウザーに対して変更が予測される要素を指示
pointer-eventsポインターイベントの対象になる場合の条件を指定
all要素のすべてのプロパティを初期化

グリッドレイアウト

プロパティ解説
grid-template-rowsグリッドトラックの行のライン名と高さを指定
grid-template-columnsグリッドトラックの列のライン名と幅を指定
grid-template-areasグリッドエリアの名前を指定
grid-templateグリッドトラックをまとめて指定
grid-auto-rows暗黙的グリッドトラックの行の高さを指定
grid-auto-columns暗黙的グリッドトラックの列の幅を指定
grid-auto-flowグリッドアイテムの自動配置方法を指定
gridグリッドトラックとアイテムの配置方法をまとめて指定
grid-row-startアイテムの配置と大きさを行の始点・終点を基準に指定
grid-row-endアイテムの配置と大きさを行の始点・終点を基準に指定
grid-rowアイテムの配置と大きさを行方向を基準にまとめて指定
grid-column-startアイテムの配置と大きさを列方向を基準に指定
grid-column-endアイテムの配置と大きさを列方向を基準に指定
grid-areaアイテムの配置と大きさをまとめて指定
row-gap行の間隔を指定
column-gap列の間隔を指定
gap行と列の間隔をまとめて指定