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プロパティ目次

疑似クラスとは

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

疑似要素とは

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

セレクタ

頻度クラス解説
要素名{~}[star rate=”3″ max=”3″ number=”0″]タイプセレクター指定した要素にスタイルを適用する
*{~}[star rate=”3″ max=”3″ number=”0″]ユニバーサルセレクターすべての要素にスタイルを適用する
要素名.クラス名{~}[star rate=”3″ max=”3″ number=”0″]クラスセレクター指定したクラス名を持つ要素にスタイルを適用する
要素名 #ID名{~}[star rate=”3″ max=”3″ number=”0″]IDセレクター指定したID名を持つ要素にスタイルを適用する
要素名A 要素名B{~}[star rate=”3″ max=”3″ number=”0″]子孫セレクター子孫要素にスタイルを適用する
要素名A > 要素名B {~}[star rate=”3″ max=”3″ number=”0″]子セレクター子要素にスタイルを適用する
要素名A+要素名B{~}[star rate=”3″ max=”3″ number=”0″]隣接セレクター直後の要素にスタイルを適用する
要素名A~要素名B{~}[star rate=”3″ max=”3″ number=”0″]間接セレクター弟要素にスタイルを適用する
要素名[属性]{~}[star rate=”3″ max=”3″ number=”0″]属性セレクター指定した属性を持つ要素にスタイルを適用する
要素名[属性=”属性値”]{~}[star rate=”3″ max=”3″ number=”0″]属性セレクター指定した属性と属性値を持つ要素にスタイルを適用する
要素名[属性~=”属性値”]{~}[star rate=”3″ max=”3″ number=”0″]属性セレクター指定した属性値を含む要素にスタイルを適用する
要素名[属性^=”属性値”]{~}[star rate=”3″ max=”3″ number=”0″]属性セレクター指定した文字列で始まる属性値を持つ要素にスタイルを適用する
要素名[属性$=”属性値”]{~}[star rate=”3″ max=”3″ number=”0″]属性セレクター指定した文字列で終わる属性値を持つ要素にスタイルを適用する
要素名[属性*=”属性値”]{~}[star rate=”3″ max=”3″ number=”0″]属性セレクター指定した文字列を含む属性値を持つ要素にスタイルを適用する
要素名[属性|=”属性値”]{~}[star rate=”3″ max=”3″ number=”0″]属性セレクター指定した文字列がハイフンの前にある属性値を持つ要素にスタイルを適用する
要素名:first-child{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス最初の子要素にスタイルを適用する
要素名:first-of-type{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス最初の子要素にスタイルを適用する(同一要素のみ)
要素名:last-child{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス最後の子要素にスタイルを適用する
要素名:last-of-type{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス最後の子要素にスタイルを適用する(同一要素のみ)
要素名:nth-child(n){~}[star rate=”3″ max=”3″ number=”0″]疑似クラスn番目の子要素にスタイルを適用する
要素名:nth-of-type(n)[star rate=”3″ max=”3″ number=”0″]疑似クラスn番目の子要素にスタイルを適用する(同一要素のみ)
要素名:nth-last-child(n){~}[star rate=”3″ max=”3″ number=”0″]疑似クラス最後からn番目の子要素にスタイルを適用する
要素名:nth-last-of-type(n){~}[star rate=”3″ max=”3″ number=”0″]疑似クラス最後からn番目の子要素にスタイルを適用する(同一要素のみ)
要素名:only-child{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス唯一の子要素にスタイルを適用する
要素名:only-of-type{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス唯一の子要素にスタイルを適用する(同一要素のみ)
要素名:empty{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス子要素を持たない要素にスタイルを適用する
:root{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス文書のルート要素にスタイルを適用する
要素名:link{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス閲覧者が未訪問のリンクにスタイルを適用する
要素名:visited{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス閲覧者が訪問済みのリンクにスタイルを適用する
要素名:any-link{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス訪問の有無に関係なくリンクにスタイルを適用する
要素名:active{~}[star rate=”3″ max=”3″ number=”0″]疑似クラスアクティブになった要素にスタイルを適用する
要素名:hover{~}[star rate=”3″ max=”3″ number=”0″]疑似クラスマウスポインターが重ねられた要素にスタイルを適用する
要素名:focus{~}[star rate=”3″ max=”3″ number=”0″]疑似クラスフォーカスされている要素にスタイルを適用する
要素名:focus-within{~}[star rate=”2″ max=”2″ number=”0″]疑似クラスフォーカスを持った要素を含む要素にスタイルを適用する
:host{~}[star rate=”2″ max=”2″ number=”0″]疑似クラスShadow DOMの内部からホストにスタイルを適用する
要素名:target{~}[star rate=”3″ max=”3″ number=”0″]疑似クラスアンカーリンクの移動先となる要素にスタイルを適用する
要素名:lang(言語){~}[star rate=”3″ max=”3″ number=”0″]疑似クラス特定の言語コードを指定した要素にスタイルを適用する
要素名:not(条件){~}[star rate=”3″ max=”3″ number=”0″]疑似クラス指定した条件を除いた要素にスタイルを適用する
要素名:fullscreen{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス全画面モードでスタイルを適用する

@page :left{~}

@page:right{}

[star rate=”2″ max=”2″ number=”0″]疑似クラス印刷文書の左右ページにスタイルを適用する
@page :first{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス印刷文書の最初のページにスタイルを適用する
要素名:enabled{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス有効な要素にスタイルを適用する
要素名:disabled{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス無効な要素にスタイルを適用する
要素名:checked{~}[star rate=”3″ max=”3″ number=”0″]疑似クラスチェックされた要素にスタイルを適用する
要素名:default{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス既定値となっているフォーム関連要素にスタイルを適用する

要素名:in-range{~}

要素名:out-of-range{~}

[star rate=”1″ max=”1″ number=”0″]疑似クラス制限範囲内、または範囲外の値がある要素にスタイルを適用する
要素名:valid{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス内容の検証に成功したフォーム関連要素にスタイルを適用する
要素名:invalid{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス無効な入力内容が含まれたフォーム関連要素にスタイルを適用する
要素名:required{~}[star rate=”3″ max=”3″ number=”0″]疑似クラス必須のフォーム関連要素にスタイルを適用する
要素名:optional{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス必須ではないフォーム関連要素にスタイルを適用する
要素名:read-write{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス編集可能な要素にスタイルを適用する
要素名:read-only{~}[star rate=”2″ max=”2″ number=”0″]疑似クラス編集不可能な要素にスタイルを適用する
要素名:defined{~}[star rate=”1″ max=”1″ number=”0″]疑似クラス定義されているすべての要素にスタイルを適用する
要素名:indeterminate{~}[star rate=”1″ max=”1″ number=”0″]疑似クラス中間の状態にあるフォーム関連要素にスタイルを適用する
要素名:placeholder-shown{~}[star rate=”2″ max=”2″ number=”0″]疑似クラスプレースホルダーが表示されている要素にスタイルを適用する
要素名:placeholder{~}[star rate=”2″ max=”2″ number=”0″]疑似クラスプレースホルダーの文字列にスタイルを適用する
要素名::first-line{~}[star rate=”3″ max=”3″ number=”0″]疑似要素要素の1行目にのみスタイルを適用する
要素名::first-letter{~}[star rate=”3″ max=”3″ number=”0″]疑似要素要素の1文字目にのみスタイルを適用する

要素名::before{~}

要素名::after{~}

[star rate=”3″ max=”3″ number=”0″]疑似要素要素の内容の前後に指定したコンテンツを挿入する
要素名::backdrop{~}[star rate=”2″ max=”2″ number=”0″]疑似要素全画面モード時の背後にあるボックスにスタイルを適用する
要素名::cue{~}[star rate=”3″ max=”3″ number=”0″]疑似要素WEBVTTにスタイルを適用する
要素名::selection{~}疑似要素

選択された要素にスタイルを適用する

※一般的なブラウザで動作しない。

要素名::slotted(セレクター){~}[star rate=”2″ max=”2″ number=”0″]疑似要素slot内に配置された要素にスタイルを適用する

カテゴリ別

フォント/テキスト

プロパティ頻度解説
font-family[star rate=”3″ max=”3″ number=”0″]フォントを指定する
font-style[star rate=”3″ max=”3″ number=”0″]フォントのスタイルを指定する
font-variant[star rate=”2″ max=”2″ number=”0″]フォントの形状をまとめて指定する
font-variant-caps[star rate=”2″ max=”2″ number=”0″]スモールキャピタルの使用を指定する
font-variant-numeric[star rate=”2″ max=”2″ number=”0″]数字、分数、序数標識の表記を指定する
font-variant-alternates[star rate=”2″ max=”2″ number=”0″]代替字体の使用を指定する
font-variant-ligatures[star rate=”2″ max=”2″ number=”0″]合字や前後関係に依存する字体を指定する
font-variant-east-asian[star rate=”2″ max=”2″ number=”0″]フォントの形状をまとめて指定する
font-weight[star rate=”3″ max=”3″ number=”0″]フォントの太さを指定
font-size[star rate=”3″ max=”3″ number=”0″]フォントのサイズを指定
font-size-adjust[star rate=”2″ max=”2″ number=”0″]

小文字の高さに基づいたフォントサイズの選択を

指定する

line-height[star rate=”3″ max=”3″ number=”0″]行の高さをまとめて指定
font[star rate=”3″ max=”3″ number=”0″]フォントと行、高さ等まとめて指定する
font-stretch[star rate=”3″ max=”3″ number=”0″]フォントの幅を指定
font-feature-settings[star rate=”2″ max=”2″ number=”0″]OpenTypeフォントの機能の有効・無効を指定
@font-face[star rate=”3″ max=”3″ number=”0″]Webフォントの利用を指定する
font-kerning[star rate=”2″ max=”2″ number=”0″]カーニング情報の使用方法を制御する
text-transform[star rate=”3″ max=”3″ number=”0″]英文字の大文字や小文字の表示方法を指定する
text-align[star rate=”3″ max=”3″ number=”0″]文章の揃え位置を指定する
text-justify[star rate=”3″ max=”3″ number=”0″]文章の均等割付の形式を指定する
text-align-last[star rate=”2″ max=”2″ number=”0″]文章の最終行の揃え位置を指定する
text-overflow[star rate=”2″ max=”2″ number=”0″]ボックスに収まらない文章の表示方法を指定する
vertical-align[star rate=”3″ max=”3″ number=”0″]行内やセル内の縦方向の揃え位置を指定する
text-indent[star rate=”3″ max=”3″ number=”0″]文章の1行目の字下げ幅を指定する
letter-spacing[star rate=”3″ max=”3″ number=”0″]文字の間隔を指定する
word-spacing[star rate=”3″ max=”3″ number=”0″]単語の間隔を指定する
tab-size[star rate=”1″ max=”1″ number=”0″]タブの表示幅を指定する
white-space[star rate=”3″ max=”2″ number=”0″]スペース、タブ、改行の表示方法を指定する
word-break[star rate=”3″ max=”3″ number=”0″]文章の改行方法を指定する
line-break[star rate=”3″ max=”3″ number=”0″]改行の禁則処理を指定する

フォント/テキスト

プロパティ頻度解説
overflow-wrap[star rate=”3″ max=”3″ number=”0″]単語の途中での改行を指定する
word-wrap[star rate=”2″ max=”2″ number=”0″]
hyphens[star rate=”1″ max=”1″ number=”0″]単語の途中での改行におけるハイフンを指定する
direction[star rate=”2″ max=”2″ number=”0″]文字を表示する方向を指定する
unicode-bidi[star rate=”2″ max=”2″ number=”0″]文字の書字方向の上書き方法を指定する
writing-mode[star rate=”2″ max=”2″ number=”0″]縦書き、または横書きを指定する
text-combine-upright[star rate=”2″ max=”2″ number=”0″]縦中横を指定する
text-orientation[star rate=”2″ max=”2″ number=”0″]縦書き時の文字の向きを指定する
text-decoration-line[star rate=”2″ max=”2″ number=”0″]傍線の位置を指定する
text-decoration-color[star rate=”2″ max=”2″ number=”0″]傍線の色を指定する
text-decoration-style[star rate=”2″ max=”2″ number=”0″]傍線のスタイルを指定する
text-decoration-thickness[star rate=”1″ max=”1″ number=”0″]傍線の太さを指定する
text-decoration[star rate=”3″ max=”3″ number=”0″]傍線をまとめて指定する
text-underline-position[star rate=”2″ max=”2″ number=”0″]下線の位置を指定する
text-emphasis-style[star rate=”2″ max=”2″ number=”0″]傍線のスタイルと形を指定する
text-emphasis-color[star rate=”2″ max=”2″ number=”0″]傍線の色を指定する
text-emphasis[star rate=”2″ max=”2″ number=”0″]文字の傍線をまとめて指定する
text-emphasis-position[star rate=”2″ max=”2″ number=”0″]傍線の位置を指定する
text-shadow[star rate=”3″ max=”3″ number=”0″]文字の影を指定する
list-style-image[star rate=”2″ max=”2″ number=”0″]リストマーカーの画像を指定する
list-style-type[star rate=”3″ max=”3″ number=”0″]リストマーカーの種類を指定する
list-style-position[star rate=”3″ max=”3″ number=”0″]リストマーカーの位置を指定する
list-style[star rate=”3″ max=”3″ number=”0″]リストマーカーをまとめて指定する
color[star rate=”3″ max=”3″ number=”0″]文字の色を指定する

色/背景/ボーダー

プロパティ頻度解説
background-color[star rate=”3″ max=”3″ number=”0″]要素の背景色を指定する
background-image[star rate=”3″ max=”3″ number=”0″]要素の背景画像を指定する
background-repeat[star rate=”3″ max=”3″ number=”0″]背景画像の繰り返しを指定する
background-attachment[star rate=”3″ max=”3″ number=”0″]

スクロールしたときの背景画像の表示方法を

指定する

background-position[star rate=”3″ max=”3″ number=”0″]

背景画像を表示する水平・垂直位置を指定する

background-size[star rate=”3″ max=”3″ number=”0″]背景画像の表示サイズを指定する
background-origin[star rate=”3″ max=”3″ number=”0″]背景画像を表示する基準位置を指定する
background-clip[star rate=”2″ max=”2″ number=”0″]背景画像を表示する領域を指定する
background[star rate=”3″ max=”3″ number=”0″]背景のプロパティをまとめて指定する
mix-blend-mode[star rate=”1″ max=”1″ number=”0″]要素同士の混合方法を指定する
background-blend-mode[star rate=”1″ max=”1″ number=”0″]背景色と背景画像の混合方法を指定する
isolation[star rate=”1″ max=”1″ number=”0″]重ね合わせコンテキストの生成を指定する
opacity[star rate=”3″ max=”3″ number=”0″]色の透明度を指定する
color-adjust[star rate=”1″ max=”1″ number=”0″]画面を表示する端末に応じた色の設定を許可する
filter[star rate=”1″ max=”1″ number=”0″]グラフィック効果を指定する
backdrop-filter[star rate=”1″ max=”1″ number=”0″]要素の背後のグラフィック効果を指定する
linear-gradient[star rate=”3″ max=”3″ number=”0″]線形のグラデーションを表示する
radial-gradient[star rate=”3″ max=”3″ number=”0″]円形のグラデーションを表示する
repeating-linear-gradient[star rate=”3″ max=”3″ number=”0″]線形のグラデーションを繰り返して表示する
repeating-radial-gradient[star rate=”3″ max=”3″ number=”0″]円形のグラデーションを繰り返して表示する
shape-outside[star rate=”1″ max=”1″ number=”0″]テキスト回り込みの形状を指定する
shape-margin[star rate=”1″ max=”1″ number=”0″]テキストの回り込みの形状にマージンを指定する
shape-image-threshold[star rate=”1″ max=”1″ number=”0″]

テキストの回り込みの形状を画像から抽出する

際のしきい値を指定する

caret-color[star rate=”1″ max=”1″ number=”0″]入力キャレットの色を指定する
border-top-style[star rate=”3″ max=”3″ number=”0″]ボーダーのスタイルを指定する
border-right-style
border-bottom-style
border-left-style
border-style[star rate=”3″ max=”3″ number=”0″]ボーダーのスタイルをまとめて指定する
border-top-width[star rate=”3″ max=”3″ number=”0″]ボーダーの幅をまとめて指定する
border-right-width
border-bottom-width
border-left-width

色/背景/ボーダー

プロパティ頻度解説
border-width[star rate=”3″ max=”3″ number=”0″]ボーダーの幅をまとめて指定する
border-top-color[star rate=”3″ max=”3″ number=”0″]ボーダーの色を指定する
border-right-color
border-bottom-color
border-left-color
border-color[star rate=”3″ max=”3″ number=”0″]ボーダーの色をまとめて指定する
border-top[star rate=”3″ max=”3″ number=”0″]ボーダーの各辺をまとめて指定する
border-right
border-bottom
border-left
border[star rate=”3″ max=”3″ number=”0″]ボーダーをまとめて指定する
border-block-start-style[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボーダーのスタイルを

指定する

border-block-end-style
border-inline-start-style
border-inline-end-style
border-block-style[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボーダーのスタイルを

まとめて指定する

border-inline-style
border-block-start-width[star rate=”1″ max=”1″ number=”0″]書字方向に応じてボーダーの幅を指定する
border-block-end-width
border-inline-start-width
border-inline-end-width
border-blcok-width[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボーダーのスタイルを

まとめて指定する

border-inline-width
border-block-start-color[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボーダーの色を

まとめて指定する

border-block-end-color
border-inline-start-color
border-inline-end-color
border-block-color[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボーダーの色を

まとめて指定する

border-inline-color
border-top-left-radius[star rate=”3″ max=”3″ number=”0″]ボーダーの角丸を指定する
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius[star rate=”3″ max=”3″ number=”0″]ボーダーの角丸をまとめて指定する
border-image-source[star rate=”1″ max=”1″ number=”0″]ボーダーに利用する画像を指定する
border-image-width[star rate=”1″ max=”1″ number=”0″]ボーダー画像の幅を指定する
border-image-slice[star rate=”1″ max=”1″ number=”0″]ボーダー画像の分割位置を指定する
border-image-repeat[star rate=”1″ max=”1″ number=”0″]ボーダー画像の繰り返しを指定する
border-image-outset[star rate=”1″ max=”1″ number=”0″]ボーダー画像の領域を広げるサイズを指定する
border-image[star rate=”1″ max=”1″ number=”0″]ボーダー画像をまとめて指定する

ボックス/テーブル

プロパティ頻度解説
box-decoration-break[star rate=”1″ max=”1″ number=”0″]分割されたボックスの表示方法を指定する
box-shadow[star rate=”3″ max=”3″ number=”0″]ボックスの影を指定する
box-sizing[star rate=”3″ max=”3″ number=”0″]ボックスサイズの算出方法を指定する
width[star rate=”3″ max=”3″ number=”0″]
[star rate=”3″ max=”3″ number=”0″]
ボックスの幅と高さを指定する
height
max-width[star rate=”3″ max=”3″ number=”0″]ボックスの幅と高さの最大値を指定する
max-height
min-width[star rate=”3″ max=”3″ number=”0″]ボックスの幅と高さの最小値を指定する
min-height
max-block-size[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボックスの幅と高さの最大値を

指定する

max-inline-size
min-block-size[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボックスの幅と高さの最小値を

指定する

min-inline-size
overflow[star rate=”3″ max=”3″ number=”0″]

ボックスに収まらない内容の表示方法を指定する

overflow-x[star rate=”3″ max=”3″ number=”0″]

ボックスに収まらない内容の表示方法を個別に

指定する

overflow-y[star rate=”3″ max=”3″ number=”0″]
margin-top[star rate=”3″ max=”3″ number=”0″]ボックスのマージン幅を指定する
margin-right
margin-bottom
margin-left
margin[star rate=”3″ max=”3″ number=”0″]ボックスのマージンの幅をまとめて指定する
padding-top[star rate=”3″ max=”3″ number=”0″]ボックスのパディングの幅を指定する
padding-right
padding-bottom
padding-left
padding[star rate=”3″ max=”3″ number=”0″]ボックスのパディングの幅をまとめて指定する
margin-block-start[star rate=”1″ max=”1″ number=”0″]書字方向に応じてボックスのマージンの幅を指定する
margin-blcok-end
margin-inline-start
margin-inline-end
margin-block[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボックスのマージンの幅をまとめて

指定する

margin-inline
padding-block-start[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボックスのパディングの幅を

指定する

padding-block-end
padding-inline-start
padding-inline-end
padding-start[star rate=”1″ max=”1″ number=”0″]

書字方向に応じてボックスのパディングの幅を

まとめて指定する

padding-end

ボックス/テーブル

プロパティ頻度解説
outline-style[star rate=”3″ max=”3″ number=”0″]ボックスのアウトラインのスタイルを指定する
outline-width[star rate=”3″ max=”3″ number=”0″]ボックスのアウトラインの幅を指定する
outline-color[star rate=”3″ max=”3″ number=”0″]ボックスのアウトラインの色を指定する
outline[star rate=”3″ max=”3″ number=”0″]ボックスのアウトラインをまとめて指定する
outline-offset[star rate=”3″ max=”3″ number=”0″]アウトラインのボーダーの間隔を指定する
resize[star rate=”1″ max=”1″ number=”0″]ボックスのサイズ変更の可否を指定する
display[star rate=”3″ max=”3″ number=”0″]ボックスの種類を指定する
position[star rate=”3″ max=”3″ number=”0″]ボックスの配置方法を指定する
top[star rate=”3″ max=”3″ number=”0″]ボックスの配置位置を指定する
right
bottom
left
float[star rate=”3″ max=”3″ number=”0″]ボックスの回り込み位置を指定する
clear[star rate=”3″ max=”3″ number=”0″]ボックスの回り込みを解除する
z-index[star rate=”3″ max=”3″ number=”0″]ボックスの重ね順を指定する
visibility[star rate=”3″ max=”3″ number=”0″]ボックスの表示・非表示を指定する
clip-path[star rate=”1″ max=”1″ number=”0″]ボックスの部分的に切り抜いて表示する
table-layout[star rate=”3″ max=”3″ number=”0″]表組みのレイアウト方法を指定する
border-collapse[star rate=”3″ max=”3″ number=”0″]表組みの内のボーダーの表形式を指定する
border-spacing[star rate=”3″ max=”3″ number=”0″]表組み内のボーダーの間隔を指定する
empty-cells[star rate=”3″ max=”3″ number=”0″]空白セルのボーダーの表示方法を指定する
caption-side[star rate=”3″ max=”3″ number=”0″]表組みのタイトルの表示位置を指定する
scroll-behavior[star rate=”2″ max=”2″ number=”0″]ボックスにスクロール時の動きを指定する
scroll-snap-type[star rate=”2″ max=”2″ number=”0″]スクロールにスナップさせる方法を指定する
scroll-snap-align[star rate=”2″ max=”2″ number=”0″]ボックスをスナップする位置を指定する
scroll-margin-top[star rate=”2″ max=”2″ number=”0″]スナップされる位置のマージンの幅を指定する
scroll-margin-right
scroll-margin-bottom
scroll-margin-left
scroll-margin[star rate=”2″ max=”2″ number=”0″]

スナップされる位置のマージンの幅を

まとめて指定する

scroll-padding-top[star rate=”2″ max=”2″ number=”0″]

スクロールコンテナーのパディングの幅を

指定する

scroll-padding-right
scroll-padding-bottom
scroll-padding-left
scroll-padding[star rate=”2″ max=”2″ number=”0″]

スクロールコンテナーのパディングの幅を

まとめて指定する

scroll-margin-block-start[star rate=”2″ max=”2″ number=”0″]

書字方向に応じてスナップされる位置の

マージンの幅を指定する

scroll-margin-block-end
scroll-margin-inline-start
scroll-margin-inline-end
scroll-margin-block[star rate=”2″ max=”2″ number=”0″]

書字方向に応じてスナップされる位置の

マージンの幅をまとめて指定する

scroll-margin-inline
scroll-padding-block-start[star rate=”2″ max=”2″ number=”0″]

書字方向に応じてスクロールコンテナーの

パディングの幅を指定する

scroll-padding-block-end
scroll-padding-inline-start
scroll-padding-inline-end
scroll-padding-block[star rate=”2″ max=”2″ number=”0″]

書字方向に応じてスクロールコンテナーの

パディングの幅をまとめて指定する

scroll-padding-inline

段組み

プロパティ頻度解説
column-count[star rate=”3″ max=”3″ number=”0″]段組みの列数を指定する
column-width[star rate=”3″ max=”3″ number=”0″]段組みの列幅を指定する
columns[star rate=”3″ max=”3″ number=”0″]段組みの列幅と列数をまとめて指定する
column-gap[star rate=”3″ max=”3″ number=”0″]段組みの間隔を指定する
column-span[star rate=”3″ max=”3″ number=”0″]段組みをまたがる要素を指定する
column-fill[star rate=”3″ max=”3″ number=”0″]段組みの内容を揃える方法を指定する
column-rule-width[star rate=”3″ max=”3″ number=”0″]段組みの罫線の幅を指定する
column-rule-style[star rate=”3″ max=”3″ number=”0″]段組みの罫線のスタイルを指定する
column-rule-color[star rate=”3″ max=”3″ number=”0″]段組みの罫線の色を指定する
column-rule[star rate=”3″ max=”3″ number=”0″]段組みの罫線の幅とスタイル、色をまとめて指定する
windows[star rate=”2″ max=”2″ number=”0″]

先頭に表示されるブロックコンテナーの最小行数を

指定する

orphans[star rate=”2″ max=”2″ number=”0″]

末尾に表示されるブロックコンテナーの最小行数を

指定する

break-before[star rate=”2″ max=”2″ number=”0″]ブロックの前後での改ページや段区切りを指定する
break-after[star rate=”2″ max=”2″ number=”0″]
break-inside[star rate=”2″ max=”2″ number=”0″]ブロック内での改ページや段区切りを指定する

フレキシブルボックス

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

トランジション

プロパティ頻度解説
transition-property[star rate=”3″ max=”3″ number=”0″]トランジションを適用するプロパティを指定する
transition-duration[star rate=”3″ max=”3″ number=”0″]トランジションが完了するまでの時間を指定する
transition-timing-function[star rate=”3″ max=”3″ number=”0″]トランジションの進行度を指定する
transition-delay[star rate=”3″ max=”3″ number=”0″]トランジションが開始されるまでの時間を
指定する
transition[star rate=”3″ max=”3″ number=”0″]トランジションをまとめて指定する

トランスフォーム

プロパティ頻度解説
transform[star rate=”3″ max=”3″ number=”0″]平面空間で要素を変形する
transform[star rate=”3″ max=”3″ number=”0″]3D空間で要素を変形する
transform-origin[star rate=”3″ max=”3″ number=”0″]変形させる要素の中心点を指定する
perspective[star rate=”2″ max=”2″ number=”0″]3D空間で変形する要素の奥行を表す
transform-style[star rate=”2″ max=”2″ number=”0″]3D空間で変形する要素の子要素の配置を指定する
perspective-origin[star rate=”2″ max=”2″ number=”0″]3D空間で変形する要素の視点の位置を指定する
backface-visibility[star rate=”2″ max=”2″ number=”0″]3D空間で変形する要素の背面の表示方法を指定する
transform-box[star rate=”2″ max=”2″ number=”0″]変形の参照ボックスを指定する

アニメーション

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

コンテンツ

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

グリッドレイアウト

プロパティ頻度解説
grid-template-rows[star rate=”3″ max=”3″ number=”0″]グリッドトラックの行のライン名と高さを指定する
grid-template-columns[star rate=”3″ max=”3″ number=”0″]グリッドトラックの列のライン名と幅を指定する
grid-template-areas[star rate=”3″ max=”3″ number=”0″]グリッドエリアの名前を指定する
grid-template[star rate=”3″ max=”3″ number=”0″]グリッドトラックをまとめて指定する
grid-auto-rows[star rate=”3″ max=”3″ number=”0″]暗黙的グリッドトラックの行の高さを指定する
grid-auto-columns[star rate=”3″ max=”3″ number=”0″]暗黙的グリッドトラックの列の幅を指定する
grid-auto-flow[star rate=”1″ max=”1″ number=”0″]グリッドアイテムの自動配置方法を指定する
grid[star rate=”3″ max=”3″ number=”0″]

グリッドトラックとアイテムの配置方法をまとめて

指定する

grid-row-start[star rate=”3″ max=”3″ number=”0″]

アイテムの配置と大きさを行の始点・終点を基準に

指定する

grid-row-end
grid-row[star rate=”3″ max=”3″ number=”0″]

アイテムの配置と大きさを行方向を基準に

まとめて指定する

grid-column-start[star rate=”3″ max=”3″ number=”0″]アイテムの配置と大きさを列方向を基準に指定する
grid-column-end
grid-column
grid-area[star rate=”3″ max=”3″ number=”0″]アイテムの配置と大きさをまとめて指定する
row-gap[star rate=”3″ max=”3″ number=”0″]行の間隔を指定する
column-gap[star rate=”3″ max=”3″ number=”0″]列の間隔を指定する
gap[star rate=”3″ max=”3″ number=”0″]行と列の間隔をまとめて指定する