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	要素をスタッキングコンテキストから分離