第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つ目のサンプルコードと全く同じ表示結果になります。数値の並び順をみるとわかりますが、marginやpaddingをショートハンドで記述する場合は左から、-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の使い方を習得
-
スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。
- Dreamweaver CS4 CSSデザイン手法
ショートハンドの大きなメリットは、手書きをするときに楽という点なので、DreamweaverのCSSルール定義ダイアログを使っている場合はあまり 関係がなさそうですが、あとからコードを直接手直しする、他の人が編集する、などを考慮すると、ショートハンドで記述しておいたほうがよいでしょう。
そこで、ルール定義ダイアログが自動挿入するCSSがショートハンドになるように設定します。
画面上部の[編集]メニューから[環境設定]メニューをクリックして開きます。
左側のカテゴリから[CSS スタイルシート]をクリックして開き、[ショートハンドを使用]にチェック。
これで、ショートハンドで記述されるようになります。
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ