ショートハンド

2009 年 11 月 6 日 by     No Comments    Posted under: css, css-応用編

マージンとかパディング、ボーダー、バックグラウンドなどのCSSを指定する際に、
ひとつひとつのプロパティをバラバラに記述するのではなく、まとめて記述することをショートハンドと言います。

ショートハンドを使うことによって、ダラダラとした記述がスッキリとします。

それぞれの記述方法例です↓

基本的にmarginとpaddingは時計回りに記述します。
数値と数値の間は半角スペースを空ける。

1. margin関連プロパティを一括指定の場合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 上下左右、全て0px の場合*/
margin:0px;

/* 上下0px、左右10px */
margin:0px 10px;

/* 上0px、左右20px、下10px */
margin:0px 20px 10px;

/* 上0px、右10px、下20px、左30px */
margin:0px 10px 20px 30px;

/* 例えば上記の場合バラバラに書くと */
margin-top:0px;
margin-right:10px;
margin-bottom:20px;
margin-left:30px;

2. padding関連プロパティを一括指定の場合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 上下0px、左右10px */
padding:0px 10px;

/* 上0px、左右20px、下10px */
padding:0px 20px 10px;

/* 上0px、右10px、下20px、左30px */
padding:0px 10px 20px 30px;

/* 例えば上記の場合バラバラに書くと */
padding-top:0px;
padding-right:10px;
padding-bottom:20px;
padding-left:30px;

3. border関連プロパティを一括の場合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 線の幅が上1px、右2px、下3px、左4px */
border-width:1px 2px 3px 4px;

/* 線のスタイルが上solid、右solid、下solid、左dotted */
border-style: solid solid solid dotted;

/* 線の色が上red、右#ddd、下green、左#000000 */
border-color: red #ddd green #000000;

/* 線の上下左右が幅1px スタイルsolid 色red */
border:1px solid red;

/* 線の上が幅1px スタイルsolid 色red */
border-top:1px solid red;

/* 線の下が幅1px スタイルsolid 色red */
border-bottom:1px solid red;

/* 線の左が幅1px スタイルsolid 色red */
border-left:1px solid red;

/* 線の右が幅1px スタイルsolid 色red */
border-right:1px solid red;

/* 例えば上記の場合バラバラに書くと */
border-right-width:1px;
border-right-style:solid;
border-right-color:red;

4. backgroundを一括指定の場合

1
2
3
4
5
6
7
8
9
10
11
/* 通常の記述 */
background-image: url('sample.gif');
background-color: #fff;
background-attachment: fixed;
background: right bottom;
color: #000;

/* ショートハンドを使った場合 */
background: url('Yuchan.GIF') #fff fixed right bottom;
background-attachment: fixed;
color: #000;

その他、font関連についてもショートハンドを使えますが、
数も多いうえに、順番を間違えたり、必須なものもあるので割愛します。


posted by そば富泉


こちらも合わせてご覧ください - このページの内容と関連がある記事 -

  1. サーチフォームのカスタマイズ（ショップサーブ編）
  2. ショップ作成で使えそうなCSSのテクニック!? part 1
  3. CSS3 備忘録 選択した文字の背景色・文字色をカスタム
  4. 【 ショップサーブ 】お知らせの更新タイトル部分にRSSフィード登録画像を表示する
  5. WP-PageNavi を使わずにナビゲーション表示 備忘録
TrackBack URL for this entry

コメントをいただけると励みになります！よろしくお願いします。

13 + 14 =
Please leave these two fields as-is: