閉じる
カテゴリー
もっと見る:HTML&CSSコーディング

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

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

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

【PR】 配色サイト "Tricolors"

3色ベースの配色見本Tricolors、タップ/クリックで配色パターンを切り替え!

例:ルフィたんじろうウェディングクジャクシベリアンハスキーコスモス など

おすすめ配色見本サイト Tricolors(トリカラーズ) Color Palettes / Color Combinations

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

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

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

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

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

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

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

borderのロングハンド
  • 上:border-top
  • 下:border-bottom
  • 右:border-right
  • 左:border-left
paddingのロングハンド
  • 上:padding-top
  • 下:padding-bottom
  • 右:padding-right
  • 左:padding-left
marginのロングハンド
  • 上:margin-top
  • 下:margin-bottom
  • 右:margin-right
  • 左:margin-left

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

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

特定の角を丸める

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

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

border-radiusのロングハンド
  • 右上:border-top-right-radius
  • 左上:border-top-left-radius
  • 右下:border-bottom-right-radius
  • 左下:border-bottom-left-radius

HTML/CSS一覧