CSS

構文

コメントアウト

/* コメント */

/*
  複数行コメント
*/

値の単位

絶対長

Unit	名前	換算
cm	センチメートル	1cm = 96px/2.54
mm	ミリメートル	1mm = 1/10cm
Q	1/4ミリメートル	1Q = 1/40cm
in	インチ	1in = 2.54cm = 96px
pc	パイカ	1pc = 1inの1/6
pt	ポイント	1pt = 1inの1/72
px	ピクセル	1px = 1inの1/96

相対長

Unit	関係先
em	親要素のフォントサイズ
ex	その要素のフォントの文字"x"の高さ
ch	その要素のフォントの文字"0"の幅
rem	ルート要素のフォントサイズ
lh	その要素のline-hightプロパティと同じ
vw	ビューポート幅の1%
vh	ビューポート高さの1%
vmin	ビューポート幅と高さの小さいほうの1%
vmax	ビューポート幅と高さの小さいほうの1%

アニメーション

div {
  animation: My_Animation 1s linear 0s infinite normal;
}
@keyframes My_Animation {
  0% { background: red; }
  100% { background: blue; }
}

前半は以下と同じ

div {
  animation-name: My_Animation;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

animation-timing-functionで有効な値はease、ease-in、ease-out、ease-in-out、linear、step-start、step-endなど

animation-iteration-countで有効な値は数値もしくはinfiniteなど

animation-directionで有効な値はnormal、reverse、alternate、alternate-reverseなど

共通の値

初期値

CSSの全てのプロパティはinitialで初期値を指定できる。

unset

親要素から継承できる場合は継承値、できない場合は初期値になる。

CSS値関数

数学関数

関数	概要
calc()	基本的な演算
min()	最小値
max()	最大値
clamp(MIN, VAL, MAX)
round()	四捨五入
mod(a, b)	あまり
rem(a, b)	あまり
sin()	正弦
cos()	余弦
tan()	正接
asin()	逆正弦
acos()	逆余弦
atan()	逆正接
atan2(x, y)	逆正接
pow(x, y)	xのy乗
sqrt()	2乗根
hypot(...x)	平方和の根
log()	対数
exp()	ネイピア数の指数関数
abs()	絶対値
sign()	符号関数

フィルター関数

関数	概要
blur(radius)	ぼかし
brightness(amount)	明るさ
contrast(amount)	コントラスト
drop-shadow(length, length, length, color)	ドロップシャドウ
grayscale(amount)	グレースケール
hue-rotate(angle)	色相
invert(amount)	色反転
opacity(amount)	半透明
saturate(amount)	彩度
sepia(amount)	セピア

その他

関数	概要
rgb(R, G, B, A?)	RGB色指定
hsl(H[deg], S[%], L[%], A[%])	HSL色指定
linear-gradient()	線形グラデーション
radial-gradient()	放射グラデーション
conic-gradient()	扇形グラデーション
repeating-linear-gradient()	繰り返す線形グラデーション
repeating-radial-gradient()	繰り返す放射グラデーション
repeating-conic-gradient()	繰り返す扇形グラデーション
linear()	線形補間イージング
cubic-bezier()	3次ベジェ曲線イージング
steps()	ステップイージング

プロパティ

要素の大きさ

height: 20px;
width: 20px;

min-height: 0.5em; max-height: 0.5em;
min-width: 0.5em; max-width: 0.5em;

要素の枠

一部の場合はborder-topのようにする。 top、bottom、right、leftから選択
border-radiusで角を丸く
通常はsolid、点線はdotted、破線はdashed、二重線はdouble

border: solid 3px #000000;

内側の余白

padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;

このようにすると、上下が10px、左右が20pxになる

padding: 10px 20px;

これだと上、右、下、左

padding: 10px 20px 30px 40px;

外側の余白

margin: 10px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;

このようにすると、上下が10px、左右が20pxになる

margin: 10px 20px;

これだと上、右、下、左

margin: 10px 20px 30px 40px;

accent-color

一部のinput要素などのアクセントカラーを変更する。

accent-color: #64ec86;

backdrop-filter

要素の背後にグラフィック効果を適用する。

backdrop-filter: blur(10px);
backdrop-filter: invert(80%);
backdrop-filter: sepia(90%);

background-color

background-color: #64ec86;

background-image

背景画像を指定する。

background-image: url("../../media/examples/lizard.png");

border-collapse

表のセルの間に隙間を作るかどうか。 collapse(作らない)かseparate(作る)で指定。

border-collapse: collapse;

box-shadow

/* 無くす場合 */
box-shadow: none;

/* オフセット(X) | オフセット(Y) | 色 */
box-shadow: 60px -16px teal;

/* オフセット(X) | オフセット(Y) | ブラー半径 | 色 */
box-shadow: 10px 5px 5px black;

/* オフセット(X) | オフセット(Y) | ブラー半径 | 拡散半径 | 色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | オフセット(X) | オフセット(Y) | 色 */
box-shadow: inset 5em 1em gold;

/* 複数の影はカンマで区切る */
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

box-sizing

枠を外側ではなく内側に膨らませる場合：

box-sizing: border-box;

caret-color

input要素内などのキャレット(テキスト入力カーソル)の色を変更する。

caret-color: red;

color

文字の色を指定する。

color: #64ec86;

cursor

マウスカーソルの種類。画像を指定することもでき、その場合は画像指定の後にカーソルの種類も指定する必要がある。

cursor: help;
cursor: url(hand.cur), pointer;

カーソルの種類

値	概要
default	デフォルト
none	非表示
context-menu	右クリックメニューが利用できる
help	ヘルプ
pointer	ポインター
progress	ビジー状態だが操作できる
wait	ビジー状態で操作できない
cell	セル
crosshair	ビットマップの選択
text	テキスト
vertical-text	縦書きテキスト
alias	エイリアスやショートカットが作成される
copy	コピーされる
move	移動される
no-drop	ドロップできない
not-allowed	操作が禁止されている
grab	つかめる
grabbing	つかんでいる
all-scroll	スクロール可能
col-resize	水平方向にスクロール可能
row-resize	垂直方向にスクロール可能
n-resize	辺の移動(上)
e-resize	辺の移動(右)
s-resize	辺の移動(下)
w-resize	辺の移動(左)
ne-resize	辺の移動(右上)
nw-resize	辺の移動(左上)
se-resize	辺の移動(右下)
sw-resize	辺の移動(左下)
ew-resize	辺の移動(左右)
ns-resize	辺の移動(上下)
nesw-resize	辺の移動(右上左下)
nwse-resize	辺の移動(左上右下)
zoom-in	拡大
zoom-out	縮小

direction

文字の向きをltr(左から右)またはrtl(右から左)で指定する。

direction: ltr;

display

block：divのようなブロック要素
inline：spanのようなインライン要素
inline-block：外側にはインラインのようなふるまいをしておきながら、本体はブロックのようにふるまう
flex：中身のブロック要素を均等に分割する
grid：中身のブロック要素をグリッドのように分割する

要素を非表示にする例：

display: none;

filter

背後の要素を色反転する例：

filter: invert();

flex

flexボックス内での横幅の比を指定する。

flex: 1;

font-family

フォントの指定。

font-family: '';

.ttfファイルを読み込んで新しいフォントを定義する場合は以下の行を追加する。

@font-face {
  font-family: 'MyFont';
  src: url(〇〇.ttf);
}

font-size

フォントの大きさ。

font-size: medium;

指定できる値

指定できる値：[length]、[percentage]、xx-small、x-small、small、medium、large、x-large、xx-large、xxx-large、larger、smaller

font-weight

フォントの太さ。
指定できる値：[number]、normal、bold、lighter、bolder

font-weight: bold;

height

height: 20px;

letter-spacing

文字と文字の間隔。

letter-spacing: 0.5em;

line-height

文章の行間。
指定できる値：normal、[number]、[length]、[percentage]

line-height: normal;

overflow

visibleで見えてはみ出す、hiddenで見えずにはみ出す、scrollでスクロール、autoでおさまらないときだけスクロール

overflow: visible;
overflow-x: visible;
overflow-y: visible;

list-style

箇条書きの点の部分。

list-style: square;

指定できる値の種類

値	概要
none	非表示
disc	黒丸
circle	白丸
square	黒四角
decimal	数値
cjk-decimal	漢数字
decimal-leading-zero	ゼロ埋め数値
lower-roman	小文字のローマ数字
upper-roman	大文字のローマ数字
lower-greek	小文字の古代ギリシャ文字
lower-latin	小文字のASCII文字
upper-latin	大文字のASCII文字
cjk-earthly-branch	十二支
cjk-heavenly-stem	十干
hiragana	ひらがな
hiragana-iroha	いろは
japanese-formal	日本の公的漢数字
japanese-informal	日本の日常的な数値
katakana	カタカナ
katakana-iroha	カタカナいろは

opacity

要素の不透明度。

opacity: 1;

outline

要素をフォーカスしたとき(input要素にTabでフォーカスするなど)の枠。

outline: solid 1px red;

overflow-wrap

単語中でも無理矢理改行する：

overflow-wrap: break-word;

overscroll-behavior

スクロールが端まで達した後のスクロールで、親要素のスクロールをしないようにする：

overscroll-behavior: none;

pointer-events

クリックやスクロールが貫通するようにする：

pointer-events: none;

resize

ブロック要素をリサイズ可能にする。値はboth、horizontal、vertical、none。

resize: horizontal;

text-align

テキストを何揃えにするか(水平).

指定できる値：start、end、left、right、center、justify、match-parent

text-align: left;

text-decoration

テキスト装飾を無効化する例(リンク要素など)：

text-decoration: none;

text-decoration-color

下線や取り消し線など、テキストデコレーションの色。

text-decoration-color: #64ec86;

text-decoration-line

指定できる値：none、underline、overline、line-through

text-decoration-line: underline;

text-decoration-style

指定できる値：solid、double、dotted、dashed、wavy

text-decoration-style: solid;

text-decoration-thickness

指定できる値：auto、from-font、[length]、[percentage]

text-decoration-thickness: auto;

text-emphasis

テキストを強調するためにふる点(圏点)。

text-emphasis: '、';

text-indent

text-indent: 1em;

text-overflow

あふれたテキストの表示。文字列を指定することもできる。あふれたテキストを「...」にする例：

text-overflow: ellipsis;

text-shadow

テキストに影を付ける。指定方法は「左右、上下、半径、色」。

/* オフセット(X) | オフセット(Y) | ブラー半径 | 色 */
text-shadow: 1px 1px 2px black;

/* 色 | オフセット(X) | オフセット(Y) | ブラー半径 */
text-shadow: #fc0 1px 0 10px;

/* オフセット(X) | オフセット(Y) | 色 */
text-shadow: 5px 5px #558abb;

/* 色 | オフセット(X) | オフセット(Y) */
text-shadow: white 2px 5px;

/* オフセット(X) | オフセット(Y) */
text-shadow: 5px 10px;

transition

要素が変化するときに、アニメーションを伴うようになる。

transition: 1s;

user-select

テキストの選択を禁止する：

user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;

vertical-align

縦向きの何揃えか。
top、middle、bottom、baselineから選択。

vertical-align: top;

white-space

主な値はnormal、nowrap、pre。

white-space: pre;

width

width: 20px;

z-index

要素が重なったとき、この値が大きいほど手前に表示される。

z-index: 100;

zoom

zoom: 150%;

セレクター

全称セレクター

* {
  color: green;
}

要素型セレクター

/* すべての<a>要素。 */
a {
  color: red;
}

クラスセレクター

/* class="spacious"であるすべての要素 */
.spacious {
  margin: 2em;
}

/* class="spacious"であるすべての<li>要素 */
li.spacious {
  margin: 2em;
}

/* "spacious"および"elegant"の両方をクラスリストに含む<li>要素すべて */
/* 例えば、class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

IDセレクター

/* id="demo" のついた要素 */
#demo {
  border: red 2px solid;
}

属性セレクター

/* title属性を持つ<a>要素 */
a[title] {
  color: purple;
}

/* hrefが"https://example.org"と一致する<a>要素 */
a[href="https://example.org"]
{
  color: green;
}

/* hrefに"example"を含む<a>要素 */
a[href*="example"] {
  font-size: 2em;
}

/* hrefが"org"で終わる<a>要素 */
a[href$=".org"] {
  font-style: italic;
}

/* <a>要素のclass属性に"logo"という語が含まれているもの */
a[class~="logo"] {
  padding: 2px;
}

/* URLのどこかに"cAsE"があるリンクに一致
大文字小文字の区別しない */
a[href*="cAsE" i] {
  color: pink;
}

/* "https"で始まり".org"で終わるリンク */
a[href^="https"][href$=".org"] {
  color: green;
}

セレクターリスト

span, div {
  border: red 2px solid;
}

子孫結合子

/* "my-things" リストの子孫のリスト項目 */
ul.my-things li {
  margin: 2em;
}

子結合子

/* "my-things"クラスを持つリストの子要素であるリスト項目 */
ul.my-things > li {
  margin: 2em;
}

後続兄弟結合子

img ~ p {
  color: red;
}

次兄弟結合子

/* 画像の直後に来る段落 */
img + p {
  font-weight: bold;
}

擬似クラス

/* ユーザーのポインターが乗っているすべてのボタン */
button:hover {
  color: blue;
}

擬似クラス	概要
:fullscreen	現在全画面モードの要素
:picture-in-picture	現在ピクチャインピクチャモードの要素
:autofill	<input>をブラウザーが自動補完した場合
:enabled	ユーザーインターフェイス要素が有効な状態である
:disabled	ユーザーインターフェイス要素が無効な状態である
:read-only	ユーザーが変更できない要素
:read-write	ユーザーが編集することができる要素
:placeholder-shown	プレイスホルダーテキスト, 例えばplaceholder属性のものが表示されている<input>および<textarea>要素
:default	一連の要素のうち, 1つ以上の既定のUI要素
:indeterminate	UI要素が不定状態になっている場合
:blank	ユーザーが入力する要素が空である場合. 空文字列が入っているか, その他の空入力であること.
:valid	内容が妥当である要素
:invalid	無効な内容を持つ要素
:in-range	スライダーコントロールなどの範囲制限のある要素で, 選択した値が許容範囲内にある場合
:out-of-range	スライダーコントロールなどの範囲制限のある要素で, 選択した値が許容範囲外の場合
:required	フォーム要素が必須項目である場合
:optional	フォーム要素が省略可能である場合
:user-invalid	不正確な値が入力されている要素
:dir()	文書の言語によって決定される書字方向に基づいて要素を選択します.
:lang()	内容物の言語に基づいて要素を選択します.
:any-link	要素が:linkまたは:visitedのいずれかに一致する場合
:link	まだ訪問していないリンク
:visited	訪問したことのあるリンク
:local-link	絶対URLが対象URLと同じリンク, 例えば同じページへのアンカーリンクである場合
:target	文書の URL の対象である要素
:target-within	文書のURLの対象である要素だけでなく, 文書URLの対象である子孫を持つ要素にも一致します.
:scope	セレクターを照合するための参照点となる要素
:playing	その要素が再生可能なメディア要素であり, 再生中である
:paused	その要素が再生可能なメディア要素であり, 一時停止中である
:current	表示されている要素またはその祖先
:past	完全に:current要素の前に発生する要素
:future	完全に:current要素の後に発生する要素
:root	文書のルートである要素
:empty	ホワイトスペース文字以外に子がない要素
:nth-child	An+Bの表記を用いて, 兄弟要素のリストから要素を選択します.
:nth-last-child	An+Bの表記を用いて, 兄弟要素のリストから, リストの末尾から逆方向に数えて要素を選択します.
:first-child	兄弟のうちの最初の要素
:last-child	兄弟のうちの最後の要素
:only-child	要素に兄弟がいない場合
:nth-of-type	An+Bの表記を用いて, 兄弟要素のリストから, 特定の型に一致する要素を選択します.
:nth-last-of-type	An+Bの表記を用いて, 兄弟要素のリストから, リストの末尾から逆方向に数えて特定の型に一致する要素を選択します.
:first-of-type	兄弟のうちの最初の特定の型に一致する要素
:last-of-type	兄弟のうちの最後の特定の型に一致する要素
:only-of-type	指定された型セレクターで兄弟要素がない要素
:hover	ユーザーがポインティングデバイスでアイテムを指した場合
:active	アイテムがクリックされるなど, ユーザーによってアクティブになっているとき
:focus	要素にフォーカスがあるとき
:focus-visible	要素にフォーカスがあり, ユーザーエージェントがその要素のフォーカスを可視化する必要があると判断した場合
:focus-within	:focusが適用される要素に加え, :focusが適用される子孫要素を持つ要素にも一致します.
:is()	指定されたリストのセレクターのどれかに一致する要素
:not()	引数で表されない要素
:where()	指定されたリストのセレクターのいずれかに一致する要素
:has()	付属の要素に対してアンカーを付けたときに, 相対セレクターのどれかが一致する場合

擬似要素

/* すべての<p>要素の最初の行です. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

擬似要素	概要
::after	選択した要素の最後の子要素
::backdrop	何らかの要素が全画面モードで表示される直下に直接表示されるviewportの寸法のボックス
::before	選択した要素の最初の子要素
::cue	選択された要素内のWebVTTキュー
::first-letter	ブロックレベル要素の最初の行の最初の文字
::first-line	ブロックレベル要素の最初の行
::file-selector-button	the button of an <input> of type="file".
::marker	リスト項目の箇条書き記号ボックス(ふつうは黒丸や番号)
::part()	一致するpart属性を持つシャドウツリー内の要素
::placeholder	<inputまたは<textarea>要素のプレイスホルダー文字列
::selection	ユーザーが(テキストをマウスでクリックやドラッグすることで)選択した文書の一部
::slotted()	HTML テンプレート内にあるスロットに配置された任意の要素

CSS

構文