From 376c645e2bb44c10317c3f3b8aca53f16da0975a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 8 Nov 2021 10:35:25 +0900 Subject: CSS Box Model のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/07 時点の英語版に同期 --- files/ja/web/css/padding/index.md | 162 ++++++++++++++++---------------------- 1 file changed, 66 insertions(+), 96 deletions(-) (limited to 'files/ja/web/css/padding') diff --git a/files/ja/web/css/padding/index.md b/files/ja/web/css/padding/index.md index 4f75859c83..ee73492834 100644 --- a/files/ja/web/css/padding/index.md +++ b/files/ja/web/css/padding/index.md @@ -3,40 +3,36 @@ title: padding slug: Web/CSS/padding tags: - CSS - - CSS Padding - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS パディング + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.padding translation_of: Web/CSS/padding --- -
{{CSSRef}}
+{{CSSRef}} -

padding は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

+**`padding`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素の全四辺の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)を一度に設定します。 -
{{EmbedInteractiveExample("pages/css/padding.html")}}
+{{EmbedInteractiveExample("pages/css/padding.html")}} - +要素のパディング領域とは、コンテンツと境界との間の領域のことです。 -

要素のパディング領域とは、コンテンツと境界線の間の領域のことです。

+> **Note:** パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の*周り*に追加の領域を作成します。 -
-

注: パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の周りに追加の領域を作成します。

-
+## 構成要素のプロパティ -

構成要素のプロパティ

+このプロパティは以下の CSS プロパティの一括指定です。 -

このプロパティは以下の CSS プロパティの一括指定です。

+- {{cssxref("padding-bottom")}} +- {{cssxref("padding-left")}} +- {{cssxref("padding-right")}}} +- {{cssxref("padding-top")}} - +## 構文 -

構文

- -
/* 四辺すべてに適用 */
+```css
+/* 四辺すべてに適用 */
 padding: 1em;
 
 /* 上下 | 左右 */
@@ -51,48 +47,47 @@ padding: 5px 1em 0 1em;
 /* グローバル値 */
 padding: inherit;
 padding: initial;
+padding: revert;
 padding: unset;
-
+``` -

padding プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。それぞれの値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。負の数は無効です。

+`padding` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。それぞれの値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。負の数は無効です。 - +- 値が **1 つ**指定された場合、**全四辺**に同じパディングが適用される。 +- 値が **2 つ**指定された場合、1 つ目のパディングは**上下**、2 つ目は**左右**の辺に適用される。 +- 値が **3 つ**指定された場合、1 つ目のパディングは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 +- 値が **4 つ**指定された場合、パディングはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。 -

値

+### 値 -
-
{{cssxref("<length>")}}
-
固定値によるパディングの寸法です。
-
{{cssxref("<percentage>")}}
-
コンテナーブロックの幅に対するパーセント値によるパディングの寸法です。
-
+- {{cssxref("<length>")}} + - : パディングの寸法を固定値で表したものです。 +- {{cssxref("<percentage>")}} + - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

パディングをピクセル数で設定

+

パディングをピクセル数で設定

-

HTML

+#### HTML -
<h4>This element has moderate padding.</h4>
-<h3>The padding is huge in this element!</h3>
-
+```html +

This element has moderate padding.

+

The padding is huge in this element!

+``` -

CSS

+#### CSS -
h4 {
+```css
+h4 {
   background-color: lime;
   padding: 20px 50px;
 }
@@ -101,15 +96,16 @@ h3 {
   background-color: cyan;
   padding: 110px 50px 50px 110px;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}}

+{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}} -

パディングをピクセル数とパーセント値で設定

+### パディングをピクセル数とパーセント値で設定 -
padding: 5%;                /* 全辺: 5% のパディング */
+```css
+padding: 5%;                /* 全辺: 5% のパディング */
 
 padding: 10px;              /* 全辺: 10px のパディング */
 
@@ -123,45 +119,19 @@ padding: 10px 3% 20px;      /* 上:     10px のパディング */
 padding: 1em 3px 30px 5px;  /* 上:     1em のパディング  */
                             /* 右:     3px のパディング  */
                             /* 下:     30px のパディング */
-                            /* 右:     5px のパディング  */
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box', '#padding-shorthand', 'padding')}}{{Spec2('CSS3 Box')}}変更なし。
{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}{{Spec2('CSS2.1')}}変更なし。
{{Specname('CSS1', '#padding', 'padding')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.padding")}}

- -

関連情報

- - + /* 右: 5px のパディング */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) +- {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} +- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}} -- cgit v1.2.3-54-g00ecf