Webデザインの基礎 CSS3

CSS

2019.01.03 2019.01.02

CSS3 Logo by W3C

CSSとはカスケーディング・スタイル・シートの略。CSSを簡単に説明すると、HTMLで構造付したものに対して、装飾（デザイン）を施していくといった感覚です。サイズや色、フォントなど様々なプロパティが用意されており、それらを組み合わせてwebページのデザインを構成していきます。

CSS3が登場してから、角丸や影、アニメーションなどデザインの幅が大きく広がり、Webデザインに関してたいていのことはCSSのみでも実現できるようになりました。

今回は膨大にあるCSSプロパティの中から、良く使うものをまとめてみました。参考になれば幸いです。

セレクタ

CSSにはidとclassの2種類の属性が存在し、この属性をHTMLに付加して特定の要素に個別の名前を指定していきます。idとclassの使い分けは以下の通りです。

属性	用途	HTML	CSS
id	同じid名は1ページ中に1度しか使えない	<div id=”id”></div>	#id{ }
class	同じclass名は1ページ中に何度も使える	<div class=”class”></div>	.class{ }

CSSのプロパティはたくさんありますが、よく使うプロパティはだんだん決まってきます。プロパティの記載の順番はルール付しておいたほうが、後から修正する際にわかりやすいのですが、自分自身CSSのプロパティを書いていて、毎回順番がめちゃくちゃになってしまうので、カテゴリ別に整理してみました。

プロパティ	用途
width	要素の幅
min-width	要素の最大幅
height	要素の高さ
min-height	要素の最大の高さ
margin	要素の外側の空白
padding	要素の内側の空白
float	要素を浮動させる（ブロック要素の横方向への広がりを消す）
position	要素の配置基準を指定する
z-index	要素の重なり順
overflow	はみ出た要素の表示方法