acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

ads

ショートハンドプロパティの使い方

2008/10/22 加筆

CSSコーディングの効率を上げ、短いコードを書くためにはショートハンドプロパティを使用します。

ショートハンドに対応しているものはbackground、margin、padding、font、border、border-width、border-style、border-color、list-style、outlineです。
この中で主に使用するのはbackground、margin、padding、borderあたりでしょう。
fontは指定順に厳しく個別に書く方が指定ミスが減り、後から見直す際も簡単なのでショートハンドよりは個別に書きましょう。
border-widthなどもborder-widthのショートハンドで一括して書くよりも、border-top などそれぞれの部分のショートハンドで書く方が指定ミスが減り後から見直す際も簡単です。list-styleについても同様の理由です。
outlineは:focus疑似クラスにブラウザが対応する必要がありますしoutlineをつけるよりtextareaの背景色を変化させる方がすっきりしていて綺麗です。

まずbackgroundからです。
ページを制作する際は必ず指定するのでとても重要です。
この中で右方向位置と下方向位置はleftなどのキーワードを指定した場合のみ順不同ですが、単位指定する場合を見越して以下の順で記述する方がいいでしょう。

background: 色 画像 リピート指定 表示固定 右方向位置 下方向位置
値 #ffffff url(01.png) repeat
no-repeat
repeat-x
repeat-y		 scroll
fix		 px
em
%
left
center
right		 px
em
%
top
center
bottom
省略 可能 可能 可能 可能 可能
 可能
初期値 透明 画像無し repeat scroll 0px 0px

次にmarginとpaddingです。
指定が4つの場合は上から右回りになります。

margin:
padding:		 上 右 下 左
値 px
em
%		 px
em
%		 px
em
%		 px
em
%

指定が3つの場合は上、左右、下の順になります。左右がひとまとめになります。

margin:
padding:		 上 左右 下
値 px
em
%		 px
em
%		 px
em
%

指定が2つの場合は上下、左右の順になります。backgroundと順番が逆なので気をつけましょう。

margin:
padding:		 上下 左右
値 px
em
%		 px
em
%

指定が1つの場合はすべての辺が同じ値になります。

margin:
padding:		 上下左右
値 px
em
%

最後にborderです。
borderだけの場合は4辺すべて同じ値になります。
辺ごとに分ければそれぞれスタイルを変えることができます。

border:
border-tpo:
border-bottom:
borde-left:
border-right:		 線幅 線種 色
値 px
em		 solid
double
dashed
dotted
none
groove
ridge
inset
outset 		#ffffff
省略 可能 可能 可能
初期値 ブラウザ依存 solid ブラウザ依存
ads

お薦めの参考書

CSS、webデザイン学習書籍、参考書をアマゾンで購入する

Copyright (C) acky. All Rights Reserved.