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/margin-bottom/index.md | 148 +++++------ files/ja/web/css/margin-bottom/margin-bottom.svg | 1 + files/ja/web/css/margin-left/index.md | 270 ++++++++++----------- files/ja/web/css/margin-right/index.md | 261 ++++++++++---------- files/ja/web/css/margin-top/index.md | 111 ++++----- files/ja/web/css/margin-trim/index.md | 42 ++-- files/ja/web/css/margin/index.md | 195 +++++++-------- files/ja/web/css/padding-bottom/index.md | 119 ++++----- files/ja/web/css/padding-bottom/padding-bottom.svg | 1 + files/ja/web/css/padding-left/index.md | 117 ++++----- files/ja/web/css/padding-right/index.md | 117 ++++----- files/ja/web/css/padding-top/index.md | 119 ++++----- files/ja/web/css/padding-top/padding-top.svg | 1 + files/ja/web/css/padding/index.md | 162 +++++-------- 14 files changed, 721 insertions(+), 943 deletions(-) create mode 100644 files/ja/web/css/margin-bottom/margin-bottom.svg create mode 100644 files/ja/web/css/padding-bottom/padding-bottom.svg create mode 100644 files/ja/web/css/padding-top/padding-top.svg diff --git a/files/ja/web/css/margin-bottom/index.md b/files/ja/web/css/margin-bottom/index.md index f035539d6b..ec8b38ea0d 100644 --- a/files/ja/web/css/margin-bottom/index.md +++ b/files/ja/web/css/margin-bottom/index.md @@ -3,26 +3,26 @@ title: margin-bottom slug: Web/CSS/margin-bottom tags: - CSS - - CSS Property - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.margin-bottom translation_of: Web/CSS/margin-bottom --- -
{{CSSRef}}
+{{CSSRef}} -

margin-bottom は CSS のプロパティで、要素の下側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+**`margin-bottom`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の下側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 -
{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
+{{EmbedInteractiveExample("pages/css/margin-bottom.html")}} - +![要素ボックスにおける CSS の margin-bottom プロパティの効果](margin-bottom.svg) -

要素ボックスにおける CSS の margin-bottom プロパティの効果

+このプロパティは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} のような非[置換](/ja/docs/Web/CSS/Replaced_element)のインライン要素には効果がありません。 -

このプロパティは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} のような非置換のインライン要素には効果がありません。

+## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 margin-bottom: 10px;  /* 絶対的な寸法 */
 margin-bottom: 1em;   /* 文字の寸法からの相対 */
 margin-bottom: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -33,47 +33,49 @@ margin-bottom: auto;
 /* グローバル値 */
 margin-bottom: inherit;
 margin-bottom: initial;
+margin-bottom: revert;
 margin-bottom: unset;
-
+``` -

margin-bottom プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

+`margin-bottom` プロパティは `auto` キーワード、または `` や `` で指定されます。正の数、ゼロ、負の数が指定できます。 -

値

+### 値 -
-
{{cssxref("<length>")}}
-
固定値によるマージンの寸法です。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセントによるマージンの寸法です。
-
auto
-
ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
-
+- {{cssxref("<length>")}} + - : マージンの寸法を固定値で表したものです。 +- {{cssxref("<percentage>")}} + - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。 +- `auto` + - : ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

正および負の数の下側のマージンの設定

+

正および負の数の下側のマージンの設定

-

HTML

+#### HTML -
<div class="container">
-<div class="box0">Box 0</div>
-<div class="box1">Box 1</div>
-<div class="box2">Box one's negative margin pulls me up</div>
-</div>
+```html +
+
Box 0
+
Box 1
+
Box one's negative margin pulls me up
+
+``` -

CSS

+#### CSS -

div に margin-bottom と height を設定する CSS です。

+div に margin-bottom と height を設定する CSS です。 -
.box0 {
+```css
+.box0 {
     margin-bottom:1em;
     height:3em;
 }
@@ -86,12 +88,12 @@ margin-bottom: unset;
     border-width:1px 0;
     margin-bottom:2em;
 }
+```
 
-
- -

包含要素と div の定義の一部です。これによって margin の効果がより明確に見えます。

+包含要素と div の定義の一部です。これによってマージンの効果がより明確に見えます。 -
.container {
+```css
+.container {
     background-color:orange;
     width:320px;
     border:1px solid black;
@@ -99,48 +101,22 @@ margin-bottom: unset;
 div {
     width:320px;
     background-color:gold;
-}
- -

結果

- -

{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}目立った変更なし。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}CSS1 と同様、ただしインライン要素での効果は削除。
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.margin-bottom")}}

- -

関連情報

- -
    -
  • {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
    • -
  • 対応する論理プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • -
+} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定 +- 対応する論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}} diff --git a/files/ja/web/css/margin-bottom/margin-bottom.svg b/files/ja/web/css/margin-bottom/margin-bottom.svg new file mode 100644 index 0000000000..102a3dc064 --- /dev/null +++ b/files/ja/web/css/margin-bottom/margin-bottom.svg @@ -0,0 +1 @@ +マージン領域境界コンテンツ領域パディング領域この領域の高さが margin-bottom 値で定義されるmargin-bottom \ No newline at end of file diff --git a/files/ja/web/css/margin-left/index.md b/files/ja/web/css/margin-left/index.md index 029fd44321..85513a95da 100644 --- a/files/ja/web/css/margin-left/index.md +++ b/files/ja/web/css/margin-left/index.md @@ -3,27 +3,27 @@ title: margin-left slug: Web/CSS/margin-left tags: - CSS - - CSS Property + - CSS プロパティ - Layout - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.margin-left translation_of: Web/CSS/margin-left --- -
{{CSSRef}}
+{{CSSRef}} -

margin-left は CSS のプロパティで、要素の左側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+**`margin-left`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 -
{{EmbedInteractiveExample("pages/css/margin-left.html")}}
+{{EmbedInteractiveExample("pages/css/margin-left.html")}} - +二つの隣り合うボックスの垂直マージンは融合することがあります。これは[_マージンの相殺_](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)と呼ばれています。 -

二つの隣り合うボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。

+まれに幅の制約がきつすぎると (つまり、 `width`, `margin-left`, `border`, `padding`, コンテンツ領域, `margin-right` がすべて定義されていた場合)、 `margin-left` は無視され、 `auto` が設定されていたときと同じ計算値になります。 -

まれに幅の制約がきつすぎると (つまり、 width, margin-left, border, padding, コンテンツ領域, margin-right がすべて定義されていた場合)、 margin-left は無視され、 auto が設定されていたときと同じ計算値になります。

+## 構文 -

構文

- -
/* <length> 値 */
+```
+/*  値 */
 margin-left: 10px;  /* 絶対的な寸法 */
 margin-left: 1em;   /* 文字の寸法からの相対 */
 margin-left: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -34,136 +34,132 @@ margin-left: auto;
 /* グローバル値 */
 margin-left: inherit;
 margin-left: initial;
+margin-left: revert;
 margin-left: unset;
-
- -

margin-left プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

- -

値

- -
-
{{cssxref("<length>")}}
-
固定値によるマージンの寸法です。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセントによるマージンの寸法です。
-
auto
-
左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 margin-left と margin-right の両方が auto の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{cssxref("display")}} の値{{cssxref("float")}} の値{{cssxref("position")}} の値auto の計算値コメント
inline, inline-block, inline-table任意static または relative0インラインレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption任意static または relative0。ただし margin-left と margin-right が共に auto に設定されていた場合は、親要素の中で中央揃えする値に設定されます。ブロックレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft または rightstatic または relative0ブロックレイアウトモード (フロート要素)
table-* すべて、ただし table-caption を除く任意任意0内部の table-* 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください
flex、 inline-flex, table-* 以外のすべて任意fixed または absolute0。ただし margin-left と margin-right が共に auto に設定されていた場合は、ボーダー領域を width の中で中央揃えする値に設定されます（固定されている場合）。絶対位置指定配置モード
flex, inline-flex任意任意0。ただし、水平に正の余白がある場合は、 auto を指定したすべてのマージンに均等に割り振られます。フレックスボックス配置モード
-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

+``` + +`margin-left` プロパティは `auto` キーワード、または `` や `` で指定されます。正の数、ゼロ、負の数が指定できます。 + +### 値 + +- {{cssxref("<length>")}} + - : マージンの寸法を固定値で表したものです。 +- {{cssxref("<percentage>")}} + - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。 +- `auto` + + - : 左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{cssxref("display")}} の値{{cssxref("float")}} の値{{cssxref("position")}} の値auto の計算値コメント
+ inline, inline-block, + inline-table + 任意static または relative0インラインレイアウトモード
+ block, inline, inline-block, + block, table, inline-table, + list-item, table-caption + 任意static または relative + 0。ただし margin-left と margin-right が共に auto であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。 + ブロックレイアウトモード
+ block, inline, inline-block, + block, table, inline-table, + list-item, table-caption + left または rightstatic または relative0ブロックレイアウトモード (浮動要素)
+ すべての table-*、ただし table-caption を除く + 任意任意0 + 内部の table-* 要素にはマージンがない。代わりに {{ cssxref("border-spacing") }} を使用のこと +
+ 任意、ただし flex, inline-flex, table-* を除く + 任意 + fixed または absolute + + 0。ただし margin-left と margin-right が共に auto 出逢った場合を除く。この場合、利用可能な width の中で境界領域が中央揃えされる値が設定される (fixed の場合)。 + 絶対位置指定レイアウトモード
flex, inline-flex任意任意 + 0。ただし、水平方向に正の余白がある場合を除く。この場合、 auto を指定したすべてのマージンに均等に分配される。 + フレックスボックスレイアウトモード
+ +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

ピクセル数とパーセント値を使用した左マージンの設定

+### ピクセル数とパーセント値を使用した左マージンの設定 -
.content { margin-left: 5%; }
+```css
+.content { margin-left: 5%; }
 .sidebox { margin-left: 10px; }
 .logo    { margin-left: -5px; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box', '#propdef-margin-left', 'margin-left')}}{{Spec2('CSS3 Box')}}CSS 2.1 から目立った変更なし。
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}フレックス項目での margin-left の挙動を定義。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}CSS1 と同様、ただしインライン要素での効果は削除。
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.margin-left")}}

- -

関連情報

- -
    -
  • {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} と {{cssxref("margin")}} 一括指定
    • -
  • 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • -
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} と {{cssxref("margin")}} 一括指定 +- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}} diff --git a/files/ja/web/css/margin-right/index.md b/files/ja/web/css/margin-right/index.md index 4eaaef539f..6158b4d4bf 100644 --- a/files/ja/web/css/margin-right/index.md +++ b/files/ja/web/css/margin-right/index.md @@ -3,24 +3,24 @@ title: margin-right slug: Web/CSS/margin-right tags: - CSS - - CSS Property - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.margin-right translation_of: Web/CSS/margin-right --- -
{{CSSRef}}
+{{CSSRef}} -

margin-right は CSS のプロパティで、要素の右側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+**`margin-right`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の右側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 -
{{EmbedInteractiveExample("pages/css/margin-right.html")}}
+{{EmbedInteractiveExample("pages/css/margin-right.html")}} - +隣り合う二つのボックスの垂直マージンは融合することがあります。これは[_マージンの相殺_](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)と呼ばれています。 -

二つの隣り合うボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。

+## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 margin-right: 20px;  /* 絶対的な寸法 */
 margin-right: 1em;   /* 文字の寸法からの相対 */
 margin-right: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -31,136 +31,133 @@ margin-right: auto;
 /* グローバル値 */
 margin-right: inherit;
 margin-right: initial;
+margin-right: revert;
 margin-right: unset;
-
- -

margin-right プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

- -

値

- -
-
{{cssxref("<length>")}}
-
固定値によるマージンの寸法です。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセントによるマージンの寸法です。
-
auto
-
右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 margin-left と margin-right の両方が auto の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{cssxref("display")}} の値{{cssxref("float")}} の値{{cssxref("position")}} の値auto の計算値コメント
inline, inline-block, inline-table任意static または relative0インラインレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption任意static または relative0。ただし margin-left と margin-right が共に auto に設定されていた場合は、親要素の中で中央揃えする値に設定されます。ブロックレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft または rightstatic または relative0ブロックレイアウトモード (フロート要素)
table-* すべて、ただし table-caption を除く任意任意0内部の table-* 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください
flex、 inline-flex, table-* 以外のすべて任意fixed または absolute0。ただし margin-left と margin-right が共に auto に設定されていた場合は、ボーダー領域を width の中で中央揃えする値に設定されます（固定されている場合）。絶対位置指定配置モード
flex, inline-flex任意任意0。ただし、水平に正の余白がある場合は、 auto を指定したすべてのマージンに均等に割り振られます。フレックスボックス配置モード
+``` + +`margin-right` プロパティは `auto` キーワード、または `` や `` で指定されます。正の数、ゼロ、負の数が指定できます。 + +### 値 + +- {{cssxref("<length>")}} + - : マージンの寸法を固定値で表したものです。 +- {{cssxref("<percentage>")}} + - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。 +- `auto` + + - : 右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{cssxref("display")}} の値{{cssxref("float")}} の値{{cssxref("position")}} の値auto の計算値コメント
+ inline, inline-block, + inline-table + 任意static または relative0インラインレイアウトモード
+ block, inline, inline-block, + block, table, inline-table, + list-item, table-caption + 任意static または relative + 0。ただし margin-left と margin-right が共に auto であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。 + ブロックレイアウトモード
+ block, inline, inline-block, + block, table, inline-table, + list-item, table-caption + left または rightstatic または relative0ブロックレイアウトモード (浮動要素)
+ すべての table-*、ただし table-caption を除く + 任意任意0 + 内部の table-* 要素にはマージンがない。代わりに {{ cssxref("border-spacing") }} を使用のこと +
+ 任意、ただし flex, inline-flex, table-* を除く + 任意 + fixed または absolute + + 0。ただし margin-left と margin-right が共に auto 出逢った場合を除く。この場合、利用可能な width の中で境界領域が中央揃えされる値が設定される (fixed の場合)。 + 絶対位置指定レイアウトモード
flex, inline-flex任意任意 + 0。ただし、水平方向に正の余白がある場合を除く。この場合、 auto を指定したすべてのマージンに均等に分配される。 + フレックスボックスレイアウトモード
-
-

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

ピクセル数とパーセント値を使用した右マージンの設定

+### ピクセル数とパーセント値を使用した右マージンの設定 -
.content { margin-right: 5%; }
+```css
+.content { margin-right: 5%; }
 .sidebox { margin-right: 10px; }
 .logo    { margin-right: -5px; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}{{Spec2('CSS3 Box')}}目立った変更なし。
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{Spec2('CSS3 Flexbox')}}フレックス項目での margin-right の挙動を定義。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}{{Spec2('CSS2.1')}}CSS1 と同様、ただしインライン要素での効果は削除。
{{SpecName('CSS1', '#margin-right', 'margin-right')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.margin-right")}}

- -

関連情報

- -
    -
  • {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
    • -
  • 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • -
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定 +- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}} diff --git a/files/ja/web/css/margin-top/index.md b/files/ja/web/css/margin-top/index.md index fa48d0b5eb..334fd8d539 100644 --- a/files/ja/web/css/margin-top/index.md +++ b/files/ja/web/css/margin-top/index.md @@ -3,24 +3,24 @@ title: margin-top slug: Web/CSS/margin-top tags: - CSS - - CSS Property - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.margin-top translation_of: Web/CSS/margin-top --- -
{{CSSRef}}
+{{CSSRef}} -

margin-top は CSS のプロパティで、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

+**`margin-top`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の上側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 -
{{EmbedInteractiveExample("pages/css/margin-top.html")}}
+{{EmbedInteractiveExample("pages/css/margin-top.html")}} - +このプロパティは、[置換要素](/ja/docs/Web/CSS/Replaced_element)ではないインライン要素、例えば {{HTMLElement("span")}} や {{HTMLElement("code")}} には効果がありません。 -

このプロパティは、置換要ではないインライン要素、例えば {{HTMLElement("span")}} や {{HTMLElement("code")}} には効果がありません。

+## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 margin-top: 10px;  /* 絶対的な寸法 */
 margin-top: 1em;   /* 文字の寸法からの相対 */
 margin-top: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -31,76 +31,49 @@ margin-top: auto;
 /* グローバル値 */
 margin-top: inherit;
 margin-top: initial;
+margin-top: revert;
 margin-top: unset;
-
+``` -

margin-top プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

+`margin-top` プロパティは `auto` キーワード、または `` や `` で指定されます。正の数、ゼロ、負の数が指定できます。 -

値

+### 値 -
-
{{cssxref("<length>")}}
-
固定値によるマージンの寸法です。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセントによるマージンの寸法です。
-
auto
-
ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
-
+- {{cssxref("<length>")}} + - : マージンの寸法を固定値で表したものです。 +- {{cssxref("<percentage>")}} + - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。 +- `auto` + - : ブラウザーが適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

正と負の上マージンの設定

+### 正と負の上マージンの設定 -
.content { margin-top:   5%; }
+```css
+.content { margin-top:   5%; }
 .sidebox { margin-top: 10px; }
 .logo    { margin-top: -5px; }
 #footer  { margin-top:  1em; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}目立った変更なし。
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}ただしインライン要素での効果を削除。
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.margin-top")}}

- -

関連情報

- -
    -
  • {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
    • -
  • 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
    • -
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定 +- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}} diff --git a/files/ja/web/css/margin-trim/index.md b/files/ja/web/css/margin-trim/index.md index e0b68f051a..4394279291 100644 --- a/files/ja/web/css/margin-trim/index.md +++ b/files/ja/web/css/margin-trim/index.md @@ -3,63 +3,63 @@ title: margin-trim slug: Web/CSS/margin-trim tags: - CSS - - CSS Property + - CSS プロパティ - Draft - Experimental - NeedsContent - NeedsExample - NeedsLiveSample - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.margin-trim translation_of: Web/CSS/margin-trim --- {{CSSRef}} -The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container’s edges. +`margin-trim` プロパティは、包含ブロックがその子のマージンを包含ブロックの縁に隣接する部分で切り取るすることを可能にします。 -## Syntax +## 構文 ```css margin-trim: none; margin-trim: in-flow; margin-trim: all; -/* Global values */ +/* グローバル値 */ margin-trim: inherit; margin-trim: initial; margin-trim: revert; margin-trim: unset; ``` -## Values +## 値 - `none` - - : Margins are not trimmed by the container. + - : マージンは包含ブロックで切り取られません。 - `in-flow` - - : For in-flow boxes contained by this box, block-axis margins adjacent to the box's edges are truncated to zero. + - : このボックスに含まれるフロー内のボックスでは、ボックスの縁に隣接するブロック軸のマージンがゼロに切り捨てられます。 - It also truncates any margins collapsed with such a margin. + また、そのようなマージンで相殺されたマージンは切り捨てられます。 - `all` - - : Trims the margins of in-flow boxes and floats whose margins coincide with the container's content edge. + - : 包含ブロックのコンテンツの縁とマージンが一致しているフロー内のボックスや浮動要素のマージンを切り取ります。 -## Formal definition +## 公式定義 {{cssinfo}} -## Formal syntax +## 形式文法 {{csssyntax}} -## Examples +## 例 -### Basic usage +### 基本的な使用 -Once support is implemented for this property, it will probably work like so: +このプロパティへの対応が実装されたら、次のように動作するでしょう。 -When you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: +インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。 ```css article { @@ -78,7 +78,7 @@ article > span { } ``` -The problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it: +ここでの問題は、行の右に 20px の間隔が空きすぎてしまうことで、それを修正するためにこのようにするのではないでしょうか。 ```css span:last-child { @@ -86,7 +86,7 @@ span:last-child { } ``` -It is a pain having to write another rule to achieve this, and it is also not very flexible. Instead, `margin-trim` could fix it: +これを実現するために別のルールを書かなければならないのは面倒ですし、柔軟性もありません。代わりに、 `margin-trim` で解決できます。 ```css article { @@ -95,14 +95,14 @@ It is a pain having to write another rule to achieve this, and it is also not ve } ``` -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 {{Compat}} -## See also +## 関連情報 - {{CSSxRef("margin")}} diff --git a/files/ja/web/css/margin/index.md b/files/ja/web/css/margin/index.md index e8e2379d73..620ad1d306 100644 --- a/files/ja/web/css/margin/index.md +++ b/files/ja/web/css/margin/index.md @@ -5,27 +5,29 @@ tags: - CSS - CSS プロパティ - CSS 基本ボックスモデル - - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.margin translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new --- -
{{CSSRef}}
+{{CSSRef}} -

margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。これはすべての個別のマージン ({{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}) の一括指定です。

+**`margin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の全四辺の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。 -
{{EmbedInteractiveExample("pages/css/margin.html")}}
+{{EmbedInteractiveExample("pages/css/margin.html")}} - +## 構成要素のプロパティ -

top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの置換要素ではないインライン要素には効果がありません。

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

注: マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素内に追加の領域を作成します。

-
+- {{cssxref("margin-bottom")}} +- {{cssxref("margin-left")}} +- {{cssxref("margin-right")}} +- {{cssxref("margin-top")}} -

構文

+## 構文 -
/* 四辺すべてに適用 */
+```css
+/* 四辺すべてに適用 */
 margin: 1em;
 margin: -3px;
 
@@ -41,62 +43,84 @@ margin: 2px 1em 0 auto;
 /* グローバル値 */
 margin: inherit;
 margin: initial;
+margin: revert;
 margin: unset;
-
+``` -

margin プロパティは1～4つの値を使って指定することができます。それぞれの値は <length>、 <percentage>、 または auto キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。

+`margin` プロパティは 1 ～ 4 つの値を使って指定することができます。それぞれの値は {{cssxref("<length>")}}、{{cssxref("<percentage>")}}、 または `auto` キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。 -
    -
  • 値が1つ指定された場合、全四辺に同じマージンが適用される。
    • -
  • 値が2つ指定された場合、1つ目のマージンは上下、2つ目は左右の辺に適用される。
    • -
  • 値が3つ指定された場合、1つ目のマージンは上、2つ目は左右、3つ目は下の辺に適用される。
    • -
  • 値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
    • -
+- 値が **1 つ**指定された場合、**全四辺**に同じマージンが適用される。 +- 値が **2 つ**指定された場合、1 つ目のマージンは**上下**、2 つ目は**左右**の辺に適用される。 +- 値が **3 つ**指定された場合、1 つ目のマージンは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 +- 値が **4 つ**指定された場合、マージンはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。 -

値

+### 値 -
-
{{cssxref("length")}}
-
固定値によるマージンの寸法です。
-
{{cssxref("percentage")}}
-
内包ブロックの width に対するパーセントによるマージンの寸法です。
-
auto
-
ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。
-
+- {{cssxref("length")}} + - : マージンの寸法を固定値で表したものです。 +- {{cssxref("percentage")}} + - : マージンの寸法を[包含ブロック](/ja/docs/Web/CSS/Containing_block)の*幅*に対するパーセント値で表したものです。 +- `auto` + - : ブラウザーが適切なマージンを選択して使用します。例えば、要素を中央揃えするためにこの値を使用することもあります。 -

形式文法

+## 解説 + +このプロパティを使用して、要素の全四辺のマージンを設定することができます。マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素*内部*に追加の領域を作成します。 + +top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの[置換要素](/ja/docs/Web/CSS/Replaced_element)ではないインライン要素には効果がありません。 + +### 水平方向の中央揃え + +最近のブラウザーで何かを中央揃えしたい場合は、{{cssxref("display")}}`: flex; `{{cssxref("justify-content")}}`: center;` を使用することができます。 + +しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 `margin: 0 auto;` を使用してください。 + +### マージンの相殺 + +要素の上下のマージンは、相殺されて 2 つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくは[マージンの相殺の習得](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)を参照してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

単純な例

+

単純な例

-

HTML

+#### HTML -
<div class="center">This element is centered.</div>
+```html
+
This element is centered.

 
-<div class="outside">This element is positioned outside of its container.</div>
+
This element is positioned outside of its container.
+``` -

CSS

+#### CSS -
.center {
-  margin: auto;
-  background: lime;
-  width: 66%;
+```css
+.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
 }
 
 .outside {
-  margin: 3rem 0 0 -3rem;
-  background: cyan;
-  width: 66%;
-}
+  margin: 3rem 0 0 -3rem; +  background: cyan; +  width: 66%; +} +``` -

{{ EmbedLiveSample('Simple_example','100%',120) }}

+{{ EmbedLiveSample('Simple_example','100%',120) }} -

その他の例

+### その他の例 -
margin: 5%;                /* 全辺: 5% のマージン */
+```css
+margin: 5%;                /* 全辺: 5% のマージン */
 
 margin: 10px;              /* 全辺: 10px のマージン */
 
@@ -117,64 +141,19 @@ margin: 2em auto;           /* 上と下: 2em のマージン   */
 
 margin: auto;               /* 上と下: 0 のマージン     */
                             /* ボックスは水平方向に中央 */
-
- -

注

- -

水平方向の中央揃え

- -

最近のブラウザーで何かを中央揃えしたい場合は、 display: flex; justify-content: center; を使用することができます。

- -

しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 margin: 0 auto; を使用してください。

- -

マージンの相殺

- -

要素の上下のマージンは、相殺されて2つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の理解を参照してください。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}有意な変更なし。
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}margin をアニメーション可能として定義。
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}インライン要素における top および bottom マージンの効果を削除。
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) +- [マージンの相殺](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) +- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} +- 対応する論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}} diff --git a/files/ja/web/css/padding-bottom/index.md b/files/ja/web/css/padding-bottom/index.md index 8aa21ff9bb..5209985100 100644 --- a/files/ja/web/css/padding-bottom/index.md +++ b/files/ja/web/css/padding-bottom/index.md @@ -3,108 +3,79 @@ title: padding-bottom slug: Web/CSS/padding-bottom tags: - CSS - - CSS Padding - - CSS Property - - Reference - - 'recipe:css-property' + - CSS パディング + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.padding-bottom translation_of: Web/CSS/padding-bottom --- -
{{CSSRef}}
+{{CSSRef}} -

padding-bottom は CSS のプロパティで、要素のパディング領域における下側の高さを設定します。

+**`padding-bottom`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における下側の高さを設定します。 -
{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}
+{{EmbedInteractiveExample("pages/css/padding-bottom.html")}} - +要素のパディング領域とは、コンテンツと境界との間の領域のことです。 -

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

+![CSS の padding-bottom プロパティの要素ボックスへの影響](padding-bottom.svg) -

CSS の padding-bottom プロパティの要素ボックスへの影響

+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。 -
-

注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

-
+## 構文 -

構文

- -
/* <length> の値 */
+```css
+/*  の値 */
 padding-bottom: 0.5em;
 padding-bottom: 0;
 padding-bottom: 2cm;
 
-/* <percentage> の値 */
+/*  の値 */
 padding-bottom: 10%;
 
 /* グローバル値 */
 padding-bottom: inherit;
 padding-bottom: initial;
+padding-botom: revert;
 padding-bottom: unset;
-
+``` -

padding-bottom プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+`padding-bottom` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。 -

値

+### 値 -
-
{{cssxref("<length>")}}
-
固定値によるパディングの寸法です。負の数であってはいけません。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。
-
+- {{cssxref("<length>")}} + - : パディングの寸法を固定値で表したものです。負の数であってはいけません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

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

+### ピクセル数とパーセント値で下パディングを設定 -
.content { padding-bottom: 5%; }
+```css
+.content { padding-bottom: 5%; }
 .sidebox { padding-bottom: 10px; }
-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • CSS 基本ボックスモデルの紹介
    • -
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
    • -
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • -
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) +- {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定 +- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}} diff --git a/files/ja/web/css/padding-bottom/padding-bottom.svg b/files/ja/web/css/padding-bottom/padding-bottom.svg new file mode 100644 index 0000000000..4950a32a86 --- /dev/null +++ b/files/ja/web/css/padding-bottom/padding-bottom.svg @@ -0,0 +1 @@ +パディング領域境界コンテンツ領域マージン領域この領域の高さが padding-bottom 値で定義されますpadding-bottom \ No newline at end of file diff --git a/files/ja/web/css/padding-left/index.md b/files/ja/web/css/padding-left/index.md index 589c502943..67c2b40839 100644 --- a/files/ja/web/css/padding-left/index.md +++ b/files/ja/web/css/padding-left/index.md @@ -3,106 +3,77 @@ title: padding-left slug: Web/CSS/padding-left tags: - CSS - - CSS Padding - - CSS Property - - Reference - - 'recipe:css-property' + - CSS パディング + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.padding-left translation_of: Web/CSS/padding-left --- -
{{CSSRef}}
+{{CSSRef}} -

padding-left は CSS のプロパティで、要素のパディング領域における左側の幅を設定します。

+**`padding-left`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における左側の幅を設定します。 -
{{EmbedInteractiveExample("pages/css/padding-left.html")}}
+{{EmbedInteractiveExample("pages/css/padding-left.html")}} - +要素のパディング領域とは、コンテンツと境界との間の領域のことです。 -

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

+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。 -
-

注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

-
+## 構文 -

構文

- -
/* <length> の値 */
+```css
+/*  の値 */
 padding-left: 0.5em;
 padding-left: 0;
 padding-left: 2cm;
 
-/* <percentage> の値 */
+/*  の値 */
 padding-left: 10%;
 
 /* グローバル値 */
 padding-left: inherit;
 padding-left: initial;
+padding-left: revert;
 padding-left: unset;
-
+``` -

padding-left プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+`padding-left` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。 -

値

+### 値 -
-
{{cssxref("<length>")}}
-
固定値によるパディングの寸法です。負の数であってはいけません。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。
-
+- {{cssxref("<length>")}} + - : パディングの寸法を固定値で表したものです。負の数であってはいけません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

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

+### 左パディングをピクセル数とパーセント値で設定 -
.content { padding-left: 5%; }
+```css
+.content { padding-left: 5%; }
 .sidebox { padding-left: 10px; }
-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • CSS 基本ボックスモデルの紹介
    • -
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} および {{cssxref("padding")}} 一括指定
    • -
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • -
+``` + +## 仕様書 + +{{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")}} 一括指定 +- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}} diff --git a/files/ja/web/css/padding-right/index.md b/files/ja/web/css/padding-right/index.md index 85d9486bba..6f6ecea7da 100644 --- a/files/ja/web/css/padding-right/index.md +++ b/files/ja/web/css/padding-right/index.md @@ -3,106 +3,77 @@ title: padding-right slug: Web/CSS/padding-right tags: - CSS - - CSS Padding - - CSS Property - - Reference - - 'recipe:css-property' + - CSS パディング + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.padding-right translation_of: Web/CSS/padding-right --- -
{{CSSRef}}
+{{CSSRef}} -

padding-right は CSS のプロパティで、要素のパディング領域における右側の幅を設定します。

+**`padding-right`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における右側の幅を設定します。 -
{{EmbedInteractiveExample("pages/css/padding-right.html")}}
+{{EmbedInteractiveExample("pages/css/padding-right.html")}} - +要素のパディング領域とは、コンテンツと境界との間の空間のことです。 -

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

+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。 -
-

注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

-
+## 構文 -

構文

- -
/* <length> の値 */
+```css
+/*  の値 */
 padding-right: 0.5em;
 padding-right: 0;
 padding-right: 2cm;
 
-/* <percentage> の値 */
+/*  の値 */
 padding-right: 10%;
 
 /* グローバル値 */
 padding-right: inherit;
 padding-right: initial;
+padding-right: revert;
 padding-right: unset;
-
+``` -

padding-right プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+`padding-right` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。 -

値

+### 値 -
-
{{cssxref("<length>")}}
-
固定値によるパディングの寸法です。負の数であってはいけません。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。
-
+- {{cssxref("<length>")}} + - : パディングの寸法を固定値で表したものです。負の数であってはいけません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

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

+### 右パディングをピクセル数とパーセント値で設定 -
.content { padding-right: 5%; }
+```css
+.content { padding-right: 5%; }
 .sidebox { padding-right: 10px; }
-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • CSS 基本ボックスモデルの紹介
    • -
  • {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
    • -
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • -
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) +- {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定 +- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}} diff --git a/files/ja/web/css/padding-top/index.md b/files/ja/web/css/padding-top/index.md index 365db61701..a8481332c2 100644 --- a/files/ja/web/css/padding-top/index.md +++ b/files/ja/web/css/padding-top/index.md @@ -3,108 +3,79 @@ title: padding-top slug: Web/CSS/padding-top tags: - CSS - - CSS Padding - - CSS Property - - Reference - - 'recipe:css-property' + - CSS パディング + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.padding-top translation_of: Web/CSS/padding-top --- -
{{CSSRef}}
+{{CSSRef}} -

padding-top は CSS のプロパティで、要素のパディング領域における上側の高さを設定します。

+**`padding-top`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における上側の高さを設定します。 -
{{EmbedInteractiveExample("pages/css/padding-top.html")}}
+{{EmbedInteractiveExample("pages/css/padding-top.html")}} - +要素のパディング領域とは、コンテンツと境界との間の空間のことです。 -

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

+![CSS の padding-top プロパティの要素ボックスへの影響](padding-top.svg) -

CSS の padding-top プロパティの要素ボックスへの影響

+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。 -
-

注: {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

-
+## 構文 -

構文

- -
/* <length> の値 */
+```css
+/*  値 */
 padding-top: 0.5em;
 padding-top: 0;
 padding-top: 2cm;
 
-/* <percentage> の値 */
+/*  値 */
 padding-top: 10%;
 
 /* グローバル値 */
 padding-top: inherit;
 padding-top: initial;
+padding-top: revert;
 padding-top: unset;
-
+``` -

padding-top プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

+`padding-top` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。 -

値

+### 値 -
-
{{cssxref("<length>")}}
-
固定値によるパディングの寸法です。負の数であってはいけません。
-
{{cssxref("<percentage>")}}
-
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。
-
+- {{cssxref("<length>")}} + - : パディングの寸法を固定値で表したものです。負の数であってはいけません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

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

+### 上パディングをピクセル数とパーセント値で設定 -
.content { padding-top: 5%; }
+```css
+.content { padding-top: 5%; }
 .sidebox { padding-top: 10px; }
-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • CSS 基本ボックスモデルの紹介
    • -
  • {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
    • -
  • 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
    • -
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) +- {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定 +- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}} diff --git a/files/ja/web/css/padding-top/padding-top.svg b/files/ja/web/css/padding-top/padding-top.svg new file mode 100644 index 0000000000..2ed00d344e --- /dev/null +++ b/files/ja/web/css/padding-top/padding-top.svg @@ -0,0 +1 @@ +パディング領域境界コンテンツ領域マージン領域この領域の高さが padding-top 値で定義されますpadding-top \ No newline at end of file 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")}} -
    -
  • {{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つ指定された場合、パディングはそれぞれ上、右、下、左の順 (時計回り) に適用される。
    • -
+- 値が **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")}}

- -

関連情報

- -
    -
  • CSS 基本ボックスモデルの紹介
    • -
  • {{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")}}
    • -
+ /* 右: 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