CSS

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

主な目的

CSS を利用して人間学的に良いデザインをすると、その Webページは多くの人にとって素晴らしい印象や説得力を与えるものとなる。

最近ではスマホやタブレットの普及に伴って、Webページが表示される画面サイズごとにデザインを適応するなど、フレキシブルなデザインが当たり前になっている。

`@charset`	スタイルシートで利用される文字セットを指定。@charset "utf-8";
`@import`	外部スタイルシートを指定
`@namespace`	全てのCSSコンテンツに XML接頭辞を指定
`@media`	指定メディアに合致した時に指定のスタイルを適応。スタイルは入れ子によって表記
`@viewport`	Webページを表示するためのビューポートを構成

`cursor`	マウスカーソルのデザインを指定
`resize`	textarea などにおけるユーザのリサイズ機能を制御。none, both, horizontal, vertical
`nav-index`	タブキーによるフォーカス移動の順序を指定

自分がしようとしているデザインは 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