[CSSの基本] プロパティの値を並べて記述すると効率的！

プロパティの値について

border（線）、 margin（外側の余白）、 padding（内側の余白）、color（色）など。スタイルシートの記述で定義されている書式です。

各プロパティが持つ、設定値のことです。borderなら15px ; colorならred;など。

CSSはセレクタとプロパティ、値を組み合わせて記述していきます。セレクタとは、以下のサンプルで言うと「ｐ」の部分ですね。

プロパティの値を並べて記述できる場合は、そうした方がCSSがとてもスッキリします。以下、サンプルです。↓

HTML ↓

<p>  
 サンプルです 
</p>

CSS ↓

P{
  width: 300px;
  border: solid 1px gray;
  margin:50px auto;
  text-align: center;
  font-size: 50px;
}

以下のような表示になります。↓

文章の周りを灰色の1pxの線で囲みました。

border: solid 1px gray; の部分ですが、もちろんこのような記述でも構いません。↓

P{
  border-style: solid ;
  border-width: 1px;
  border-color: gray;
  }

でも、並記できる値はそうした方が圧倒的に見やすいし、記述も楽ですよね。CSSも短くなります。是非まとめましょう。

次に、marginの値を見ていきましょう。

margin:50px auto;となっています。

margin(外側の余白）を上下に50px, 左右はauto; （自動）です。

このように記述しても結果は同じです。↓

P{
margin-top:50px;
margin-right:auto;
margin-bottom:50px;
margin-left:auto;
}

marginやpaddingの値の記述は、上、右、下、左の順番です。↓

P{
margin: 5px 10px 15px 20px;
}

上下、左右が同じ値の場合、上下が先、左右が後の記述になります。↓

p{
margin:5px 10px;
}

ちなみに、左右のmarginをauto;にすることで要素を中央寄せにできます。

text-align:center;じゃないのでご注意を。その場合は文章が中央に寄るだけです。

プロパティの値の並記方法について、ご説明しました。

CSSを効率的に記述するのに役立つちょっとした知識です。