Material Design Lite-フッター

MDLフッターコンポーネントには、 mega-footer および mini-footer の2つの主要な形式があります。メガフッターには、ミニフッターよりも複雑なコンテンツが含まれています。メガフッターは水平方向のルールで区切られたコンテンツの複数のセクションを表すことができますが、ミニフッターはコンテンツの単一のセクションを表します。通常、フッターには、リンクなどの情報コンテンツとクリック可能なコンテンツの両方が含まれます。

MDLは、さまざまなCSSクラスを提供して、メガフッターおよびミニフッターにさまざまな事前定義された視覚的および動作の強化を適用します。次の表に、使用可能なクラスとその効果を示します。

Sr.No.	Class Name & Description
1	mdl-mega-footer コンテナをMDLメガフッターコンポーネントとして識別します。フッター要素に必要です。
2	mdl-mega-footer__top-section コンテナをフッター上部セクションとして識別します。上部セクションの「外部」div要素に必要です。
3	mdl-mega-footer__left-section コンテナを左セクションとして識別します。左セクションの「内部」div要素に必要です。
4	mdl-mega-footer__social-btn メガフッター内の装飾的な正方形を識別します。ボタン要素に必要です（使用する場合）。
5	mdl-mega-footer__right-section コンテナを正しいセクションとして識別します。右セクションの「内部」div要素に必要です。
6	mdl-mega-footer__middle-section コンテナをフッター中央セクションとして識別します。中間セクションの「外部」div要素に必要です。
7	mdl-mega-footer__drop-down-section コンテナをドロップダウン（垂直）コンテンツ領域として識別します。ドロップダウン「内部」div要素に必要です。
8	mdl-mega-footer__heading 見出しをメガフッターの見出しとして識別します。ドロップダウンセクション内のh1要素に必要です。
9	mdl-mega-footer__link-list 順序付けられていないリストをドロップダウン（垂直）リストとして識別します。ドロップダウンセクション内のul要素に必要です。
10	mdl-mega-footer__bottom-section コンテナをフッター下部セクションとして識別します。下部セクションの「外部」div要素に必要です。
11	mdl-logo コンテナをスタイル付きセクションの見出しとして識別します。メガフッター下部セクションまたはミニフッター左セクションの「内部」div要素に必要です。
12	mdl-mini-footer コンテナーをMDLミニフッターコンポーネントとして識別します。フッター要素に必要です。
13	mdl-mini-footer__left-section コンテナを左セクションとして識別します。左セクションの「内部」div要素に必要です。
14	mdl-mini-footer__link-list 順序付けられていないリストをインライン（水平）リストとして識別します。「mdl-logo」div要素の兄弟要素であるul要素に必要です。
15	mdl-mini-footer__right-section コンテナを正しいセクションとして識別します。右セクションの「内部」div要素に必要です。
16	mdl-mini-footer__social-btn ミニフッター内の装飾的な正方形を識別します。ボタン要素に必要です（使用する場合）。

ここで、MDLフッタークラスを使用してフッターをスタイル設定する方法を理解するための例をいくつか見てみましょう。

メガフッター

*mdl-mega-footer* クラスを使用してコンテンツをフッターにレイアウトする方法について説明します。 この例では、次のMDLクラスが使用されます。

mdl-layout -divをMDLコンポーネントとして識別します。
mdl-js-layout -外部divに基本的なMDL動作を追加します。
mdl-layout—fixed-header -小さな画面でもヘッダーを常に表示します。
mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
mdl-layout-title -レイアウトタイトルテキストを識別します。
mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
mdl-mega-footer -コンテナをMDLメガフッターコンポーネントとして識別します。
mdl-mega-footer__top-section -コンテナをフッター上部セクションとして識別します。
mdl-mega-footer__left-section -コンテナを左セクションとして識別します。
mdl-mega-footer__social-btn -ミニフッター内の装飾的な正方形を識別します。
mdl-mega-footer__right-section -コンテナを正しいセクションとして識別します。
mdl-mega-footer__middle-section -コンテナをフッター中央セクションとして識別します。
mdl-mega-footer__drop-down-section -コンテナをドロップダウン（垂直）コンテンツ領域として識別します。
mdl-mega-footer__heading -見出しをメガフッターの見出しとして識別します。
mdl-mega-footer__link-list -順序付けられていないリストをインライン（水平）リストとして識別します。
mdl-mega-footer__bottom-section -コンテナをフッター下部セクションとして識別します。
mdl-logo -コンテナをスタイル付きセクションの見出しとして識別します。

mdl_megafooter

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <span class = "mdl-layout-title">Material Design Tabs</span>
            </div>
         </header>

         <main class = "mdl-layout__content">
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>

                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>

               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>
                     </ul>
                  </div>

                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>
                     </ul>
                  </div>
               </div>

               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>

            </footer>
         </main>
      </div>
   </body>
</html>

結果

結果を確認します。

ミニフッター

次の例は、 mdl-mini-footer クラスを使用してコンテンツをフッターにレイアウトすることを理解するのに役立ちます。

この例では、以下に示すMDLクラスが使用されます。

mdl-layout -divをMDLコンポーネントとして識別します。
mdl-js-layout -外部divに基本的なMDL動作を追加します。
mdl-layout—fixed-header -小さな画面でもヘッダーを常に表示します。
mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
mdl-layout-title -レイアウトタイトルテキストを識別します。
mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
mdl-mini-footer -コンテナをMDLミニフッターコンポーネントとして識別します。
mdl-mini-footer__left-section -コンテナを左セクションとして識別します。
mdl-logo -コンテナをスタイル付きセクションの見出しとして識別します。
mdl-mini-footer__link-list -順序付けられていないリストをインライン（水平）リストとして識別します。
mdl-mini-footer__right-section -コンテナを正しいセクションとして識別します。

mdl_minifooter

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <span class = "mdl-layout-title">Material Design Tabs</span>
            </div>
         </header>

         <main class = "mdl-layout__content">
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>

               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>

            </footer>
         </main>
      </div>
   </body>
</html>

結果