
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 | はみ出た要素の表示方法 |
スタイル・配色関連プロパティ
プロパティ | 用途 |
---|---|
background-color | 要素の背景色 |
background-image | 要素の背景画像 |
background-size | 要素の背景画像のサイズ |
background-repeat | 要素の背景画像の繰り返し |
background-position | 要素の背景画像の位置 |
border | 要素の囲み線 |
border-radius | 要素の角丸 |
box-shadow | 要素のドロップシャドウ |
opacity | 要素の透明度 |
display | 要素の表示形式 |
box-sizing | 要素サイズの算出方法 |
cursor | 要素にホバーした時のマウスカーソルの形状 |
フォント関連プロパティ
プロパティ | 用途 |
---|---|
color | フォントの配色 |
font-size | フォントのサイズ |
font-family | フォントの書体 |
text-align | 文章の配置 |
line-height | 行間の高さ |
word-wrap | 文章の折返し |
コメント