第18回 CSSはショートハンドで楽して書こうテーブルレイアウトを卒業しよう

CSSはショートハンドで楽して書こう

ショートハンドとは

ショートハンドとは、CSSのプロパティと値をまとめてカンタンに書くことができる記述方法をいいます。

たとえばこんな感じです。

#box1 {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 5px;
}

marginプロパティはこのように4方向個別に指定するものですが、ショートハンドで記述すればもっと短くすることができます。

#box1 {
/* -top,-right,-bottom,-leftの順で指定 */
margin: 5px 10px 8px 5px;
}

これで1つ目のサンプルコードと全く同じ表示結果になります。数値の並び順をみるとわかりますが、marginpaddingをショートハンドで記述する場合は左から、-top-right-bottom-leftの順で指定します。これは、上から時計回りで書くと覚えるとわかりやすいでしょう。

また、4方向の数値がバラバラな場合はすべて書く必要がありますが、全方向に同じ数値を指定する場合は、

#box1 {
margin: 0;
}

このように1つだけ指定すればOKです。(数値が"0"の場合は単位は関係ないので不要)

その他にも書き方がいくつかあります。

#box1 {
/* 全方向 */
margin: 10px;

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

/* 上、左右、下 */
margin: 5px 10px 8px;
}

paddingも同じ方法で指定可能です。

ショートハンドプロパティ一覧

他にもさまざまなショートハンドの書き方があります。

ショートハンドの書き方
プロパティ名 指定できる値 指定順
margin -top,-right,-bottom,-left 固定
padding -top,-right,-bottom,-left 固定
background -color,-image,-repeat,-position,-attachment 順不同
border -width,-style,-color 順不同
border-top
border-right
border-bottom
border-left
-width,-style,-color 順不同
border-width
border-stlye
border-color
-top,-right,-bottom,-left 固定
list-style -type,-image,-position 順不同

他にもfontもショートハンドで記述することができますが、プロパティ数が非常に多く、また記述順を間違えるときちんと表示されないため、あまりお勧めしません。バラバラに記述したほうが見た目にもわかりやすいです。

Dreamweaverのショートハンド設定

ショートハンドの大きなメリットは、手書きをするときに楽という点なので、DreamweaverのCSSルール定義ダイアログを使っている場合はあまり 関係がなさそうですが、あとからコードを直接手直しする、他の人が編集する、などを考慮すると、ショートハンドで記述しておいたほうがよいでしょう。

そこで、ルール定義ダイアログが自動挿入するCSSがショートハンドになるように設定します。

画面上部の[編集]メニューから[環境設定]メニューをクリックして開きます。

左側のカテゴリから[CSS スタイルシート]をクリックして開き、[ショートハンドを使用]にチェック。

環境設定

これで、ショートハンドで記述されるようになります。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
今すぐできるアクセシビリティ対策
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読