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