CSSの書式
CSS（Cascading Style Sheets）の略です。HTMLは、HTML文書の内容に意味付けを行いますが、CSSではHTML文書のデザインやレイアウトといったスタイルを整えます。
基本書式
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のすべてのよそは、ボックスモデルに準じた領域を持っています。以下の図で示すように４つの領域で構成されています。
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～ｈ6、header、hr、html、legend、nav、ol、p、pre、section、ul要素などはブロックボックス。span、strong、emなどはインラインボックス
ブロックボックスとインラインボックス
ブロックボックスは、他のブロックボックスやインラインボックスを含めることができます。ウィンドウ幅いっぱになる長方形の領域を形成します。多くのブラウザは上から下の書字方向に向かって要素は配置されます。インラインボックスにはブロックボックスやインラインボックスを含めることができません。また、ブロックボックス内を左から右に向かって配置されます。
数値+単位の指定方法
色の指定方法
CSS関数とは
CSS３には、CSS関数と呼ばれる書式があります。CSS関数とは計算を実行したり条件を指定したりすることができます。指定方法は関数名と括弧（）で囲い引数を指定します。例：calc( 100*10 )
基本記述
関数名( 引数 )コメントアウト
CSSでは、「/* コメント */」という形式でコメントができます。ＣＳＳとしては処理されないので説明やメモとして使用できます。コメントは改行することもできます。
/*
Webサイトに共通のクラスを適用
*//* h1のタイトルクラスの色は青に指定 */
h1.title {
color: blue;
}
h2.title {
color: red;
/*
一時的にfont-sizeは無効
font-size: 15px;
*/
}ベンダープレフィックス
CSS３には正式に勧告される前の機能があります。ブラウザメーカによって正式勧告前の機能を先行して実装しているものもあります。また、ブラウザ独自の機能を実装しているケースもあります。これらの機能を使用する場合、明示的にプロパティの先頭に接頭辞（ベンダープレフィックス）を付ける必要があります。
ベンダープレフィックス種類
| -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要素に２つの同じスタイルを定義していますが、後のカラーが青が優先されます。
スタイル優先の得点計算
CSSを要素に適用するセレクタで指定するstyle属性を使うといった方法がありますが、利用する方法で得点計算され一番高い指定が適用されます。
| 指定方法 | 例 | 点数 |
|---|---|---|
| style属性 | style=”” | 1000点 |
| id属性のセレクタ指定 | #sample{} | 100点 |
| class属性のセレクタ指定 | .sample{} | 10点 |
| 疑似クラスのセレクタ指定 | input[name=”text”]{} | 10点 |
| 要素名のセレクタ指定 | h1{} | 1点 |
| 疑似要素のセレクタ指定 | li:first-child{} | 1点 |
| 全称セレクタ指定 | *{} | 0点 |
以下の３つのスタイルを適用した場合、最後の指定が一番得点が高いため優先的にスタイルが適用されます。
| 指定 | 計算式 | 点数 |
|---|---|---|
| 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プロパティ目次
よく使う 用途によっては使う あまり使わない
疑似クラスとは
疑似クラスは、主にその要素の「状態」によって適用されるかどうかが決定されるセレクタ。
疑似要素とは
要素ではない部分（タグで囲われていない範囲）を適用先として指定するためのセレクタ。
セレクタ
| 頻度 | クラス | 解説 | |
|---|---|---|---|
| 要素名{～} | タイプセレクター | 指定した要素にスタイルを適用する | |
| *{～} | ユニバーサルセレクター | すべての要素にスタイルを適用する | |
| 要素名.クラス名{～} | クラスセレクター | 指定したクラス名を持つ要素にスタイルを適用する | |
| 要素名 #ID名{～} | IDセレクター | 指定したID名を持つ要素にスタイルを適用する | |
| 要素名A 要素名B{～} | 子孫セレクター | 子孫要素にスタイルを適用する | |
| 要素名A > 要素名B {～} | 子セレクター | 子要素にスタイルを適用する | |
| 要素名A+要素名B{～} | 隣接セレクター | 直後の要素にスタイルを適用する | |
| 要素名A～要素名B{～} | 間接セレクター | 弟要素にスタイルを適用する | |
| 要素名[属性]{～} | 属性セレクター | 指定した属性を持つ要素にスタイルを適用する | |
| 要素名[属性=”属性値”]{～} | 属性セレクター | 指定した属性と属性値を持つ要素にスタイルを適用する | |
| 要素名[属性~=”属性値”]{～} | 属性セレクター | 指定した属性値を含む要素にスタイルを適用する | |
| 要素名[属性^=”属性値”]{～} | 属性セレクター | 指定した文字列で始まる属性値を持つ要素にスタイルを適用する | |
| 要素名[属性$=”属性値”]{～} | 属性セレクター | 指定した文字列で終わる属性値を持つ要素にスタイルを適用する | |
| 要素名[属性*=”属性値”]{～} | 属性セレクター | 指定した文字列を含む属性値を持つ要素にスタイルを適用する | |
| 要素名[属性|=”属性値”]{～} | 属性セレクター | 指定した文字列がハイフンの前にある属性値を持つ要素にスタイルを適用する | |
| 要素名:first-child{～} | 疑似クラス | 最初の子要素にスタイルを適用する | |
| 要素名:first-of-type{～} | 疑似クラス | 最初の子要素にスタイルを適用する（同一要素のみ） | |
| 要素名:last-child{～} | 疑似クラス | 最後の子要素にスタイルを適用する | |
| 要素名:last-of-type{～} | 疑似クラス | 最後の子要素にスタイルを適用する（同一要素のみ） | |
| 要素名:nth-child(n){～} | 疑似クラス | n番目の子要素にスタイルを適用する | |
| 要素名:nth-of-type(n) | 疑似クラス | n番目の子要素にスタイルを適用する（同一要素のみ） | |
| 要素名:nth-last-child(n){～} | 疑似クラス | 最後からn番目の子要素にスタイルを適用する | |
| 要素名:nth-last-of-type(n){～} | 疑似クラス | 最後からn番目の子要素にスタイルを適用する（同一要素のみ） | |
| 要素名:only-child{～} | 疑似クラス | 唯一の子要素にスタイルを適用する | |
| 要素名:only-of-type{～} | 疑似クラス | 唯一の子要素にスタイルを適用する（同一要素のみ） | |
| 要素名:empty{～} | 疑似クラス | 子要素を持たない要素にスタイルを適用する | |
| :root{～} | 疑似クラス | 文書のルート要素にスタイルを適用する | |
| 要素名:link{～} | 疑似クラス | 閲覧者が未訪問のリンクにスタイルを適用する | |
| 要素名:visited{～} | 疑似クラス | 閲覧者が訪問済みのリンクにスタイルを適用する | |
| 要素名:any-link{～} | 疑似クラス | 訪問の有無に関係なくリンクにスタイルを適用する | |
| 要素名:active{～} | 疑似クラス | アクティブになった要素にスタイルを適用する | |
| 要素名:hover{～} | 疑似クラス | マウスポインターが重ねられた要素にスタイルを適用する | |
| 要素名:focus{～} | 疑似クラス | フォーカスされている要素にスタイルを適用する | |
| 要素名:focus-within{～} | 疑似クラス | フォーカスを持った要素を含む要素にスタイルを適用する | |
| :host{～} | 疑似クラス | Shadow DOMの内部からホストにスタイルを適用する | |
| 要素名:target{～} | 疑似クラス | アンカーリンクの移動先となる要素にスタイルを適用する | |
| 要素名:lang(言語){～} | 疑似クラス | 特定の言語コードを指定した要素にスタイルを適用する | |
| 要素名:not(条件){～} | 疑似クラス | 指定した条件を除いた要素にスタイルを適用する | |
| 要素名:fullscreen{～} | 疑似クラス | 全画面モードでスタイルを適用する | |
|
@page :left{～} @page:right{} |
疑似クラス | 印刷文書の左右ページにスタイルを適用する | |
| @page :first{～} | 疑似クラス | 印刷文書の最初のページにスタイルを適用する | |
| 要素名:enabled{～} | 疑似クラス | 有効な要素にスタイルを適用する | |
| 要素名:disabled{～} | 疑似クラス | 無効な要素にスタイルを適用する | |
| 要素名:checked{～} | 疑似クラス | チェックされた要素にスタイルを適用する | |
| 要素名:default{～} | 疑似クラス | 既定値となっているフォーム関連要素にスタイルを適用する | |
|
要素名:in-range{～} 要素名:out-of-range{～} |
疑似クラス | 制限範囲内、または範囲外の値がある要素にスタイルを適用する | |
| 要素名:valid{～} | 疑似クラス | 内容の検証に成功したフォーム関連要素にスタイルを適用する | |
| 要素名:invalid{～} | 疑似クラス | 無効な入力内容が含まれたフォーム関連要素にスタイルを適用する | |
| 要素名:required{～} | 疑似クラス | 必須のフォーム関連要素にスタイルを適用する | |
| 要素名:optional{～} | 疑似クラス | 必須ではないフォーム関連要素にスタイルを適用する | |
| 要素名:read-write{～} | 疑似クラス | 編集可能な要素にスタイルを適用する | |
| 要素名:read-only{～} | 疑似クラス | 編集不可能な要素にスタイルを適用する | |
| 要素名:defined{～} | 疑似クラス | 定義されているすべての要素にスタイルを適用する | |
| 要素名:indeterminate{～} | 疑似クラス | 中間の状態にあるフォーム関連要素にスタイルを適用する | |
| 要素名:placeholder-shown{～} | 疑似クラス | プレースホルダーが表示されている要素にスタイルを適用する | |
| 要素名:placeholder{～} | 疑似クラス | プレースホルダーの文字列にスタイルを適用する | |
| 要素名::first-line{～} | 疑似要素 | 要素の１行目にのみスタイルを適用する | |
| 要素名::first-letter{～} | 疑似要素 | 要素の１文字目にのみスタイルを適用する | |
|
要素名::before{～} 要素名::after{～} |
疑似要素 | 要素の内容の前後に指定したコンテンツを挿入する | |
| 要素名::backdrop{～} | 疑似要素 | 全画面モード時の背後にあるボックスにスタイルを適用する | |
| 要素名::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-settings | OpenTypeフォントの機能の有効・無効を指定 | |
| @font-face | Webフォントの利用を指定する | |
| font-kerning | カーニング情報の使用方法を制御する | |
| text-transform | 英文字の大文字や小文字の表示方法を指定する | |
| text-align | 文章の揃え位置を指定する | |
| text-justify | 文章の均等割付の形式を指定する | |
| text-align-last | 文章の最終行の揃え位置を指定する | |
| text-overflow | ボックスに収まらない文章の表示方法を指定する | |
| vertical-align | 行内やセル内の縦方向の揃え位置を指定する | |
| text-indent | 文章の１行目の字下げ幅を指定する | |
| letter-spacing | 文字の間隔を指定する | |
| word-spacing | 単語の間隔を指定する | |
| tab-size | タブの表示幅を指定する | |
| white-space | スペース、タブ、改行の表示方法を指定する | |
| word-break | 文章の改行方法を指定する | |
| line-break | 改行の禁則処理を指定する |
フォント/テキスト
| プロパティ | 頻度 | 解説 |
|---|---|---|
| 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 | 文字の色を指定する |
色/背景/ボーダー
| プロパティ | 頻度 | 解説 |
|---|---|---|
| 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-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-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-top-left-radius | ボーダーの角丸を指定する | |
| border-top-right-radius | ||
| border-bottom-left-radius | ||
| border-bottom-right-radius | ||
| border-radius | ボーダーの角丸をまとめて指定する | |
| border-image-source | ボーダーに利用する画像を指定する | |
| border-image-width | ボーダー画像の幅を指定する | |
| border-image-slice | ボーダー画像の分割位置を指定する | |
| border-image-repeat | ボーダー画像の繰り返しを指定する | |
| border-image-outset | ボーダー画像の領域を広げるサイズを指定する | |
| 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-inline-start | ||
| padding-inline-end | ||
| padding-start |
書字方向に応じてボックスのパディングの幅を まとめて指定する |
|
| padding-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-start |
書字方向に応じてスナップされる位置の マージンの幅を指定する |
|
| scroll-margin-block-end | ||
| scroll-margin-inline-start | ||
| scroll-margin-inline-end | ||
| scroll-margin-block |
書字方向に応じてスナップされる位置の マージンの幅をまとめて指定する |
|
| scroll-margin-inline | ||
| scroll-padding-block-start |
書字方向に応じてスクロールコンテナーの パディングの幅を指定する |
|
| scroll-padding-block-end | ||
| scroll-padding-inline-start | ||
| scroll-padding-inline-end | ||
| scroll-padding-block |
書字方向に応じてスクロールコンテナーの パディングの幅をまとめて指定する |
|
| scroll-padding-inline |
段組み
| プロパティ | 頻度 | 解説 |
|---|---|---|
| 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 | 平面空間で要素を変形する | |
| transform | 3D空間で要素を変形する | |
| transform-origin | 変形させる要素の中心点を指定する | |
| perspective | 3D空間で変形する要素の奥行を表す | |
| transform-style | 3D空間で変形する要素の子要素の配置を指定する | |
| perspective-origin | 3D空間で変形する要素の視点の位置を指定する | |
| backface-visibility | 3D空間で変形する要素の背面の表示方法を指定する | |
| 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を対象にコンテンツを挿入する | |
| quotes | contentプロパティで挿入する記号を指定する | |
| 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-column | ||
| grid-area | アイテムの配置と大きさをまとめて指定する | |
| row-gap | 行の間隔を指定する | |
| column-gap | 列の間隔を指定する | |
| gap | 行と列の間隔をまとめて指定する |