From a271f179028fedd7cc33a44a8bac3913bbc6c12f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 23 Dec 2021 23:32:28 +0900 Subject: Web/CSS/Layout_cookbook 以下の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/layout_cookbook/sticky_footers/index.html | 77 ---------------------- .../css/layout_cookbook/sticky_footers/index.md | 77 ++++++++++++++++++++++ 2 files changed, 77 insertions(+), 77 deletions(-) delete mode 100644 files/ja/web/css/layout_cookbook/sticky_footers/index.html create mode 100644 files/ja/web/css/layout_cookbook/sticky_footers/index.md (limited to 'files/ja/web/css/layout_cookbook/sticky_footers') diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.html b/files/ja/web/css/layout_cookbook/sticky_footers/index.html deleted file mode 100644 index 07ce9b5e34..0000000000 --- a/files/ja/web/css/layout_cookbook/sticky_footers/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -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 ---- -
{{CSSRef}}
- -

固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。

- -

ボックスの底に押し込まれた張り付くフッター

- -

要件

- -

固定フッターのパターンは、次の要件を満たす必要があります。

- - - -

レシピ

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

- -
-

この例をダウンロードする

-
- -
-

注: この例と以下の例では、ライブ例がうまくいくように、min-height: 100% に設定された wrapper を使用しています。 また、{{htmlelement("body")}} で {{cssxref("min-height")}} を 100vh に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。

-
- -

行った選択

- -

上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 .wrapper の最小の高さは 100% です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。

- -

グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは 1fr トラックに、フッターは最後の自動サイズ調整トラックに入ります。1fr トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。

- -

代替方法

- -

グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

- -

フレックスボックスの例は同じように始まりますが、.wrapper では display: grid ではなく display: flex を使用し、flex-direction を column に設定します。次に、メインコンテンツを flex-grow: 1 に設定し、他の2つの要素を flex-shrink: 0 に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。

- -

ブラウザー実装状況

- -

grid-template-rows

- -

{{Compat("css.properties.grid-template-rows")}}

- -

flex-direction

- -

{{Compat("css.properties.flex-direction")}}

- -

flex-grow

- -

{{Compat("css.properties.flex-grow")}}

- -

flex-shrink

- -

{{Compat("css.properties.flex-shrink")}}

- -

MDN にある資料

- - diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.md b/files/ja/web/css/layout_cookbook/sticky_footers/index.md new file mode 100644 index 0000000000..07ce9b5e34 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/sticky_footers/index.md @@ -0,0 +1,77 @@ +--- +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 +--- +
{{CSSRef}}
+ +

固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。

+ +

ボックスの底に押し込まれた張り付くフッター

+ +

要件

+ +

固定フッターのパターンは、次の要件を満たす必要があります。

+ + + +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +
+

注: この例と以下の例では、ライブ例がうまくいくように、min-height: 100% に設定された wrapper を使用しています。 また、{{htmlelement("body")}} で {{cssxref("min-height")}} を 100vh に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。

+
+ +

行った選択

+ +

上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 .wrapper の最小の高さは 100% です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。

+ +

グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは 1fr トラックに、フッターは最後の自動サイズ調整トラックに入ります。1fr トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。

+ +

代替方法

+ +

グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

フレックスボックスの例は同じように始まりますが、.wrapper では display: grid ではなく display: flex を使用し、flex-direction を column に設定します。次に、メインコンテンツを flex-grow: 1 に設定し、他の2つの要素を flex-shrink: 0 に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。

+ +

ブラウザー実装状況

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

MDN にある資料

+ + -- cgit v1.2.3-54-g00ecf