スティッキーヘッダーとフッターにCSSグリッドを使用する方法

CSSグリッドは、Webレイアウトを大幅に簡素化します。学習曲線がありますが、その直感的な性質により、特にヘッダーとフッターの管理に使用するのが楽しくなります。このチュートリアルでは、CSSグリッドを使用して固定フッターとスティッキーフッターの両方を作成することを示しています。 Rachel Andrewの「The New CSSレイアウト」は、グリッドとFlexBoxに深く飛び込むために強くお勧めします。

プロジェクトの概要

ヘッダー、メインコンテンツ、フッターを使用して、クラシックなHTMLレイアウトを構築します。 2つのフッターバリエーションを実装します。コンテンツの長さに関係なく、ビューポートの底に残っている固定フッターと、底部に接着するが、より長いコンテンツによって押し下げられる伝統的な粘着フッターです。メインコンテンツ領域は、完全なビューポート幅にまたがるか、定義された幅内を中心に順応します。

固定フッターは、粘着性のあるフッターほど一般的ではありませんが、チャールズシュワブのようなサイトで使用されます。それらの実装には、多くの場合、ハードコーディングされたサイズとパディングが含まれます。私たちのアプローチは、これらの制限を回避し、CSSグリッドの柔軟性を活用します。

先に進む前に、Charles Schwabのホームページの固定フッターを調べてください。 DevToolsでコードを検査すると、ハードコーディングされた高さと位置決めが明らかになります。

これらの制約なしに同様の効果を達成しましょう。

初期スタイル

最小限のUIから始めて、CSSグリッドで徐々に強化します。 CodeSandBox（およびその後の反復）は、インタラクティブな例を提供します。

まず、Viewportの全高さを使用していることを確認してください。

体 {
  マージン：0; / * scrollbarsを防ぐ */
}

＃アプリ {
  高さ：100VH;
}

次に、ヘッダー、メイン、フッターセクションとグリッド構造を定義します。この初期構造は、まだ意図したとおりに機能していません。それは基礎として機能します：

体 {
  マージン：0;
}

＃アプリ {
  高さ：100VH;

  / *グリッドコンテナ設定 */
  ディスプレイ：グリッド;
  Grid-Template-Columns：1fr;
  Grid-Template-rows：auto 1fr auto;
  Grid-Template-Areas：
    'ヘッダ'
    '主要'
    「フッター」;
}

#App>ヘッダー{
  グリッドエリア：ヘッダー。
}

#App> main {
  グリッドエリア：メイン;
  パディング：15px 5px 10px 5px;
}

#App>フッター{
  グリッドエリア：フッター。
}

これにより、単一列のレイアウトが作成されます。 1fr 「残りのスペースをとる」という意味で、全幅の列になります。行は、 auto （ヘッダーとフッター用）と1fr （メインコンテンツ用の残りスペースを埋めるため）を使用してサイズになります。ハードコーディングされた高さは必要ありません。

コンテンツ統合

提供されたCodeSandboxは、デモンストレーションの目的でReactを使用しますが、CSSグリッドの原則はフレームワークとは無関係です。ヘッダー、メイン、フッターコンポーネントは、それぞれのHTML要素をレンダリングします。請求および設定セクションでは、サンプルコンテンツを提供し、レイアウトの適応性を示します。

初期レイアウトには機能的な「請求」セクションが表示されますが、「設定」はフッターを画面外に押し出します。スクロールはページ全体に影響を及ぼし、ヘッダーが消えます。これに対処しましょう。

ヘッダーとフッターを固定しました

コンテンツがビューポートを超えた場合、 100vh高さとauto / 1frの行のサイジングが最初に問題を引き起こします。 overflow: auto<main></main>要素は、メインコンテンツ領域内のスクロールを可能にし、ヘッダーとフッターを固定したままにします。

 #App> main {
  グリッドエリア：メイン;
  オーバーフロー：自動;
  パディング：15px 5px 10px 5px;
}

この更新されたデモは、スクロールと可視性の問題を解決します。

調整可能なメインセクション幅

メインコンテンツを幅600px以内に中央に配置するか、フルビューポートに及ぶようにするために、内部にグリッドをネストします<main></main>。これは、3つの列（ 1fr 600px 1fr ）を使用して、600pxセクションを効果的に中心にしています。

 #App> main {
  ディスプレイ：グリッド;
  Grid-Template-rows：1fr;
  Grid-Template-Columns：1FR 600PX 1FR;
}

コンテンツは、グリッド座標を使用して配置されます。 a .fullクラスでは、コンテンツが幅全体に及ぶことができます。

 #App>セクション{
  グリッドエリア：1 / 2/1 / 3;
}

#App> section.full {
  グリッドエリア：1/1 / 1/4;
}

グリッドラインの使用（3列の4行）の使用に注意してください。ビューポートを縮小すると、固定された600px幅の切り捨ての問題が明らかになります。 minmax(0, 600px)これを解決し、幅を最大600pxまで調整できるようにします。

主要 {
  ディスプレイ：グリッド;
  Grid-Template-rows：1fr;
  Grid-Template-Columns：1FR Minmax（0、600px）1FR;
}

最終的なデモでは、このレスポンシブな動作を紹介します。

伝統的なスティッキーフッター

伝統的なスティッキーフッターを作成するために、グリッド構造を変更します。<main></main>要素には、グリッド内にフッターが含まれるようになりました。

<div>
  <header></header>
  <main>
    <section></section>
    <footer></footer>
  </main>
</div>

#appグリッドは2つの行があるように更新されます。

 ＃アプリ {
  / *以前と同じ */
  Grid-Template-Columns：1fr;
  グリッドテンプレート列：Auto 1FR;
  Grid-Template-Areas：
    'ヘッダ'
    '主要';
}

<main></main>グリッドは、フッターを含めるように調整されています。

 #App> main {
  ディスプレイ：グリッド;
  Grid-Template-rows：1fr auto;
  Grid-Template-Columns：1FR Minmax（0、600px）1FR;
}

このグリッド内のフッターポジショニング：

 #App>フッター{
  グリッドエリア：2 /1 / 3/4;
}

このセットアップにより、フッターを内のコンテンツによって押し下げることができます<main></main>、希望するスティッキーフッター効果を作成します。適切なアライメントを確保するために、マイナーパディングの調整が行われました。最終的なデモは、この動作を示しています。セクション要素に追加のスタイリングが適用され、垂直レイアウトを維持しながらコンテンツ領域内の水平スクロールが可能になりました。

結論

実証された技術はCSSグリッドなしでは達成可能ですが、グリッドは統一されたエレガントなソリューションを提供します。固定からスティッキーフッターへの単純な移行によって実証されているように、その柔軟性と使いやすさは、複雑なレイアウトのための強力なツールになります。提示された例は比較的単純で、より野心的なプロジェクトのCSSグリッドの可能性を示しています。

以上がスティッキーヘッダーとフッターにCSSグリッドを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。