CSS

CSS ( Cascading Style Sheets ) は、HTMLタグに対してデザインや体裁を指定してサイトの見栄えや動きを美しくデザインするための記述シート。

主な目的

1. その Webページの目的を達成するために、閲覧者が読解しやすいデザインを実現する
2. その 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	グリッドセル間の行間隔を指定

• グリッドレイアウトは行と列の両方（２次元）を制御するレイアウトモデル
• グリッドレイアウトの基本的な概念 : MDN公式の説明

ダイナミック・アニメーション

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	アニメーションが再生中か停止中か、その状態を取得

カスタム・プロパティ

--*