diff options
| -rw-r--r-- | files/ja/web/css/bottom/index.md | 174 | ||||
| -rw-r--r-- | files/ja/web/css/clear/index.md | 224 | ||||
| -rw-r--r-- | files/ja/web/css/float/index.md | 268 | ||||
| -rw-r--r-- | files/ja/web/css/left/index.md | 261 | ||||
| -rw-r--r-- | files/ja/web/css/position/index.md | 370 | ||||
| -rw-r--r-- | files/ja/web/css/right/index.md | 229 | ||||
| -rw-r--r-- | files/ja/web/css/top/index.md | 167 | ||||
| -rw-r--r-- | files/ja/web/css/z-index/index.md | 141 |
8 files changed, 861 insertions, 973 deletions
diff --git a/files/ja/web/css/bottom/index.md b/files/ja/web/css/bottom/index.md index 92349fd4eb..e4b00229ac 100644 --- a/files/ja/web/css/bottom/index.md +++ b/files/ja/web/css/bottom/index.md @@ -3,37 +3,36 @@ title: bottom slug: Web/CSS/bottom tags: - CSS - - CSS プロパティ - CSS 位置指定レイアウト - - Reference + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.bottom translation_of: Web/CSS/bottom --- -<div>{{CSSRef}}</div> - -<p><strong><code>bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/ja/docs/Web/CSS/position"><ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby></a>の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div> +**`bottom`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[位置指定要素](/ja/docs/Web/CSS/position)の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/bottom.html")}} -<p><code>bottom</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p> +`bottom` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。 -<ul> - <li><code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されている場合、 <code>bottom</code> プロパティは要素の下辺と包含ブロックの下辺との間の距離を指定します。</li> - <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>bottom</code> プロパティは要素の下辺が通常位置から上方向へ移動する量を指定します。</li> - <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>bottom</code> プロパティは sticky 制約の矩形を計算するために使用されます。</li> - <li><code>position</code> が <code>static</code> に設定されている場合、 <code>bottom</code> プロパティは<em>効果がありません</em>。</li> -</ul> +- `position` が `absolute` または `fixed` に設定されている場合、 `bottom` プロパティは要素の下辺と包含ブロックの下辺との間の距離を指定します。 +- `position` が `relative` に設定されている場合、 `bottom` プロパティは要素の下辺が通常位置から上方向へ移動する量を指定します。 +- `position` が `sticky` に設定されている場合、 `bottom` プロパティは sticky 制約の矩形を計算するために使用されます。 +- `position` が `static` に設定されている場合、 `bottom` プロパティは*効果がありません*。 -<p>{{cssxref("top")}} と <code>bottom</code> の両方が指定されており、 <code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されており、<em>かつ</em> {{cssxref("height")}} が未指定 (<code>auto</code> または <code>100%</code> のどちらか) の場合は、 <code>top</code> と <code>bottom</code> の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または <code>position</code> が <code>relative</code> に設定されていた場合は、 <code>top</code> プロパティが優先されて <code>bottom</code> プロパティは無視されます。</p> +{{cssxref("top")}} と `bottom` の両方が指定されており、 `position` が `absolute` または `fixed` に設定されており、*かつ* {{cssxref("height")}} が未指定 (`auto` または `100%` のどちらか) の場合は、 `top` と `bottom` の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または `position` が `relative` に設定されていた場合は、 `top` プロパティが優先されて `bottom` プロパティは無視されます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ bottom: 3px; bottom: 2.4em; -/* 内包ブロックの高さに対する <percentage> */ +/* 包含ブロックの高さに対する <percentage> */ bottom: 10%; /* キーワード値 */ @@ -42,49 +41,57 @@ bottom: auto; /* グローバル値 */ bottom: inherit; bottom: initial; +bottom: revert; bottom: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 - <ul> - <li><em>絶対位置指定要素</em>の場合は、包含ブロックの下辺までの距離。</li> - <li><em>相対位置指定要素</em>の場合は、通常の位置からの上方向への移動量。</li> - </ul> - </dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>包含ブロックの高さに対する {{cssxref("<percentage>")}} です。</dd> - <dt><code>auto</code></dt> - <dd>以下のように指定します。 - <ul> - <li><em>絶対位置指定要素</em>では、要素の位置は {{Cssxref("top")}} プロパティに基づいて決まり、 <code>height: auto</code> は内容物の高さに基づいて決まります。また、 <code>top</code> も <code>auto</code> であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。</li> - <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("top")}} に基づきます。また、 <code>top</code> も <code>auto</code> であった場合は、垂直方向には移動しません。</li> - </ul> - </dd> - <dt><code>inherit</code></dt> - <dd>値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または <code>auto</code> キーワードと同様に扱われます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +### 値 + +- {{cssxref("<length>")}} + + - : 負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 + + - *絶対位置指定要素*の場合は、包含ブロックの下辺までの距離。 + - *相対位置指定要素*の場合は、通常の位置からの上方向への移動量。 + +- {{cssxref("<percentage>")}} + - : 包含ブロックの高さに対する {{cssxref("<percentage>")}} です。 +- `auto` + + - : 以下のように指定します。 + + - *絶対位置指定要素*では、要素の位置は {{Cssxref("top")}} プロパティに基づいて決まり、 `height: auto` は内容物の高さに基づいて決まります。また、 `top` も `auto` であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。 + - *相対位置指定要素*では、通常の位置から要素までの距離は {{Cssxref("top")}} に基づきます。また、 `top` も `auto` であった場合は、垂直方向には移動しません。 + +- `inherit` + - : 値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または `auto` キーワードと同様に扱われます。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Absolute_and_fixed_positioning">絶対位置指定と固定位置指定</h3> -<p>この例は、 {{cssxref("position")}} が <code>absolute</code> と <code>fixed</code> であった場合の <code>bottom</code> プロパティの動作の違いを示します。</p> +この例は、 {{cssxref("position")}} が `absolute` と `fixed` であった場合の `bottom` プロパティの動作の違いを示します。 -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html notranslate"><p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> -<div class="fixed"><p>Fixed</p></div> -<div class="absolute"><p>Absolute</p></div></pre> +```html +<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> +<div class="fixed"><p>Fixed</p></div> +<div class="absolute"><p>Absolute</p></div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css notranslate">p { +```css +p { font-size: 30px; line-height: 2em; } @@ -106,46 +113,23 @@ div { position: fixed; bottom: 0; right: 0; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Example','500','250')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td> - <td>{{Spec2('CSS3 Positioning')}}</td> - <td>sticky の位置の動作を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.bottom")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("left")}}</li> - <li>対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}</li> - <li>{{cssxref("position")}}</li> -</ul> +} +``` + +### 結果 + +{{EmbedLiveSample('Absolute_and_fixed_positioning','500','250')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("inset")}}: 関連するすべてのプロパティである {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} の一括指定 +- 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}} +- {{cssxref("position")}} diff --git a/files/ja/web/css/clear/index.md b/files/ja/web/css/clear/index.md index 8b3e1dab51..f6d0022729 100644 --- a/files/ja/web/css/clear/index.md +++ b/files/ja/web/css/clear/index.md @@ -3,39 +3,39 @@ title: clear slug: Web/CSS/clear tags: - CSS - - CSS プロパティ - CSS 位置指定レイアウト - - Reference + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.clear translation_of: Web/CSS/clear --- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>clear</code></strong> プロパティは、要素が先行する<a href="/ja/docs/Web/CSS/float">浮動</a>要素の下に移動 (clear) する必要があるかどうかを設定します。 <code>clear</code> プロパティは、浮動要素と非浮動要素のどちらにも適用されます。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div> + **`clear`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素をその前にある[浮動](/ja/docs/Web/CSS/float)要素の下に移動 (clear) する必要があるかどうかを設定します。`clear` プロパティは、浮動要素と非浮動要素のどちらにも適用されます。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/clear.html")}} -<p>非浮動ブロックに適用された場合は、その要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界の辺</a>が、関係するすべての浮動要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin-area">マージンの辺</a>より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。</p> +浮動でないブロックに適用された場合は、その要素の[境界の辺](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area)が、関係するすべての浮動要素の[マージンの辺](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin-area)より下まで移動します。浮動でないブロックの上マージンは折り畳まれます。 -<p>一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。</p> +一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。 -<p>解除されることに関連する浮動要素は、その前の浮動要素と<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">同一のブロック整形コンテキスト</a>内の先行する浮動要素です。</p> +解除されることに関連する浮動要素は、その前の浮動要素と[同一のブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)内の先行する浮動要素です。 -<div class="note"> -<p><strong>メモ:</strong> 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは <strong>clearfix</strong> と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> に <code>clear</code> を使います。</p> - -<pre class="brush: css">#container::after { - content: ""; - display: block; - clear: both; -} -</pre> -</div> +> **Note:** 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは **clearfix** と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) に `clear` を使う方法があります。 +> +> ```css +> #container::after { +> content: ""; +> display: block; +> clear: both; +> } +> ``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ clear: none; clear: left; clear: right; @@ -46,46 +46,51 @@ clear: inline-end; /* グローバル値 */ clear: inherit; clear: initial; +clear: revert; clear: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>要素は先行するフロートと切り離されず、下に移動しません。</dd> - <dt><code>left</code></dt> - <dd>要素は先行する <em>左の </em>フロートと切り離され、下に移動します。</dd> - <dt><code>right</code></dt> - <dd>要素は先行する<em> 右の</em> フロートと切り離され、下に移動します。</dd> - <dt><code>both</code></dt> - <dd>要素は先行する<em> 左右両方の </em>フロートと切り離され、下に移動します。</dd> - <dt><code>inline-start</code></dt> - <dd>要素は、先行する<em>包含ブロックの始端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>左側</em>、rtl 表記では<em>右側</em>のフロートです。</dd> - <dt><code>inline-end</code></dt> - <dd>要素は、先行する<em>包含ブロックの終端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>右側</em>、rtl 表記では<em>左側</em>のフロートです。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +### 値 + +- `none` + - : 要素は先行する浮動要素と切り離されず、下に移動しません。 +- `left` + - : 要素は先行する*左*の浮動要素と切り離され、下に移動します。 +- `right` + - : 要素は先行する*右*の浮動要素と切り離され、下に移動します。 +- `both` + - : 要素は先行する*左右両方*の浮動要素と切り離され、下に移動します。 +- `inline-start` + - : 要素は、先行する*包含ブロックの先頭側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*左側*、右書きでは*右側*の浮動要素です。 +- `inline-end` + - : 要素は、先行する*包含ブロックの末尾側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*右側*、右書きでは*左側*の浮動要素です。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="clear-left" name="clear-left">clear: left</h3> +### clear: left -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div class="wrapper"> - <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> - <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> - <p class="left">This paragraph clears left.</p> -</div> -</pre> +```html +<div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="left">This paragraph clears left.</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.wrapper{ +```css +.wrapper{ border:1px solid black; padding:10px; } @@ -109,24 +114,26 @@ clear: unset; p { width: 50%; } -</pre> +``` -<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p> +{{ EmbedLiveSample('clear_left','100%','250') }} -<h3 id="clear-right" name="clear-right">clear: right</h3> +### clear: right -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div class="wrapper"> - <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> - <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> - <p class="right">This paragraph clears right.</p> -</div> -</pre> +```html +<div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="right">This paragraph clears right.</p> +</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">.wrapper{ +```css +.wrapper{ border:1px solid black; padding:10px; } @@ -149,24 +156,27 @@ p { } p { width: 50%; -}</pre> +} +``` -<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p> +{{ EmbedLiveSample('clear_right','100%','250') }} -<h3 id="clear-both" name="clear-both">clear: both</h3> +### clear: both -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush: html"><div class="wrapper"> - <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> - <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> - <p class="both">This paragraph clears both.</p> -</div> -</pre> +```html +<div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="both">This paragraph clears both.</p> +</div> +``` -<h4 id="CSS_3">CSS</h4> +#### CSS -<pre class="brush: css">.wrapper{ +```css +.wrapper{ border:1px solid black; padding:10px; } @@ -189,47 +199,19 @@ p { } p { width: 45%; -}</pre> - -<p>{{ EmbedLiveSample('clear-both','100%','300') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>値 <code>inline-start</code> および <code>inline-end</code> を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>重要な変更はないが、細部が明瞭になった</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.clear")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="CSS/box_model">CSS 基本ボックスモデル</a></li> -</ul> +} +``` + +{{ EmbedLiveSample('clear_both','100%','300') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) diff --git a/files/ja/web/css/float/index.md b/files/ja/web/css/float/index.md index 6a6a6f3315..84f552dcee 100644 --- a/files/ja/web/css/float/index.md +++ b/files/ja/web/css/float/index.md @@ -3,96 +3,46 @@ title: float slug: Web/CSS/float tags: - CSS - - CSS Positioning - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 位置指定レイアウト + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.float translation_of: Web/CSS/float --- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>float</code></strong> は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。</span>要素はウェブページの通常のフローから外れますが、 (<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a> とは対照的に) フローの一部であり続けます。</p> - -<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p><ruby><em>浮動要素</em><rp> (</rp><rt>floating element</rt><rp>) </rp></ruby>とは、<code>float</code> の計算値が <code>none</code> 以外の要素です。</p> - -<p><code>float</code> は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">指定値</th> - <th scope="col">計算値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>inline</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>inline-block</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>inline-table</code></td> - <td><code>table</code></td> - </tr> - <tr> - <td><code>table-row</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>table-row-group</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>table-column</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>table-column-group</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>table-cell</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>table-caption</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>table-header-group</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>table-footer-group</code></td> - <td><code>block</code></td> - </tr> - <tr> - <td><code>inline-flex</code></td> - <td><code>flex</code></td> - </tr> - <tr> - <td><code>inline-grid</code></td> - <td><code>grid</code></td> - </tr> - <tr> - <td><em>その他</em></td> - <td><em>変更されません</em></td> - </tr> - </tbody> -</table> - -<div class="note"><strong>注:</strong> JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは <code>float</code> に対応していますが、古いブラウザーは <code>cssFloat</code> という綴りになり、 Internet Explorer のバージョン 8 以前では、 <code>styleFloat</code> を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 <label> の "for" を "htmlFor" とする必要があったりするのと同じです)。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +{{CSSRef}} + +**`float`** は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 ([絶対位置指定](/ja/docs/Web/CSS/position#absolute_positioning) とは対照的に) フローの一部であり続けます。 + +{{EmbedInteractiveExample("pages/css/float.html")}} + +*浮動要素* (floating element) とは、`float` の計算値が `none` 以外の要素です。 + +`float` は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。 + +| 指定値 | 計算値 | +| -------------------- | -------------- | +| `inline` | `block` | +| `inline-block` | `block` | +| `inline-table` | `table` | +| `table-row` | `block` | +| `table-row-group` | `block` | +| `table-column` | `block` | +| `table-column-group` | `block` | +| `table-cell` | `block` | +| `table-caption` | `block` | +| `table-header-group` | `block` | +| `table-footer-group` | `block` | +| `inline-flex` | `flex` | +| `inline-grid` | `grid` | +| _その他_ | _変更なし_ | + +> **Note:** JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは `float` に対応していますが、古いブラウザーは `cssFloat` という綴りになり、 Internet Explorer のバージョン 8 以前では、 `styleFloat` を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 \<label> の "for" を "htmlFor" とする必要があったりするのと同じです)。 + +## 構文 + +```css +/* キーワード値 */ float: left; float: right; float: none; @@ -102,61 +52,63 @@ float: inline-end; /* グローバル値 */ float: inherit; float: initial; +float: revert; float: unset; -</pre> +``` -<p><code>float</code> プロパティは、以下の値からひとつのキーワードを選択して指定します。</p> +`float` プロパティは、以下の値からひとつのキーワードを選択して指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>left</code></dt> - <dd>要素は、必ずその包含ブロックの左側に浮動します。</dd> - <dt><code>right</code></dt> - <dd>要素は、必ずその包含ブロックの右側に浮動します。</dd> - <dt><code>none</code></dt> - <dd>要素は決して浮動しません。</dd> - <dt><code>inline-start</code></dt> - <dd>要素は、必ずその包含ブロックの始端側に浮動します。 <code>ltr</code> 表記では左側、 <code>rtl</code> 表記では右側になります。</dd> - <dt><code>inline-end</code></dt> - <dd>要素は、必ずその包含ブロックの終端側に浮動します。 <code>ltr</code> 表記では右側、 <code>rtl</code> 表記では左側になります。</dd> -</dl> +- `left` + - : 要素は、必ずその包含ブロックの左側に浮動します。 +- `right` + - : 要素は、必ずその包含ブロックの右側に浮動します。 +- `none` + - : 要素は決して浮動しません。 +- `inline-start` + - : 要素は、必ずその包含ブロックの始端側に浮動します。左書きでは左側、右書きでは右側になります。 +- `inline-end` + - : 要素は、必ずその包含ブロックの終端側に浮動します。左書きでは右側、右書きでは左側になります。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="How_floated_elements_are_positioned" name="How_floated_elements_are_positioned">浮動要素の位置をどのように決めるか</h3> +<h3 id="How_floated_elements_are_positioned">浮動要素の位置をどのように決めるか</h3> -<p>上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか<em>他の浮動要素</em>の辺に触れるまで、左側または右側に移動させられます。</p> +上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか*他の浮動要素*の辺に触れるまで、左側または右側に移動させられます。 -<p>この例では、3つの赤い正方形があります。このうち2つは左側に浮動しており、1つは右側に浮動しています。2つめの「左の」赤い正方形は、1つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。</p> +この例では、 3 つの赤い正方形があります。このうち 2 つは左側に浮動しており、 1 つは右側に浮動しています。 2 つめの「左の」赤い正方形は、 1 つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。 -<p>浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を <code>width: 100%</code> かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。</p> +浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を `width: 100%` かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><section> - <div class="left">1</div> - <div class="left">2</div> - <div class="right">3</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. +```html +<section> + <div class="left">1</div> + <div class="left">2</div> + <div class="right">3</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa aliquet tincidunt - vel in massa. Phasellus feugiat est vel leo finibus congue.</p> -</section> -</pre> + vel in massa. Phasellus feugiat est vel leo finibus congue.</p> +</section> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">section { +```css +section { + box-sizing: border-box; border: 1px solid blue; width: 100%; float: left; @@ -176,52 +128,26 @@ div { .right { float: right; background: cyan; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p> - -<h3 id="Clearing_floats" name="Clearing_floats">浮動の解除</h3> - -<p>あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>値 <code>inline-start</code> および <code>inline-end</code> を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#float', 'float')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.float")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/block_formatting_context">ブロック整形コンテキスト</a></li> - <li>アイテムを浮動要素の下へ強制的に移動させるには {{cssxref("clear")}} を使用します。</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('How_floated_elements_are_positioned','400','190')}} + +### 浮動の解除 + +あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context) +- アイテムを浮動要素の下へ強制的に移動させるには {{cssxref("clear")}} を使用します。 diff --git a/files/ja/web/css/left/index.md b/files/ja/web/css/left/index.md index d0a7275f65..280b35171a 100644 --- a/files/ja/web/css/left/index.md +++ b/files/ja/web/css/left/index.md @@ -3,38 +3,27 @@ title: left slug: Web/CSS/left tags: - CSS - - CSS Property - - CSS プロパティ - CSS 位置指定レイアウト - - Reference + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.left translation_of: Web/CSS/left --- -<div>{{CSSRef}}</div> - -<p><strong><code>left</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、<ruby><a href="/ja/docs/Web/CSS/position">位置指定要素</a><rp> (</rp><rt>positioned element</rt><rp>) </rp></ruby>の水平位置の決定に関与します。位置指定されていない要素には効果はありません。</p> - -<div>{{EmbedInteractiveExample("pages/css/left.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{CSSRef}} -<p><code>left</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p> +**`left`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[位置指定要素](/ja/docs/Web/CSS/position)の水平位置の決定に関与します。位置指定されていない要素には効果はありません。 -<ul> - <li><code>position</code> が <code>absolute</code> 又は <code>fixed</code> に設定されている場合、 <code>left</code> プロパティは要素の左辺と包含ブロックの左辺との間の距離を指定します。 (包含ブロックは相対配置された祖先の要素です。)</li> - <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>left</code> プロパティは要素の左辺が通常位置から右方向へ移動する量を指定します。</li> - <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>left</code> プロパティは sticky 制約の矩形を計算するために使用されます。</li> - <li><code>position</code> が <code>static</code> に設定されている場合、 <code>left</code> プロパティは<em>効果がありません</em>。</li> -</ul> +{{EmbedInteractiveExample("pages/css/left.html")}} -<p><code>left</code> と {{cssxref("right")}} の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は<em>過剰指定</em>になります。このような場合、包含ブロックが左書きの場合は <code>left</code> の値が優先され、包含ブロックが右書きの場合は <code>right</code> の値が優先されます。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ left: 3px; left: 2.4em; -/* 内包ブロックの幅に対する <percentage> */ +/* 包含ブロックの幅に対する <percentage> */ left: 10%; /* キーワード値 */ @@ -43,41 +32,110 @@ left: auto; /* グローバル値 */ left: inherit; left: initial; +left: revert; left: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 - <ul> - <li><em>絶対位置指定要素</em>の場合は、包含ブロックの左辺までの距離。</li> - <li><em>相対位置指定要素</em>の場合は、通常の位置からの右方向への移動量。</li> - </ul> - </dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>包含ブロックの幅に対する {{cssxref("<percentage>")}} です。</dd> - <dt><code>auto</code></dt> - <dd>以下のように指定します。 - <ul> - <li><em>絶対位置指定要素</em>では、要素の位置は {{Cssxref("right")}} プロパティに基づいて決まり、 <code>width: auto</code> は内容物の幅に基づいて決まります。また、 <code>right</code> も <code>auto</code> であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。</li> - <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("right")}} に基づきます。また、 <code>right</code> も <code>auto</code> であった場合は、水平方向には移動しません。</li> - </ul> - </dd> - <dt><code>inherit</code></dt> - <dd>値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 又は <code>auto</code> キーワードと同様に扱われます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +### 値 + +- {{cssxref("<length>")}} + + - : 負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 + + - *絶対位置指定要素*の場合は、包含ブロックの左辺までの距離。 + - *相対位置指定要素*の場合は、通常の位置からの右方向への移動量。 + +- {{cssxref("<percentage>")}} + - : 包含ブロックの幅に対する {{cssxref("<percentage>")}} です。 +- `auto` + + - : 以下のように指定します。 + + - *絶対位置指定要素*では、要素の位置は {{Cssxref("right")}} プロパティに基づいて決まり、 `width: auto` は内容物の幅に基づいて決まります。また、 `right` も `auto` であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。 + - *相対位置指定要素*では、通常の位置から要素までの距離は {{Cssxref("right")}} に基づきます。また、 `right` も `auto` であった場合は、水平方向には移動しません。 + +- `inherit` + - : 値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または `auto` キーワードと同様に扱われます。 + +## 解説 + +`left` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。 + +- `position` が `absolute` または `fixed` に設定されている場合、 `left` プロパティは要素の左辺と包含ブロックの左辺との間の距離を指定します。 (包含ブロックは相対配置された祖先の要素です。) +- `position` が `relative` に設定されている場合、 `left` プロパティは要素の左辺が通常位置から右方向へ移動する量を指定します。 +- `position` が `sticky` に設定されている場合、 `left` プロパティは sticky 制約の矩形を計算するために使用されます。 +- `position` が `static` に設定されている場合、 `left` プロパティは*効果がありません*。 + +`left` と {{cssxref("right")}} の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は*過剰指定*になります。このような場合、包含ブロックが左書きの場合は `left` の値が優先され、包含ブロックが右書きの場合は `right` の値が優先されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +<h3 id="Positioning_elements">位置指定要素</h3> + +#### HTML + +```html +<div id="wrap"> + <div id="example_1"> + <pre> + position: absolute; + left: 20px; + top: 20px; + </pre> + <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p> + </div> -<h3 id="CSS">CSS</h3> + <div id="example_2"> + <pre> + position: relative; + top: 0; + right: 0; + </pre> + <p>Relative position in relation to its siblings.</p> + </div> -<pre class="brush: css notranslate">#wrap { + <div id="example_3"> + <pre> + float: right; + position: relative; + top: 20px; + left: 20px; + </pre> + <p>Relative to its sibling div above, but removed from flow of content.</p> + + <div id="example_4"> + <pre> + position: absolute; + bottom: 10px; + right: 20px; + </pre> + <p>Absolute position inside of a parent with relative position</p> + </div> + + <div id="example_5"> + <pre> + position: absolute; + right: 0; + left: 0; + top: 200px; + </pre> + <p>Absolute position with both left and right declared</p> </div> + </div> +</div> +``` + +#### CSS + +```css +#wrap { width: 700px; margin: 0 auto; background: #5C5C5C; @@ -131,96 +189,23 @@ pre { left: 0; top: 100px; background-color: #D7FFC2; -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +#### 結果 -<pre class="brush: html notranslate"><div id="wrap"> - <div id="example_1"> - <pre> - position: absolute; - left: 20px; - top: 20px; - </pre> - <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p> - </div> +{{EmbedLiveSample('Positioning_elements',1200,650)}} - <div id="example_2"> - <pre> - position: relative; - top: 0; - right: 0; - </pre> - <p>Relative position in relation to its siblings.</p> - </div> +## 仕様書 - <div id="example_3"> - <pre> - float: right; - position: relative; - top: 20px; - left: 20px; - </pre> - <p>Relative to its sibling div above, but removed from flow of content.</p> +{{Specifications}} - <div id="example_4"> - <pre> - position: absolute; - bottom: 10px; - right: 20px; - </pre> - <p>Absolute position inside of a parent with relative position</p> - </div> +## ブラウザーの互換性 - <div id="example_5"> - <pre> - position: absolute; - right: 0; - left: 0; - top: 200px; - </pre> - <p>Absolute position with both left and right declared</p> </div> - </div> -</div></pre> - -<h3 id="Live_sample" name="Live_sample">実行例</h3> - -<p>{{EmbedLiveSample('Examples',1200,650)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}</td> - <td>{{Spec2('CSS3 Positioning')}}</td> - <td>sticky の位置の動作を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.left")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}</li> - <li>対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}</li> - <li>{{cssxref("position")}}</li> -</ul> +{{Compat}} + +## 関連情報 + +- {{cssxref("inset")}}: 関連するすべてのプロパティである {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} の一括指定 +- 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}} +- {{cssxref("position")}} diff --git a/files/ja/web/css/position/index.md b/files/ja/web/css/position/index.md index f96bed35f0..c0d412fe57 100644 --- a/files/ja/web/css/position/index.md +++ b/files/ja/web/css/position/index.md @@ -3,101 +3,117 @@ title: position slug: Web/CSS/position tags: - CSS - - CSS Positioning - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 位置指定レイアウト + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.position translation_of: Web/CSS/position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>position</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、文書内で要素がどのように配置されるかを設定します。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティが、配置された要素の最終的な位置を決めます。</p> +**`position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、文書内で要素がどのように配置されるかを設定します。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティが、配置された要素の最終的な位置を決めます。 -<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div> +{{EmbedInteractiveExample("pages/css/position.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +```css +position: static; +position: relative; +position: absolute; +position: fixed; +position: sticky; -<p><code>position</code> プロパティは以下のキーワード値、グローバル値から１つを指定します。</p> +/* グローバル値 */ +position: inherit; +position: initial; +position: revert; +position: unset; +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt id="static"><code>static</code></dt> - <dd>要素は文書の通常のフローに従って配置されます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} プロパティは<em>効果がありません</em>。これが既定値です。</dd> - <dt id="relative"><code>relative</code></dt> - <dd>要素は文書の通常のフローに従って配置され、 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値に基づいて<em>自分自身からの相対</em>オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が <code>static</code> であった時と同じです。</dd> - <dd><code>z-index</code> の値が <code>auto</code> でない場合、新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。 <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, <code>table-caption</code> の要素における効果は未定義です。</dd> - <dt id="absolute"><code>absolute</code></dt> - <dd>要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>に対して相対配置されます。最終的な位置は <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値によって決定されます。</dd> - <dd>この値では、 <code>z-index</code> の値が <code>auto</code> ではない場合、新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">相殺</a>されません。</dd> - <dt id="fixed"><code>fixed</code></dt> - <dd>要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。{{glossary("viewport", "ビューポート")}}によって定められた初期の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>に対して相対配置されますが、祖先の一つに <code>transform</code>, <code>perspective</code>, <code>filter</code> の何れかのプロパティが <code>none</code> 以外 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している <code>perspective</code> と <code>filter</code> に矛盾のあるブラウザーがあります。) 最終的な位置は <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値によって決定されます。</dd> - <dd>この値は、常に新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作成します。印刷文書の場合、要素は<em>各ページ</em>の同じ位置に配置されます。</dd> - <dt id="sticky"><code>sticky</code></dt> - <dd>要素は文書の通常のフローに従って配置され、<em>直近のスクロールする祖先</em>および<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a> (直近のブロックレベル祖先、表関連要素を含む) に対して <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。</dd> - <dd>この値は、常に新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (<code>overflow</code> が <code>hidden</code>, <code>scroll</code>, <code>auto</code>, <code>overlay</code> として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (<a href="https://github.com/w3c/csswg-drafts/issues/865">GitHub issue on W3C CSSWG</a> を参照)。</dd> -</dl> +- `static` + - : 要素は文書の通常のフローに従って配置されます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} プロパティは*効果がありません*。これが既定値です。 +- `relative` + + - : 要素は文書の通常のフローに従って配置され、 `top`, `right`, `bottom`, `left` の値に基づいて*自分自身からの相対*オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が `static` であった時と同じです。 + + `z-index` の値が `auto` でない場合、新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。 `table-*-group`, `table-row`, `table-column`, `table-cell`, `table-caption` の要素における効果は未定義です。 + +- `absolute` + + - : 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の[包含ブロック](/ja/docs/Web/CSS/Containing_block)に対して相対配置されます。最終的な位置は `top`, `right`, `bottom`, `left` の値によって決定されます。 + + この値では、 `z-index` の値が `auto` ではない場合、新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと[相殺](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)されません。 + +- `fixed` + + - : 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。{{glossary("viewport", "ビューポート")}}によって定められた初期の[包含ブロック](/ja/docs/Web/CSS/Containing_block)に対して相対配置されますが、祖先の一つに `transform`, `perspective`, `filter` の何れかのプロパティが `none` 以外 ([CSS Transforms 仕様書](https://www.w3.org/TR/css-transforms-1/#propdef-transform)を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している `perspective` と `filter` に矛盾のあるブラウザーがあります。) 最終的な位置は `top`, `right`, `bottom`, `left` の値によって決定されます。 -<h2 id="Description" name="Description">解説</h2> + この値は、常に新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を作成します。印刷文書の場合、要素は*各ページ*の同じ位置に配置されます。 -<h3 id="Types_of_positioning" name="Types_of_positioning">位置の種類</h3> +- `sticky` -<ul> - <li><ruby><strong>位置指定要素</strong><rp> (</rp><rt>positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code> のいずれかである要素です。 (言い換えれば、 <code>static</code> 以外の全てです。)</li> - <li><ruby><strong>相対位置指定要素</strong><rp> (</rp><rt>relatively positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>relative</code> である要素です。 {{Cssxref("top")}} および {{Cssxref("bottom")}} プロパティは、通常の位置からの垂直方向のオフセットを指定します。 {{Cssxref("left")}} および {{Cssxref("right")}} プロパティは、水平方向のオフセットを指定します。</li> - <li><ruby><strong>絶対位置指定要素</strong><rp> (</rp><rt>absolutely positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>absolute</code> または <code>fixed</code> である要素です。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティは、この要素の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>の端からのオフセットを指定します。 (包含ブロックは配置される要素の祖先です。) 要素にマージンがある場合は、オフセットにマージンが追加されます。この要素は内容のために新しい <a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a> (BFC) を生成します。</li> - <li><ruby><strong>粘着位置指定要素</strong><rp> (</rp><rt>stickily positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>sticky</code> である要素です。これは<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>がフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば {{Cssxref("top")}} に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>の反対の端が来るまでその位置に「粘着」するものとして扱われます。</li> -</ul> + - : 要素は文書の通常のフローに従って配置され、*直近のスクロールする祖先*および[包含ブロック](/ja/docs/Web/CSS/Containing_block) (直近のブロックレベル祖先、表関連要素を含む) に対して `top`, `right`, `bottom`, `left` の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。 -<p>ほとんどの場合、絶対位置指定要素に {{Cssxref("height")}} および {{Cssxref("width")}} が <code>auto</code> が設定されると、内容に合うように大きさが調整されます。しかし、非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a>要素で絶対位置指定要素は、 {{Cssxref("top")}} および {{Cssxref("bottom")}} を指定して {{Cssxref("height")}} を指定しない (つまり <code>auto</code> の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 {{Cssxref("left")}} および {{Cssxref("right")}} を指定して {{Cssxref("width")}} を <code>auto</code> のままにすることで、利用できる水平の空間を埋めることができます。</p> + この値は、常に新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (`overflow` が `hidden`, `scroll`, `auto`, `overlay` として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します ([GitHub issue on W3C CSSWG](https://github.com/w3c/csswg-drafts/issues/865) を参照)。 -<p>以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。</p> +## 解説 -<ul> - <li><code>top</code> と <code>bottom</code> の両方を指定すると (<code>auto</code>ではなく)、 <code>top</code> が優先されます。</li> - <li><code>left</code> と <code>right</code> の両方を指定すると、 {{Cssxref("direction")}} が <code>ltr</code> (英語、横書き日本語、など) の場合は <code>left</code> が優先され、 {{Cssxref("direction")}} が <code>rtl</code> (ペルシャ語、アラビア語、ヘブライ語、 など)の場合は <code>right</code> が優先されます。</li> -</ul> +<h3 id="Types_of_positioning">位置の種類</h3> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> +- **位置指定要素** (positioned element) とは、 `position` の[計算値](/ja/docs/Web/CSS/computed_value)が `relative`, `absolute`, `fixed`, `sticky` のいずれかである要素です。 (言い換えれば、 `static` 以外の全てです。) +- **相対位置指定要素** (relatively positioned element) とは、 `position` の[計算値](/ja/docs/Web/CSS/computed_value)が `relative` である要素です。 {{Cssxref("top")}} および {{Cssxref("bottom")}} プロパティは、通常の位置からの垂直方向のオフセットを指定します。 {{Cssxref("left")}} および {{Cssxref("right")}} プロパティは、水平方向のオフセットを指定します。 +- **絶対位置指定要素** (absolutely positioned element) とは、 `position` の[計算値](/ja/docs/Web/CSS/computed_value)が `absolute` または `fixed` である要素です。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティは、この要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)の端からのオフセットを指定します。 (包含ブロックは配置される要素の祖先です。) 要素にマージンがある場合は、オフセットにマージンが追加されます。この要素は内容のために新しい [ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context) (BFC) を生成します。 +- **粘着位置指定要素** (stickily positioned element) とは、 `position` の[計算値](/ja/docs/Web/CSS/computed_value)が `sticky` である要素です。これは[包含ブロック](/ja/docs/Web/CSS/Containing_block)がフロールート (またはその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば {{Cssxref("top")}} に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、[包含ブロック](/ja/docs/Web/CSS/Containing_block)の反対の端が来るまでその位置に「粘着」するものとして扱われます。 -<p><code>absolute</code> または <code>fixed</code> の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。</p> +ほとんどの場合、絶対位置指定要素に {{Cssxref("height")}} および {{Cssxref("width")}} が `auto` が設定されると、内容に合うように大きさが調整されます。しかし、非[置換](/ja/docs/Web/CSS/Replaced_element)要素で絶対位置指定要素は、 {{Cssxref("top")}} および {{Cssxref("bottom")}} を指定して {{Cssxref("height")}} を指定しない (つまり `auto` の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 {{Cssxref("left")}} および {{Cssxref("right")}} を指定して {{Cssxref("width")}} を `auto` のままにすることで、利用できる水平の空間を埋めることができます。 -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li> -</ul> +以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。 -<h3 id="パフォーマンスとアクセシビリティ">パフォーマンスとアクセシビリティ</h3> +- `top` と `bottom` の両方を指定すると (`auto`ではなく)、 `top` が優先されます。 +- `left` と `right` の両方を指定すると、 {{Cssxref("direction")}} が `ltr` (英語、横書き日本語、など) の場合は `left` が優先され、 {{Cssxref("direction")}} が `rtl` (ペルシャ語、アラビア語、ヘブライ語、 など)の場合は `right` が優先されます。 -<p><code>fixed</code> または <code>sticky</code> を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 <abbr title="frames per second">fps</abbr> で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置配置要素に {{cssxref("will-change", "will-change: transform")}} を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。</p> +## アクセシビリティの考慮 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +`absolute` または `fixed` の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。 -<p>{{cssinfo}}</p> +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +### パフォーマンスとアクセシビリティ + +`fixed` または `sticky` を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 fps で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置指定要素に {{cssxref("will-change", "will-change: transform")}} を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3> +<h3 id="Relative_positioning">相対位置指定</h3> -<p>相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。</p> +相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="box" id="one">One</div> -<div class="box" id="two">Two</div> -<div class="box" id="three">Three</div> -<div class="box" id="four">Four</div> -</pre> +```html +<div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">* { +```css +* { box-sizing: border-box; } @@ -115,29 +131,32 @@ translation_of: Web/CSS/position left: 20px; background: blue; } -</pre> +``` -<p>{{EmbedLiveSample('Relative_positioning', '', '200px')}}</p> +{{EmbedLiveSample('Relative_positioning', '', '200px')}} -<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3> +<h3 id="Absolute_positioning">絶対位置指定</h3> -<p>相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は<em>配置された直近の祖先</em> (つまり、 <code>static</code> ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">W3C の定義</a>も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。</p> +相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は*配置された直近の祖先* (つまり、 `static` ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — [W3C の定義](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。 -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +```html +<h1>Absolute positioning</h1> -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> -<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">* { +```css +* { box-sizing: border-box; } @@ -163,20 +182,22 @@ span { background: yellow; top: 30px; left: 30px; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Absolute_positioning', '', '420px')}}</p> +{{EmbedLiveSample('Absolute_positioning', '', '420px')}} -<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3> +<h3 id="Fixed_positioning">固定位置指定</h3> -<p>固定位置指定は絶対位置指定に似ていますが、要素の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>が<em>ビューポート</em>によって定義される初期包含ブロックであるという点が異なり、祖先の一つに <code>transform</code>, <code>perspective</code>, <code>filter</code> の何れかのプロパティが <code>none</code> 以外 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> を参照) に設定されている場合は例外で、その場合は祖先が<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>としてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。</p> +固定位置指定は絶対位置指定に似ていますが、要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)が*ビューポート*によって定義される初期包含ブロックであるという点が異なり、祖先の一つに `transform`, `perspective`, `filter` の何れかのプロパティが `none` 以外 ([CSS Transforms Spec](https://www.w3.org/TR/css-transforms-1/#propdef-transform) を参照) に設定されている場合は例外で、その場合は祖先が[包含ブロック](/ja/docs/Web/CSS/Containing_block)としてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。 -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="outer"> - <p> +```html +<div class="outer"> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. @@ -184,8 +205,8 @@ span { Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <p> + </p> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. @@ -193,14 +214,15 @@ span { Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <div class="box" id="one">One</div> -</div> -</pre> + </p> + <div class="box" id="one">One</div> +</div> +``` -<h4 id="CSS_3">CSS</h4> +#### CSS -<pre class="brush: css notranslate">* { +```css +* { box-sizing: border-box; } @@ -224,65 +246,69 @@ span { overflow: scroll; padding-left: 150px; } -</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample('Fixed_positioning', '', '300px')}}</p> - -<h3 id="Sticky_positioning" name="Sticky_positioning">粘着位置指定</h3> - -<p>粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば・・・</p> - -<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre> - -<p>例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。</p> - -<p>粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。</p> - -<p>粘着位置指定を想定したとおりに動作させるためには、 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。</p> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html notranslate"><dl> - <div> - <dt>A</dt> - <dd>Andrew W.K.</dd> - <dd>Apparat</dd> - <dd>Arcade Fire</dd> - <dd>At The Drive-In</dd> - <dd>Aziz Ansari</dd> - </div> - <div> - <dt>C</dt> - <dd>Chromeo</dd> - <dd>Common</dd> - <dd>Converge</dd> - <dd>Crystal Castles</dd> - <dd>Cursive</dd> - </div> - <div> - <dt>E</dt> - <dd>Explosions In The Sky</dd> - </div> - <div> - <dt>T</dt> - <dd>Ted Leo &amp; The Pharmacists</dd> - <dd>T-Pain</dd> - <dd>Thrice</dd> - <dd>TV On The Radio</dd> - <dd>Two Gallants</dd> - </div> -</dl> -</pre> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css notranslate">* { +``` + +#### 結果 + +{{EmbedLiveSample('Fixed_positioning', '', '300px')}} + +<h3 id="Sticky_positioning">粘着位置指定</h3> + +粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば・・・ + +```css +#one { position: sticky; top: 10px; } +``` + +例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。 + +粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。 + +粘着位置指定を想定したとおりに動作させるためには、 `top`, `right`, `bottom`, `left` のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。 + +#### HTML + +```html +<dl> + <div> + <dt>A</dt> + <dd>Andrew W.K.</dd> + <dd>Apparat</dd> + <dd>Arcade Fire</dd> + <dd>At The Drive-In</dd> + <dd>Aziz Ansari</dd> + </div> + <div> + <dt>C</dt> + <dd>Chromeo</dd> + <dd>Common</dd> + <dd>Converge</dd> + <dd>Crystal Castles</dd> + <dd>Cursive</dd> + </div> + <div> + <dt>E</dt> + <dd>Explosions In The Sky</dd> + </div> + <div> + <dt>T</dt> + <dd>Ted Leo & The Pharmacists</dd> + <dd>T-Pain</dd> + <dd>Thrice</dd> + <dd>TV On The Radio</dd> + <dd>Two Gallants</dd> + </div> +</dl> +``` + +#### CSS + +```css +* { box-sizing: border-box; } -dl > div { +dl > div { background: #FFF; padding: 24px 0 0 0; } @@ -310,36 +336,20 @@ dd { dd + dd { border-top: 1px solid #CCC; } -</pre> - -<h4 id="結果">結果</h4> - -<p>{{EmbedLiveSample('Sticky_positioning', '', '300px')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> - <td>{{Spec2('CSS3 Positioning')}}</td> - <td><code>sticky</code> 値を追加。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.position")}}</p> +``` + +#### 結果 + +{{EmbedLiveSample('Sticky_positioning', '', '300px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS を学ぶ: 位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning) diff --git a/files/ja/web/css/right/index.md b/files/ja/web/css/right/index.md index 91156b300d..c71b524781 100644 --- a/files/ja/web/css/right/index.md +++ b/files/ja/web/css/right/index.md @@ -3,38 +3,29 @@ title: right slug: Web/CSS/right tags: - CSS - - CSS プロパティ - CSS 位置指定レイアウト - - Reference + - CSS プロパティ + - レイアウト + - リファレンス - ウェブ + - recipe:css-property +browser-compat: css.properties.right translation_of: Web/CSS/right --- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>right</code></strong> プロパティは、<ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby>の水平位置の決定に関与します。位置指定されていない要素には効果はありません。</p> - -<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div> - -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p><code>right</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p> +{{CSSRef}} -<ul> - <li><code>position</code> が <code>absolute</code> 又は <code>fixed</code> に設定されている場合、 <code>right</code> プロパティは要素の右辺と包含ブロックの右辺との間の距離を指定します。</li> - <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>right</code> プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。</li> - <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>right</code> プロパティは要素がビューポート内にある場合は <code>position</code> が <code>relative</code> であるかのように、外の場合は <code>position</code> が <code>fixed</code> の場合と同様に動作します。</li> - <li><code>position</code> が <code>static</code> に設定されている場合、 <code>right</code> プロパティは<em>効果がありません</em>。</li> -</ul> +**`right`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[位置指定要素](/ja/docs/Web/CSS/position)の水平位置の決定に関与します。位置指定されていない要素には効果はありません。 -<p>{{cssxref("left")}} と <code>right</code> の両方が定義された場合、要素の位置は<em>過剰指定</em>になります。内包ブロックが左書きの場合 (つまり、 <code>right</code> の計算値が <code>-left</code> に設定されていた場合)、 <code>left</code> の値が優先されます。内包ブロックが右書きの場合 (つまり、 <code>left</code> の計算値が <code>-right</code> に設定されていた場合)、 <code>right</code> の値が優先されます。</p> +{{EmbedInteractiveExample("pages/css/right.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ right: 3px; right: 2.4em; -/* 内包ブロックの幅に対する <percentage> */ +/* 包含ブロックの幅に対する <percentage> */ right: 10%; /* キーワード値 */ @@ -43,39 +34,65 @@ right: auto; /* グローバル値 */ right: inherit; right: initial; +right: revert; right: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 - <ul> - <li><em>絶対位置指定要素</em>の場合は、包含ブロックの右辺までの距離。</li> - <li><em>相対位置指定要素</em>の場合は、通常の位置からの左方向への移動量。</li> - </ul> - </dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>包含ブロックの幅に対する {{cssxref("<percentage>")}} です。</dd> - <dt><code>auto</code></dt> - <dd>以下のように指定します。 - <ul> - <li><em>絶対位置指定要素</em>では、要素の位置は {{Cssxref("left")}} プロパティに基づいて決まり、 <code>width: auto</code> は内容物の幅に基づいて決まります。また、 <code>left</code> も <code>auto</code> であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。</li> - <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("left")}} に基づきます。また、 <code>left</code> も <code>auto</code> であった場合は、水平方向には移動しません。</li> - </ul> - </dd> - <dt><code>inherit</code></dt> - <dd>値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 又は <code>auto</code> キーワードと同様に扱われます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +### 値 + +- {{cssxref("<length>")}} + + - : 負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 + + - *絶対位置指定要素*の場合は、包含ブロックの右辺までの距離。 + - *相対位置指定要素*の場合は、通常の位置からの左方向への移動量。 + +- {{cssxref("<percentage>")}} + - : 包含ブロックの幅に対する {{cssxref("<percentage>")}} です。 +- `auto` + + - : 以下のように指定します。 + + - *絶対位置指定要素*では、要素の位置は {{Cssxref("left")}} プロパティに基づいて決まり、 `width: auto` は内容物の幅に基づいて決まります。また、 `left` も `auto` であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。 + - *相対位置指定要素*では、通常の位置から要素までの距離は {{Cssxref("left")}} に基づきます。また、 `left` も `auto` であった場合は、水平方向には移動しません。 + +- `inherit` + - : 値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または `auto` キーワードと同様に扱われます。 + +## 解説 + +`right` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。 + +- `position` が `absolute` または `fixed` に設定されている場合、 `right` プロパティは要素の右辺と包含ブロックの右辺との間の距離を指定します。 +- `position` が `relative` に設定されている場合、 `right` プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。 +- `position` が `sticky` に設定されている場合、 `right` プロパティは要素がビューポート内にある場合は `position` が `relative` であるかのように、外の場合は `position` が `fixed` の場合と同様に動作します。 +- `position` が `static` に設定されている場合、 `right` プロパティは*効果がありません*。 + +{{cssxref("left")}} と `right` の両方が定義された場合、他のプロパティで制約されていなければ、要素は両方を満たすように引き伸ばされます。もし要素が両方を満たすように伸びることができない場合 -- 例えば `width` が宣言されている場合 -- 要素の位置は*過剰制約*になります。このような場合、コンテナーが左書きの場合は `left` の値が優先され、コンテナーが右書きの場合は `right` の値が優先されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +<h3 id="Absolute_and_relative_positioning_using_right">絶対位置指定および相対位置指定で right を使用</h3> + +#### HTML -<pre class="brush: css; highlight:[16]">#example_3 { +```html +<div id="relative">Relatively positioned</div> +<div id="absolute">Absolutely positioned</div> +``` + +#### CSS + +```css +#relative { width: 100px; height: 100px; background-color: #FFC7E4; @@ -84,58 +101,74 @@ right: unset; left: 20px; } -#example_4 { +#absolute { width: 100px; height: 100px; background-color: #FFD7C2; position: absolute; bottom: 10px; right: 20px; -}</pre> - -<pre class="brush: html"><div id="example_3">Example 3</div> -<div id="example_4">Example 4</div> -</pre> - -<p>{{ EmbedLiveSample('Examples', 500, 220) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td><code>right</code> をアニメーション可能として定義</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td> - <td>{{Spec2('CSS3 Positioning')}}</td> - <td>sticky の位置の動作を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.right")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li> -</ul> +} +``` + +#### 結果 + +{{ EmbedLiveSample('Absolute_and_relative_positioning_using_right', 500, 220) }} + +<h3 id="Declaring_both_left_and_right">left と right の同時指定</h3> + +`left` と `right` の両方が宣言されている場合、他の制約条件がそれを妨げない限り、要素は両方を満たすように伸びます。要素が両方を満たすように伸びたり縮んだりしない場合、要素の位置が*過剰指定*のとなり、コンテナーの書字方向に基づいて優先順位が決まります。コンテナーの書字方向が左書きであれば、`left` が優先されます。コンテナーの書字方向が右書きの場合は、`right` が優先されます。 + +#### HTML + +```html +<div id="parent">Parent + <div id="noWidth">No width</div> + <div id="width">width: 100px</div> +</div> +``` + +#### CSS + +```css +div { + outline: 1px solid #CCCCCC; +} +#parent { + width: 200px; + height: 200px; + background-color: #FFC7E4; + position: relative; +} +/* declare both a left and a right */ +#width, +#noWidth { + background-color: #C2FFD7; + position: absolute; + left: 0; + right: 0; +} +/* declare a width */ +#width { + width: 100px; + top: 60px; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Declaring_both_left_and_right', 500, 220) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("inset")}}: 関連するすべてのプロパティである {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} の一括指定 +- 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}} +- {{cssxref("position")}} diff --git a/files/ja/web/css/top/index.md b/files/ja/web/css/top/index.md index c6ff6fb4bc..87b3c530cd 100644 --- a/files/ja/web/css/top/index.md +++ b/files/ja/web/css/top/index.md @@ -3,38 +3,36 @@ title: top slug: Web/CSS/top tags: - CSS - - CSS Positioning - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 位置指定レイアウト + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.top translation_of: Web/CSS/top --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>top</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、<ruby><a href="/ja/docs/Web/CSS/position">位置指定要素</a><rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby>の垂直位置の決定に関与します。位置指定されていない要素には効果はありません。</p> +**`top`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[位置指定要素](/ja/docs/Web/CSS/position)の垂直位置の決定に関与します。位置指定されていない要素には効果はありません。 -<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div> +{{EmbedInteractiveExample("pages/css/top.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +`top` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。 -<p><code>top</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p> +- `position` が `absolute` または `fixed` に設定されている場合、 `top` プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。 +- `position` が `relative` に設定されている場合、 `top` プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。 +- `position` が `sticky` に設定されている場合、 `top` プロパティは粘着制約矩形の計算に使用されます。 +- `position` が `static` に設定されている場合、 `top` プロパティは*効果がありません*。 -<ul> - <li><code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されている場合、 <code>top</code> プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。</li> - <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>top</code> プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。</li> - <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>top</code> プロパティは粘着制約矩形の計算に使用されます。</li> - <li><code>position</code> が <code>static</code> に設定されている場合、 <code>top</code> プロパティは<em>効果がありません</em>。</li> -</ul> +`top` と {{cssxref("bottom")}} の両方が指定されており、 `position` が `absolute` または `fixed` に設定されており、*かつ* {{cssxref("height")}} が未指定 (`auto` または `100%` のどちらか) の場合は、 `top` と `bottom` の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または `position` が `relative` に設定されていた場合は、 `top` プロパティが優先されて `bottom` プロパティは無視されます。 -<p><code>top</code> と {{cssxref("bottom")}} の両方が指定されており、 <code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されており、<em>かつ</em> {{cssxref("height")}} が未指定 (<code>auto</code> または <code>100%</code> のどちらか) の場合は、 <code>top</code> と <code>bottom</code> の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または <code>position</code> が <code>relative</code> に設定されていた場合は、 <code>top</code> プロパティが優先されて <code>bottom</code> プロパティは無視されます。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ top: 3px; top: 2.4em; -/* 包含ブロックの高さに対する <percentage> */ +/* 包含ブロックの高さに対する <percentage> */ top: 10%; /* キーワード値 */ @@ -43,43 +41,45 @@ top: auto; /* グローバル値 */ top: inherit; top: initial; +top: revert; top: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 - <ul> - <li><em>絶対位置指定要素</em>の場合は、包含ブロックの上辺までの距離。</li> - <li><em>相対位置指定要素</em>の場合は、通常の位置からの下方向への移動量。</li> - </ul> - </dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>包含ブロックの高さに対する {{cssxref("<percentage>")}} です。</dd> - <dt><code>auto</code></dt> - <dd>以下のように指定します。 - <ul> - <li><em>絶対位置指定要素</em>では、要素の位置は {{Cssxref("bottom")}} プロパティに基づいて決まり、 <code>height: auto</code> は内容物の高さに基づいて決まります。また、 <code>bottom</code> も <code>auto</code> であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。</li> - <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("bottom")}} に基づきます。また、 <code>bottom</code> も <code>auto</code> であった場合は、垂直方向には移動しません。</li> - </ul> - </dd> - <dt><code>inherit</code></dt> - <dd>値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または <code>auto</code> キーワードと同様に扱われます。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + +### 値 + +- {{cssxref("<length>")}} + + - : 負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 + + - *絶対位置指定要素*の場合は、包含ブロックの上辺までの距離。 + - *相対位置指定要素*の場合は、通常の位置からの下方向への移動量。 + +- {{cssxref("<percentage>")}} + - : 包含ブロックの高さに対する {{cssxref("<percentage>")}} です。 +- `auto` + + - : 以下のように指定します。 + + - *絶対位置指定要素*では、要素の位置は {{Cssxref("bottom")}} プロパティに基づいて決まり、 `height: auto` は内容物の高さに基づいて決まります。また、 `bottom` も `auto` であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。 + - *相対位置指定要素*では、通常の位置から要素までの距離は {{Cssxref("bottom")}} に基づきます。また、 `bottom` も `auto` であった場合は、垂直方向には移動しません。 + +- `inherit` + - : 値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または `auto` キーワードと同様に扱われます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +### 位置指定要素を上から 10% に設定 -<pre class="brush: css notranslate">body { +```css +body { background: beige; } @@ -91,44 +91,25 @@ div { left: 15%; background: gold; border: 1px solid blue; -}</pre> - -<pre class="brush: html notranslate"><div>この内容の寸法は、辺の位置によって決まります。</div></pre> - -<p>{{EmbedLiveSample('Examples','100%','200')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}</td> - <td>{{Spec2('CSS3 Positioning')}}</td> - <td>sticky の位置の動作を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.top")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("inset")}} は関連する {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} プロパティすべての一括指定です</li> - <li>対応する論理プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}</li> - <li>{{cssxref("position")}}</li> -</ul> +} +``` + +```html +<div>この内容の寸法は、辺の位置によって決まります。</div> +``` + +{{EmbedLiveSample('Examples','100%','200')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("inset")}}: 関連するすべてのプロパティである {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} の一括指定 +- 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}} +- {{cssxref("position")}} diff --git a/files/ja/web/css/z-index/index.md b/files/ja/web/css/z-index/index.md index 18fc3d358e..a1da869e47 100644 --- a/files/ja/web/css/z-index/index.md +++ b/files/ja/web/css/z-index/index.md @@ -3,71 +3,82 @@ title: z-index slug: Web/CSS/z-index tags: - CSS - - CSS プロパティ - CSS 位置指定レイアウト - - Reference + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.z-index translation_of: Web/CSS/z-index --- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>z-index</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/position">位置指定</a>要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> +**`z-index`** は CSS のプロパティで、[位置指定](/ja/docs/Web/CSS/position)要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/z-index.html")}} -<p>位置指定されたボックス (つまり、 <code>position</code> が <code>static</code> 以外のもの) では、 <code>z-index</code> プロパティが以下のことを定義します。</p> +位置指定されたボックス (つまり、`position` が `static` 以外のもの) では、`z-index` プロパティが以下のことを定義します。 -<ol> - <li>現在の<a href="/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>におけるボックスの重ね合わせレベル</li> - <li>ボックスがローカルな重ね合わせコンテキストを作るかどうか</li> -</ol> +1. 現在の[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)におけるボックスの重ね合わせレベル +2. ボックスがローカルな重ね合わせコンテキストを作るかどうか -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ z-index: auto; -/* <integer> 値 */ +/* <integer> 値 */ z-index: 0; z-index: 3; z-index: 289; -z-index: -1; /* 負の数は優先度を下げる */ +z-index: -1; /* 負の数はより低い優先度になる */ /* グローバル値 */ z-index: inherit; z-index: initial; +z-index: revert; z-index: unset; -</pre> +``` + +`z-index` プロパティは、キーワード `auto` または `<integer>` のどちらかで指定します。 + +### 値 -<p><code>z-index</code> プロパティは、キーワード <code><a href="#auto">auto</a></code> 又は <code><a href="#<integer>"><integer></a></code> のどちらかで指定します。</p> +- `auto` + - : ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。 +- `<integer>` + - : この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル `0` のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> - <dd>ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。</dd> - <dt><a id="<integer>" name="<integer>"><code><integer></code></a></dt> - <dd>この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル <code>0</code> のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。</dd> -</dl> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式定義 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Visually_layering_elements">視覚的な階層を持つ要素</h3> -<pre class="brush: html"><div class="dashed-box">Dashed box - <span class="gold-box">Gold box</span> - <span class="green-box">Green box</span> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div class="wrapper"> + <div class="dashed-box">Dashed box</div> + <div class="gold-box">Gold box</div> + <div class="green-box">Green box</div> +</div> +``` + +#### CSS + +```css +.wrapper { + position: relative; +} -<pre class="brush: css; highlight:[3,11,19]">.dashed-box { +.dashed-box { position: relative; z-index: 1; border: dashed; @@ -93,45 +104,21 @@ z-index: unset; height: 7em; opacity: 0.9; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td><code>z-index</code> をアニメーション可能として定義</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.z-index")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>CSS {{Cssxref("position")}} プロパティ</li> - <li><a href="/ja/docs/Web/CSS/Understanding_z-index">CSS の z-index の理解</a></li> -</ul> +``` + +#### 結果 + +{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS {{Cssxref("position")}} プロパティ +- [CSS の z-index を理解する](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index) |