CSSショートハンド覚え書き

CSSのショートハンドは主に2つ覚えてれば良いと思います。
マージンとかパディングの一括指定と、ボーダーの色、太さ、スタイルの一括指定です。
他にもフォントに関してもショートハンド記法がありますがややこしいので使わなくてもいいような気がします。

padding:10px 0px 0px 5px;

border:#333 solid 1px;

この2つかな^^
他にもバックグラウンド関係の一括指定とか、フォントの一括もあるけど、
バックグラウンドは色と背景とかなんで微妙に使わないかな。
フォントもなんかややこしいし。

まず余白とかの1括指定は数字を4つ書いた場合は上から順に時計回りで、
上、右、下、左の順の数値です。
2つ書いた場合は上下と左右、3つ書いた場合は上と左右と下です。
それとボーダーに関しては見ての通りで、色、スタイル、太さを順番に書くだけです。

これらを上手く使ってCSSファイルをコンパクトにしましょう。
とはいってもむやみやたらに使って逆に判りにくくなることが無いように。

◆参考ページ
http://www.stylish-style.com/csstec/base/write.html

 

この記事を書いた人

管理人

東京でフロントエンドまわりをやっています。
趣味はゲーム、音楽、ポータブルオーディオです。