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
|
左パディングを指定
|