Webデザインの基礎 CSS3

スポンサーリンク
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 文章の折返し

コメント

タイトルとURLをコピーしました