前回のエントリー、前々回のエントリーに引き続き、CSSに関する基本的なことをば。

今回は以下の事について触れています。

  1. ショートハンドについて

ショートハンドについて

CSSでの値の指定は、プロパティによっては一括指定が出来ます。

例えば、、、

p {
 margin-top:0;
 margin-left:10px;
 margin-right:10px;
 margin-bottom:1em;
}

の場合は以下のように。

p {
 margin:0 10px 1em 10px;
}

順番は時計回りと覚えておきましょう。
上記の場合、4箇所指定しているので「上」「右」「下」「左」ですが、指定している数によって適用対象が変わります。

  • 値1つ：上下左右全て
  • 値2つ：「上下」と「左右」
  • 値3つ：「上」と「左右」と「下」
  • 値4つ：「上」と「右」と「下」と「左」

最初のサンプルを3箇所指定で記述すると、、、

p {
 margin:0 10px 1em;
}

1箇所と2箇所は、この場合出来ませんね。

作業効率アップの為にも、ショートハンドは必ず覚えましょう。
でも、闇雲に使えばいいって訳じゃないです。

例えば以下のようにスタイルを指定したとします。

p {
 margin:0 0 1em;
}
p.end {
 margin:0 0 5em;
}

この、class名endは、margin-bottomだけ5emと指定したいので、

p {
 margin:0 0 1em;
}
p.end {
 margin-bottom:5em;
}

と指定した方が良かったりします。
仮にp要素にmargin-right:1emが指定されてたとして、class名endの指定をmargin:0 0 1em;って指定したら、当然class名endで指定した値が優先されるので、p要素に指定していたmargin-right:1emという値はclass名endで指定している値、0で上書きされます。
ソレが意図していれば何の問題もありませんが、複雑になってくるとあれれ？って事になる可能性もあるってことです。

ショートハンドは覚えちゃえばどのプロパティにどうやって使えるかがわかるのですが、慣れないと分かりにくい部分も有るかと思います。

paddingとmarginはすぐにでも覚えれますが、border関連のプロパティなどは最初は分かりにくいかもしれません。

font関連のプロパティも省略できますが、font関連は記述の順番とかが決められていてチョット面倒なので、font関連のプロパティのみショートハンドは使わない方が良いと思います。