HTML&CSSコーディング
ショートハンドとロングハンド

border、padding、marginの各プロパティには、それぞれショートハンドとロングハンドという記法があります。

ここではロングハンドを使って一辺だけ枠線を設定する方法、余白を取る方法、 そして枠線の特定の角だけ丸める方法についてわかりやすく解説します。

複数の設定を一括するショートハンド

border、padding、marginのように、一括して複数の設定ができるプロパティのことをショートハンドプロパティと呼びます。

border、padding、marginはどれもひとつのプロパティで四辺を設定することができます（参考：枠線の種類、太さ、色を指定する、paddingとmarginの使い方）。

ショートハンドは記述量が少なく、管理しやすいですが、一辺だけを指定する場合、padding/marginならロングハンドを使うこもでき、borderではロングハンドが必須となります。

単一の設定をするロングハンド

ロングハンドとは、ひとつの設定のみできるプロパティのことです。枠線や余白であれば、一辺のみを指定するのに使います。

border、padding、marginのロングハンドプロパティは次の通りです。

top、bottom、right、leftは共通ですので、覚えやすいかと思います。

また、値はショートハンドと同じくpxなどで指定します。

特定の角を丸める

枠線の角を丸めることができるborder-radiusもショートハンドの記述です。値を設定すると、四角の角がまとめて処理されます。

特定の角のみを丸めたい場合は、次のようにロングハンドで記述します。