CSS ( Cascading Style Sheets ) は、HTMLタグに対してデザインや体裁を指定してサイトの見栄えや動きを美しくデザインするための記述シート。
主な目的
- その Webページの目的を達成するために、閲覧者が読解しやすいデザインを実現する
- その Webページの目的を達成するために、閲覧者に美しい印象を与えるデザインを実現する
CSS を利用して人間学的に良いデザインをすると、その Webページは多くの人にとって素晴らしい印象や説得力を与えるものとなる。
最近ではスマホやタブレットの普及に伴って、Webページが表示される画面サイズごとにデザインを適応するなど、フレキシブルなデザインが当たり前になっている。
@-規則
@charset
|
スタイルシートで利用される文字セットを指定。@charset "utf-8";
|
@import
|
外部スタイルシートを指定
|
@namespace
|
全てのCSSコンテンツに XML接頭辞を指定
|
@media
|
指定メディアに合致した時に指定のスタイルを適応。スタイルは入れ子によって表記
|
@viewport
|
Webページを表示するためのビューポートを構成
|
ユーザ・インターフェース
cursor
|
マウスカーソルのデザインを指定
|
resize
|
textarea などにおけるユーザのリサイズ機能を制御。none, both, horizontal, vertical
|
nav-index
|
タブキーによるフォーカス移動の順序を指定
|
HTML要素へのデザイン
自分がしようとしているデザインは HTML要素に対するデザインであることを意識すると良い。
表示・配置
display
|
HTML要素のタイプを選択。inline（初期値）, block, flex, grid, table, none など
|
position
|
HTML要素の配置方法を指定。static（通常位置）, relative（通常位置からのオフセット。元々あった場所はキープされる）, absolute（親ボックスからのオフセット。元々あった場所は詰められる）, fixed（初期のビューポート、ウィンドウなどからのオフセット）
|
top
|
上からの距離をピクセル指定
|
right
|
右からの距離をピクセル指定
|
bottom
|
下からの距離をピクセル指定
|
left
|
左からの距離をピクセル指定
|
float
|
後ろの要素が左あるいは右に回り込んで配置される
|
clear
|
回り込みを解除
|
clip-path
|
ボックスを自由な形で切り抜く。inset, circle, ellipse, polygon
|
overflow
|
ボックスからはみ出た内容の表示方法を指定。visible, hidden, scroll
|
z-index
|
ボックスの重なり順序を指定
|
visibility
|
ボックスの表示・非表示を指定。無くしてしまいたい場合は display の none を指定
|
box-decoration-break
|
ボックスがページをまたぐ時の表示方法を指定。slice, clone
|
box-shadow
|
ボックスに影をつける
|
transform
|
要素の回転、拡大縮小、傾斜、移動（2D・3D変形）を指定
|
transform-origin
|
要素の transform の原点を指定
|
perspective
|
3D要素の奥行きを指定
|
perspective-origin
|
閲覧者が3D要素を見ている位置を指定
|
幅・高さ
width
|
ボックスの幅を指定
|
height
|
ボックスの高さを指定
|
max-width
|
幅の最大値を指定
|
max-height
|
高さの最大値を指定
|
min-width
|
幅の最小値を指定
|
min-heigth
|
高さの最小値を指定
|
box-sizing
|
幅と高さにボーダーの太さを含めるかを指定。border-box, content-box
|
余白・ボーダー
margin
|
ボックスの外側マージンをまとめて指定。最近のブラウザでコンテンツを中央に揃えたい場合は display: flex; justify-content: center; を利用。ただし、IE8-9 は未対応なので従来通り margin: 0 auto; を利用。上と下の margin はお互いにマージする。
|
margin-top
|
上マージンを指定
|
margin-right
|
右マージンを指定
|
margin-bottom
|
下マージンを指定
|
margin-left
|
左マージンを指定
|
border
|
ボックスの境界線（枠線）のスタイル・太さ・色をまとめて指定
|
border-style
|
ボーダーのスタイルを指定。solid, dotted, dashed, double, ridge, groove, inset, outset
|
border-width
|
ボーダーの太さを指定
|
border-color
|
ボーダーの色を指定
|
border-top
|
上ボーダーのスタイル・太さ・色をまとめて指定
|
border-right
|
右ボーダーのスタイル・太さ・色をまとめて指定
|
border-bottom
|
下ボーダーのスタイル・太さ・色をまとめて指定
|
border-left
|
左ボーダーのスタイル・太さ・色をまとめて指定
|
border-radius
|
ボーダーの角を丸める
|
border-image
|
ボーダーに利用する画像を細かく指定
|
padding
|
ボックスの内側パディングをまとめて指定
|
padding-top
|
上パディングを指定
|
padding-right
|
右パディングを指定
|
padding-bottom
|
下パディングを指定
|
padding-left
|
左パディングを指定
|
アウトライン
outline
|
ボックスのアウトライン（輪郭線）のスタイル・太さ・色をまとめて指定。ボーダー（枠線）とは違う
|
outline-style
|
アウトラインのスタイルを指定
|
outline-width
|
アウトラインの太さを指定
|
outline-color
|
アウトラインの色を指定
|
outline-offset
|
ボーダーから離して表示する場合にその間隔を指定
|
背景
background
|
ボックスの背景の色・画像・リピート・表示位置などの情報をまとめて指定
|
background-color
|
背景の色を指定
|
background-image
|
背景の画像を指定。image-set を指定すれば異なるデバイス向けに複数の画像ファイルを用意できる
|
background-repeat
|
背景画像のリピートを指定
|
background-attachment
|
背景画像の固定表示・スクロール移動を指定
|
background-position
|
背景画像の表示位置を指定
|
background-position-x
|
背景画像の横位置を指定
|
background-position-y
|
背景画像の縦位置を指定
|
background-clip
|
背景の範囲を３段階で指定。border-box, padding-box, content-box
|
background-origin
|
背景画像の配置位置を３段階で指定。border-box, padding-box, content-box
|
background-size
|
背景画像のサイズを指定。指定内容によっては自然なサイズになったり伸縮したりリピートされたりする
|
mix-blend-mode
|
背景色と要素のブレンド方法を指定
|
background-blend-mode
|
背景色と背景画像のブレンド方法を指定
|
isolation
|
要素をスタッキングコンテキストから分離
|
色・透明度
color
|
文字色を指定
|
rgba()
|
RGBAカラーモデルで文字色を指定
|
opacity
|
要素の透明度を指定
|
linear-gradient()
|
線形グラデーションを指定
|
radial-gradient()
|
円形グラデーションを指定
|
repeating-linear-gradient()
|
繰り返しの線形グラデーションを指定
|
repeating-radial-gradient()
|
繰り返しの円形グラデーションを指定
|
フォント・テキスト
| font
|
フォントのスタイル・太さ・サイズ・行間・書体をまとめて指定
|
font-style
|
フォントのスタイルを指定
|
font-variant
|
フォントをスモールキャップにする
|
font-weight
|
フォントの太さを指定
|
font-size
|
フォントのサイズを指定。em指定推奨。body で 指定しない限り 1em=16px
|
line-height
|
フォントの行間を指定
|
font-family
|
フォントの書体を指定
|
font-stretch
|
フォントを縦長・横長にする。対応しているブラウザのみ
|
font-size-adjust
|
フォントのサイズを調整
|
letter-spacing
|
文字の間隔を指定
|
word-spacing
|
単語の間隔を指定
|
vertical-align
|
ボックス内での縦方向のテキスト行揃えを指定。top, text-top, baseline, middle, sub, bottom
|
text-align
|
ボックス内での横方向のテキスト行揃え・均等割付を指定。left, center, right, justify
|
text-orientation
|
テキストの向きを指定。縦書きにする時に便利
|
text-decoration
|
テキストの下線・上線・打ち消し線・波線など色と一緒に指定。text-decoration: underline wavy green;
|
text-underline-position
|
text-decorationプロパティの underline指定における下線の位置を指定
|
text-emphasis
|
テキスト上部に強調のためのマーク（圏点）をつける。open, dot, cercle, double-cercle, triangle, sesame
|
text-overflow
|
テキストが表示領域をはみ出ていることをユーザに伝える方法を指定。clip, ellipsis（...省略記号）
|
text-shadow
|
テキストに影を付ける
|
text-indent
|
一行目のインデント幅を指定
|
text-transform
|
英文字の大文字表記・小文字表記を指定
|
text-justify
|
均等割付を指定
|
white-space
|
文章中のスペース・タブ・改行の表示を指定
|
word-break
|
英文字が改行する位置を制御
|
overflow-wrap
|
英文字の単語の途中での改行を制御
|
direction
|
文字表記の方向（左向きか右向きか）を指定。HTML の dir属性を利用した方が良い
|
unicode-bidi
|
Unicode の文字の向きを上書きする
|
writing-mode
|
テキストやボックスのレイアウトやフロー方向を指定
|
リスト
list-style
|
リストマーカーのスタイル・画像・位置を指定
|
list-style-type
|
リストマーカーのスタイルを指定
|
list-style-image
|
リストマーカーの画像を指定
|
list-style-position
|
リストマーカーの位置を指定
|
テーブル
border-collapse
|
表の境界線の表示を指定
|
border-spacing
|
border-collapse で separate が指定されているときに境界線の間隔を指定
|
empty-cells
|
セルが空の時にボーダーを表示するかどうかを指定
|
カラム
columns
|
カラムの width と count をまとめて指定
|
column-width
|
カラムの幅を指定
|
column-count
|
カラムの数を指定
|
column-gap
|
カラムの間隔を指定
|
column-rule
|
カラムの区切り線のスタイル・太さ・色をまとめて指定
|
column-span
|
特定の要素がまたがるカラム数を指定
|
column-fill
|
カラム同士の高さを揃えるかどうかを指定
|
画像
object-fit
|
画像などをボックスにどのようにはめ込むかを指定。picture要素に対して指定して画像位置を調整したりできる
|
object-position
|
ボックス内においてはめ込む画像などの位置を指定
|
image-orientation
|
向きがおかしい画像を正しい向きに補正
|
image-rendering
|
画像を拡大・縮小する時の利用アルゴリズムを指定
|
filter
|
画像に Photoshop のようなフィルター効果をつける。blur（ぼかし）, contrast（コントラスト）, grayscale（モノクロ）, hue-rotate（色相反転）, brightness（輝度）, saturate（彩度）, drop-shadow（ドロップシャドウ） など
|
コンテンツの挿入
content
|
コンテンツを挿入・計算
|
counter-increment
|
要素のカウンターの値を進める。１位２位３位など list-style では実現できない表記に利用
|
conter-reset
|
要素のカウンターの値をリセット
|
quotes
|
引用符記号をセット
|
calc
|
値を指定する際に計算を行うことができる。width: calc(100% - 80px);
|
フレキシブルボックスレイアウト
display に flex か inline-flex を指定して HTML要素を flexコンテナ化する。
flexアイテムの配置・折り返し・順序
flex-flow
|
flexアイテムの direction と wrap をまとめて指定
|
flex-direction
|
flexアイテムの並び方の主軸を指定。row, row-reverse, column, column-reverse
|
flex-wrap
|
flexアイテム群の横幅がコンテナの横幅より大きくなる場合に折り返すかどうかを指定。wrap, nowrap
|
order
|
コンテナ内の flexアイテムの表示順序を指定
|
flexアイテムの幅
flex
|
flex-grow, flex-shrink, flex-basis の順にまとめて指定（推奨）。通常は flex: 1; のような表記で十分
|
flex-grow
|
flexアイテムが伸びる割合を指定
|
flex-shrink
|
flexアイテムが縮む割合を指定
|
flex-basis
|
flexアイテムの基本幅を指定
|
flexアイテムの揃え位置
justify-congtent
|
主軸（row なら横軸）における flexアイテムの位置揃えを指定。flex-start, center, flex-end, space-around, space-between, space-evenly
|
aling-items
|
交差軸（row なら縦軸）における flexアイテムの位置揃えを指定。flex-start, center, flex-end
|
aling-content
|
交差軸上に余分なスペースがある場合、flexアイテムの位置揃えを指定。flex-start, center, flex-end, space-around, space-between, stratch
|
justify-self
|
主軸における特定の flexアイテムの位置揃えを個別に指定。つまり、justify-content の設定を上書きする
|
aling-self
|
交差軸における特定の flexアイテムの位置揃えを個別に指定。つまり、align-items の設定を上書きする
|
- フレキシブルボックスレイアウトは行か列のいずれか（１次元）しか制御しないレイアウトモデル
- フレックスボックスの基本概念 : MDN公式の説明
グリッドレイアウト
display に grid か inline-grid を指定して HTML要素を gridコンテナ化する。
grid-area
|
grid-template-areas で利用するエリア名を指定（エリアベース）
|
grid-template-areas
|
grid-area で指定したエリア名を元に直感的にアイテムを配置（エリアベース）。MDN公式の説明
|
grid-template-columns
|
グリッド列それぞれの幅を指定。300px などのピクセル指定や、1fr(fraction) などの比率指定、またその両方を使った指定ができる。記述が冗長になるときは repeat(6, 1rf) といった記述もできる
|
grid-template-rows
|
グリッド行それぞれの幅を指定
|
grid-auto-columns
|
暗黙的に作成されたグリッド列の幅を指定。minmax() も利用できる
|
grid-auto-rows
|
暗黙的に作成されたグリッド行の幅を指定。minmax() も利用できる
|
grid-column-start
|
グリッド列の縦の格子線を利用してアイテムの幅を決める。開始位置を指定。自動で一番左側の線から順に数字が振られている（ラインベース）
|
grid-column-end
|
グリッド列の縦の格子線を利用してアイテムの幅を決める。終了位置を指定（ラインベース）
|
grid-row-start
|
グリッド行の横の格子線を利用してアイテムの幅を決める。開始位置を指定。自動で一番上の線から順に数字が振られている（ラインベース）
|
grid-row-end
|
グリッド行の横の格子線を利用してアイテムの幅を決める。終了位置を指定（ラインベース）
|
grid-gap
|
グリッドセル間の間隔をまとめて指定
|
grid-column-gap
|
グリッドセル間の列間隔を指定
|
grid-row-gap
|
グリッドセル間の行間隔を指定
|
ダイナミック・アニメーション
transition
|
２つの状態間の変化の流れをまとめて指定。それぞれのトリガーは擬似クラスか JavaScript で指定。マウスホバー変化など、簡単なエフェクトにも使える
|
transition-property
|
transition効果を適応する CSSプロパティを指定
|
transition-duration
|
transition効果の所要時間を指定
|
transition-timing-function
|
transition効果の変化のタイミング・進行割合を指定
|
transition-delay
|
transition効果が始まるタイミングを指定
|
animation
|
アニメーション情報をまとめて指定
|
animation-name
|
アニメーション効果の名前を指定。@keyframes に同じ名前を指定することでブラウザにすべてを任せるのではなく、アニメーションの流れを明示的に制御できるようになる
|
animation-duration
|
アニメーション効果の所要時間を指定
|
animation-timing-function
|
アニメーション効果の変化のタイミング・進行割合を指定
|
animation-delay
|
アニメーション効果が始まるタイミングを指定
|
animation-iteration-count
|
アニメーション効果を繰り返す回数を指定
|
animation-direction
|
アニメーション再生の向きを指定
|
animation-fill-mode
|
アニメーション再生の前後の状態を指定
|
animation-play-state
|
アニメーションが再生中か停止中か、その状態を取得
|
カスタム・プロパティ
--*
|
--接頭辞が付けられたプロパティは自由に変数名をつけてスタイルを適用できる。--fevorate-color: #488cff;
|
セレクタ
基本セレクタ
HTMLタグセレクタ
|
HTMLタグで指定。<header>, <nav>, , <a>,
|
IDセレクタ
|
HTMLタグのID属性で指定。id="identified" → #identified
|
クラスセレクタ
|
HTMLタグのclass属性で指定。class="classy" → .classy
|
ユニバーサルセレクタ
|
ユニバーサルセレクタ（*）で指定。*.warning, *#main-content, .floating + *
|
属性セレクタ
|
属性セレクタで指定。a[title], a[href*="example"], a[href^="#"], a[href$="org"], div[lang~="en-us"]
|
結合子
子結合
|
直接の子要素を指定。ul.my-things > li, div > span
|
子孫結合
|
子孫要素を指定。ul.my-things li, li li
|
隣接兄弟結合
|
２つの兄弟要素の内、兄要素の直後の弟要素を指定。img + p, li:first-of-type + li
|
一般兄弟結合
|
複数の兄弟要素の内、兄要素の後に続く複数の弟要素を全て指定。p ~ span（ の後に続く３つの が指定できる）
|
擬似クラス
:root
|
<html>要素と同じ
|
:link
|
まだ訪問されていないリンク
|
:any-link
|
訪問・未訪問を問わずリンク全て
|
:visited
|
すでに訪問されたリンク
|
:hover
|
カーソルが重なった時
|
:active
|
リンクがクリックされた時
|
:focus
|
Tabキーなどによってフォーカスされている要素
|
:checked
|
ラジオボタン、チェックボックスなどがチェック状態にある時
|
:default
|
ラジオボタン、チェックボックスなどがデフォルト状態にある時
|
:required
|
フォーム内などで required属性が付いている要素
|
:optional
|
フォーム内などで required属性が付いていない要素
|
:enabled
|
フォーム内などで有効な要素
|
:disabled
|
フォーム内などで無効な要素
|
:indeterminate
|
フォーム内などで中間状態にある要素
|
:read-only
|
フォーム内などでユーザが編集できないあらゆる要素
|
:read-write
|
フォーム内などでユーザが編集できるあらゆる要素
|
:valid
|
入力されたメールアドレスやURLなどが適正な状態
|
:invalid
|
入力されたメールアドレスやURLなどが不適正な状態
|
:in-range
|
入力フォーム内などで指定範囲内にある状態
|
:out-of-range
|
入力フォーム内などで指定範囲外にある状態
|
:only-child
|
兄弟要素がいない要素
|
:only-of-type
|
同じタイプの兄弟要素がいない要素
|
:first-child
|
兄弟要素グループの中の最初の要素
|
:last-child
|
兄弟要素グループの中の最後の要素
|
:nth-child()
|
兄弟要素グループの中の１つまたは複数の要素。結構柔軟に指定できる。MDN公式の詳しい説明
|
:nth-last-child()
|
nth-child と本質的に同じ。後ろから数えることだけが違う
|
:first-of-type
|
兄弟要素グループの中における特定のタイプで最初の要素
|
:last-of-type
|
兄弟要素グループの中における特定のタイプで最後の要素
|
:nth-of-type
|
兄弟要素グループの中の１つまたは複数をタイプによって指定
|
:nth-last-of-type
|
nth-of-type と本質的に同じ。後ろから数えることだけが違う
|
:target
|
アンカーによるジャンプ先をハイライトで目立たせたり、JavaScript を使わないでポップアップを表示させたりできる
|
:lang()
|
指定された言語を持つ要素
|
:empty
|
子を持たない要素
|
:not()
|
()内で指定されたセレクタに一致しない要素
|
:defined
|
定義されている全ての要素
|
:first
|
印刷文書の最初のページ
|
擬似要素
::before
|
指定要素の前にコンテンツ（インライン擬似要素）を追加
|
::after
|
指定要素の後にコンテンツ（インライン擬似要素）を追加
|
::first-letter
|
最初の行の最初の文字
|
::first-line
|
最初の行
|
::placeholder
|
プレースホルダー
|
::selection
|
ユーザがカーソルで選択したエリア
|
備忘録