Material Design Lite-カード

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのカードを表示するための一連のCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。

Sr.No.	Class Name & Description
1	mdl-card div要素をMDLカードコンテナとして識別します。「外部」divで必要です。
2	mdl-card—border それが適用され、「内部」divで使用されるカードセクションに境界線を付けます。
3	mdl-shadow—2dp through mdl-shadow—16dp 可変シャドウ深度（2、3、4、6、8、または16）をカードに設定し、オプションで、「外部」divに進みます。省略した場合、影は表示されません。
4	mdl-card__title divをカードタイトルコンテナとして識別し、「内部」タイトルdivで必要です。
5	mdl-card__title-text カードタイトルに適切なテキスト特性を設定し、タイトルdiv内のヘッドタグ（H1-H6）に必要です。
6	mdl-card__subtitle-text テキストの特性をカードのサブタイトルに追加します（オプション）。 title要素の子である必要があります。
7	mdl-card__media divをカードメディアコンテナとして識別し、「内部」メディアdivで必要です。
8	mdl-card__supporting-text divをカード本文テキストコンテナとして識別し、本文テキストに適切なテキスト特性を割り当てます。これは「内部」本文テキストdivで必要です。テキストはdiv内に直接挿入され、コンテナは介在しません。
9	mdl-card__actions divをカードアクションコンテナとして識別し、適切なテキスト特性をアクションテキストに割り当てます。これは「内部」アクションdivで必要です。コンテンツは、コンテナを介さずにdiv内に直接入ります。

例

次の例は、mdl-tooltipクラスを使用してさまざまな種類のツールチップを表示する方法を理解するのに役立ちます。

mdl_cards

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>

      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family = Material+Icons">
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }

         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;
            background: url('html5-mini-logo.jpg') center/cover;
         }

         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }

         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }
      </style>
   </head>

   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>

                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
                     HTML5 is a standard for structuring and presenting
                     content on the World Wide Web.
                  </div>

                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>

                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>

            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>

                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
                     HTML5 is a standard for structuring and presenting
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>

                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>

         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>

            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>
      </table>

   </body>
</html>

結果

結果を確認します。

Materialdesignlite-cards

Material Design Lite-カード

例

mdl_cards

結果

目次