CSS辞典

css辞典
2022.05.19
この記事は約41分で読めます。
スポンサーリンク

数値+単位の指定方法

CSS辞典 単位付きの数字
CSSのプロパティで指定できるフォントサイズや幅、高さ、回転角度、時間などの指定できる単位について掲載
kcfran.com
2022.06.11

色の指定方法

CSS辞典 色（カラー）の指定方法
CSSのプロパティで色を指定する方法について掲載W3C CSSカラーモジュールレベル3W3C CSSカラーモジュールレベル4W3C CSSカラーモジュールレベル5基本色のキーワード要素の色を指定するキーワードは16色の基本色が使用できます。さらに147色のカラーネームが定義されています。※大文字／小文字は区別され...
kcfran.com
2022.06.15

コメントアウト

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

/*
Webサイトに共通のクラスを適用
*/
/* h1のタイトルクラスの色は青に指定 */
h1.title {
  color: blue;
}

h2.title {
  color: red;
  /*
  一時的にfont-sizeは無効
  font-size: 15px;
  */
}

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にスタイルを適用する
要素名::selection{～} 疑似要素

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

※一般的なブラウザで動作しない。
要素名::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 文字の色を指定する
color-adjust

非推奨。標準化の予定はなし実装に互換性なし

-webkit-print-color-adjust

色/背景/ボーダー

プロパティ 頻度 解説
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 行と列の間隔をまとめて指定する
ホーム
タイトルとURLをコピーしました