menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

カード

カードは、特定のデータセットを含むコンテナです。写真、テキスト、リンクなど、さまざまな関連情報を含めることができます。

使用方法

カードコンポーネントは純粋な CSS で記述されており、HTML を書くだけで有効になります。

関連情報

Material Design デザインガイドライン：コンポーネント - カード

スタイル

完全な HTML 構造

以下は、カード内にあらかじめ定義されたすべてのスタイル要素を含む、カードの完全な HTML 構造です。

codeplay_arrow
例
<div class="mdui-card">

  <!-- カードのヘッダー（アバター、タイトル、サブタイトルを含む） -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- カードのメディアコンテンツ（画像、ビデオなどのメディアコンテンツ、およびタイトル、サブタイトルを含む） -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- カードには 1 つ以上のメニューボタンを含めることができます -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
        <i class="mdui-icon material-icons">share</i>
      </button>
    </div>
  </div>

  <!-- カードのタイトルとサブタイトル -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- カードのコンテンツ -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- カードのボタン -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right">
      <i class="mdui-icon material-icons">expand_more</i>
    </button>
  </div>

</div>

メディア要素にオーバーレイする

<div class="mdui-card-media"></div> の中に <div class="mdui-card-media-covered"></div> を追加し、メディア要素にオーバーレイしたいコンテンツをその要素の中に入れます。

codeplay_arrow
例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>
codeplay_arrow
例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

.mdui-card-media-covered にクラス .mdui-card-media-covered-top を追加すると、オーバーレイ層がメディア要素の上部に配置されます。

codeplay_arrow
例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

.mdui-card-media-covered にクラス .mdui-card-media-covered-transparent を追加すると、オーバーレイ層の背景が透明になります。

codeplay_arrow
例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

.mdui-card-media-covered にクラス .mdui-card-media-covered-gradient を追加すると、オーバーレイ層にグラデーション背景が適用されます。

codeplay_arrow
例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

ボタンの垂直配置

<div class="mdui-card-actions"></div> にクラス .mdui-card-actions-stacked を追加すると、ボタンを垂直に配置できます。

codeplay_arrow
例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

CSS クラス一覧

クラス名説明
.mdui-cardカードコンポーネントを定義します。
.mdui-card-headerカードのヘッダーを定義します。
.mdui-card-header-avatarカードヘッダーのアバターを定義します。
.mdui-card-header-titleカードヘッダーのタイトルを定義します。
.mdui-card-header-subtitleカードヘッダーのサブタイトルを定義します。
.mdui-card-mediaカード内のメディア要素を定義します。
.mdui-card-media-coveredメディア要素にオーバーレイするコンテンツを定義します。
.mdui-card-media-covered-topオーバーレイ層をメディア要素の上部に配置します。
.mdui-card-media-covered-transparentオーバーレイ層を透明な背景にします。
.mdui-card-media-covered-gradientオーバーレイ層をグラデーション背景にします。
.mdui-card-menuカードの右上隅にあるメニューを定義します。
.mdui-card-primaryカードのタイトルとサブタイトル領域を定義します。
.mdui-card-primary-titleカードのタイトルを定義します。
.mdui-card-primary-subtitleカードのサブタイトルを定義します。
.mdui-card-contentカードのコンテンツを定義します。
.mdui-card-actionsカードのアクションバーを定義します。
.mdui-card-actions-stackedアクションバーを垂直に配置します。
arrow_backPrevious
ボトムナビゲーション
arrow_forwardNext
チップ