CSSのpaddingプロパティ（省略形・ショートハンド）の使い方
CSSのpaddingプロパティは、padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）の4つの値をまとめて指定できる省略形（ショートハンド）プロパティです。1行で記述できるため、コードがすっきりし、可読性も向上します。
省略形の基本的な書き方
まずは基本となる例を見てみましょう。
padding: 10px 5px 7px 10px;
この場合、各辺のパディングは次のように適用されます。
上（top）のパディング：10px 右（right）のパディング：5px 下（bottom）のパディング：7px 左（left）のパディング：10px
つまり、値は「上 → 右 → 下 → 左」の順に時計回りで指定します。この規則を覚えておくと、複雑なレイアウトでも迷わず記述できます。
コード例1：4つの値を指定する場合
以下の例では、外側のdiv要素に対して「5% 10% 20% 5%」というように、上・右・下・左それぞれ異なるパディングをパーセントで指定しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 300px;
padding: 5% 10% 20% 5%;
background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png");
text-align: center;
font-weight: bold;
font-size: 1.2em;
box-sizing: border-box;
}
div > div {
border-radius: 80px;
padding: 2em 2em;
box-shadow: 0 0 4px 0.8px black;
}
</style>
</head>
<body>
<div>Learn TensorFlow
<div>TensorFlow is an open source machine learning framework for all developers.</div>
</div>
</body>
</html>
出力結果
このコードを実行すると、次のような表示になります。
コード例2：2つの値を指定する場合
値を2つだけ指定した場合は、「上下」と「左右」がペアになります。以下の例では「padding: 5% 1%;」とすることで、上下に5%、左右に1%のパディングを一括で設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 100px;
padding: 5% 1%;
background-color: papayawhip;
border-radius: 5%;
box-sizing: border-box;
}
div > div {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 2em;
box-shadow: 0 0 9px 1px black;
}
span {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div></div>
<span><i>button</i></span>
</div>
</body>
</html>
出力結果
このコードを実行すると、次のような表示になります。
まとめ
paddingの省略形では、指定する値の数によって適用範囲が変わります。
- 値が4つ： 上・右・下・左（時計回り）
- 値が3つ： 上・左右・下
- 値が2つ： 上下・左右
- 値が1つ： 全4辺共通
これらのルールを理解しておけば、marginなど他のボックス関連プロパティにも同じ考え方が応用でき、CSSをより効率的に書けるようになります。
-
CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説
CSS outlineショートハンドプロパティとは？ outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。 構文 CSS outlineショートハンドプロパティの構文は次のとおりです。 Selector { outline: /*値*/ } 指定できる値 outline-width：線の太さ（thin / medium / thic
-
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da