2021/08/13 時点の英語版に同期

1 files changed, 38 insertions, 44 deletions

diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.md b/files/ja/web/css/layout_cookbook/sticky_footers/index.md
index 07ce9b5e34..6ffdcfabd3 100644
--- a/files/ja/web/css/layout_cookbook/sticky_footers/index.md
+++ b/files/ja/web/css/layout_cookbook/sticky_footers/index.md
@@ -1,77 +1,71 @@
 ---
-title: 固定フッター
+title: 張りつくフッター
 slug: Web/CSS/Layout_cookbook/Sticky_footers
 tags:
   - CSS
-  - Guide
-  - Layout
-  - cookbook
-  - flexbox
-  - grid
-  - sticky footer
+  - ガイド
+  - レイアウト
+  - 料理帳
+  - フレックスボックス
+  - グリッド
+  - 張りつくフッター
 translation_of: Web/CSS/Layout_cookbook/Sticky_footers
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary"><span class="seoSummary">固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。</span></p>
+張りつくフッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「張りつく」パターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。
 
-<p><img alt="ボックスの底に押し込まれた張り付くフッター" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+![ボックスの底に押し込まれた張りつくフッター](https://mdn.mozillademos.org/files/16184/cookbook-footer.png)
 
-<h2 id="Requirements" name="Requirements">要件</h2>
+## 要件
 
-<p>固定フッターのパターンは、次の要件を満たす必要があります。</p>
+張りつくフッターのパターンは、次の要件を満たす必要があります。
 
-<ul>
- <li>コンテンツが短い場合、フッターはビューポートの下部に固定されます。</li>
- <li>ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。</li>
-</ul>
+- コンテンツが短い場合、フッターはビューポートの下部に張りつきます。
+- ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。
 
-<h2 id="The_recipe" name="The_recipe">レシピ</h2>
+## レシピ
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}
 
-<div class="note">
-<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">この例をダウンロードする</a></p>
-</div>
+> **Callout:**
+>
+> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html)
 
-<div class="note">
-<p><strong>注</strong>: この例と以下の例では、ライブ例がうまくいくように、<code>min-height: 100%</code> に設定された <code>wrapper</code> を使用しています。 また、{{htmlelement("body")}} で {{cssxref("min-height")}} を <code>100vh</code> に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。</p>
-</div>
+> **Note:** この例と以下の例では、ライブ例がうまくいくように、 wrapper に `min-height: 100%` に設定して使用しています。 また、{{htmlelement("body")}} の {{cssxref("min-height")}} を `100vh` に設定し、それをグリッドコンテナーとして使用することで、ページ全体でこれを実現することもできます。
 
-<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+## 行った選択
 
-<p>上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 <code>.wrapper</code> の最小の高さは <code>100%</code> です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。</p>
+上記の例では、CSS グリッドレイアウトを使用して張りつくフッターを実現しています。 `.wrapper` の最小の高さは `100%` です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。
 
-<p>グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは <code>1fr</code> トラックに、フッターは最後の自動サイズ調整トラックに入ります。<code>1fr</code> トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。</p>
+グリッドの自動配置では、アイテムがソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは `1fr` トラックに、フッターは最後の自動サイズ調整トラックに入ります。`1fr` トラックは使用可能な空間をすべて占有するため、隙間を埋めるように大きくなります。
 
-<h2 id="Alternate_method" name="Alternate_method">代替方法</h2>
+## 代替策
 
-<p>グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。</p>
+グリッドレイアウトに対応していないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して張りつくフッターを作成することもできます。
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}
 
-<p>フレックスボックスの例は同じように始まりますが、<code>.wrapper</code> では <code>display: grid</code> ではなく <code>display: flex</code> を使用し、<code>flex-direction</code> を <code>column</code> に設定します。次に、メインコンテンツを <code>flex-grow: 1</code> に設定し、他の2つの要素を <code>flex-shrink: 0</code> に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。</p>
+フレックスボックスの例は同じように始まりますが、`.wrapper` では `display: grid` ではなく `display: flex` を使用し、`flex-direction` を `column` に設定します。次に、メインコンテンツを `flex-grow: 1` に設定し、他の 2 つの要素を `flex-shrink: 0` に設定します。これにより、コンテンツがメイン領域いっぱいになったときに、それらが縮小されるのを防ぎます。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+## ブラウザーの互換性
 
-<h4 id="grid-template-rows" name="grid-template-rows">grid-template-rows</h4>
+#### grid-template-rows
 
-<p>{{Compat("css.properties.grid-template-rows")}}</p>
+{{Compat("css.properties.grid-template-rows")}}
 
-<h4 id="flex-direction" name="flex-direction">flex-direction</h4>
+#### flex-direction
 
-<p>{{Compat("css.properties.flex-direction")}}</p>
+{{Compat("css.properties.flex-direction")}}
 
-<h4 id="flex-grow" name="flex-grow">flex-grow</h4>
+#### flex-grow
 
-<p>{{Compat("css.properties.flex-grow")}}</p>
+{{Compat("css.properties.flex-grow")}}
 
-<h4 id="flex-shrink" name="flex-shrink">flex-shrink</h4>
+#### flex-shrink
 
-<p>{{Compat("css.properties.flex-shrink")}}</p>
+{{Compat("css.properties.flex-shrink")}}
 
-<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
+## MDN の関連資料
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
-</ul>
+- [グリッドレイアウトの基本概念](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)