2020-11-13

【Material Design】Cardsの使い方

今回は Material Design　の Cardsの使用方法を紹介します。

ブログ記事の一覧として表示したり、おすすめ記事欄などで使用するのにも向いています。

スマホなどレスポンシブではカードを使用している例がよく見られると思います。

今回作成するのは以下の通りです。

テキストのみ
メディア付
ボタン付き

それぞれのタイプで高さが0dpのタイプ、高さが1dpのタイプを紹介していきます。

カードに必要なのは以下の通りです。

npm install @material/card

Cardsの使用方法

上記タイプの作成をしていきます。

基本的にCSS、JS部は同じです。そのためHTMLに焦点を当てて説明していきます。

CSS

@use "@material/card";

@include card.core-styles;

//テキスト部のスタイル
.my-card-content {
  padding: 16px;
}

.my-card-content__title {
	font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 500;
    letter-spacing: .0125em;
}

.my-card-content__subtext {
	font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: .0178571429em;
    opacity: .6;
}

カードの基本スタイルの読み込みをします。

import {MDCRipple} from '@material/ripple';

const selector = '.mdc-button, .mdc-icon-button, .mdc-card__primary-action';
const ripples = [].map.call(document.querySelectorAll(selector), (el) => new MDCRipple(el) );

カード内で使用する可能性のある要素にリップルを適応させています。

テキストのみ

　　<div class="mdc-card">
		  	<div class="mdc-card__primary-action" tabindex="0">
			  	<div class="my-card-content">
				    <div class="my-card-content__title">タイトル</div>
				    <div class="my-card-content__subtext">タイトルの説明です。</div>
			   	</div>
		    </div>
		</div>

カード型の基本形です。

使用するために最低限なものは「mdc-card」のみです。

「mdc-card__primary-action」はJSで書いた要素であり、rippleを適用しています。今回は要素全体にrippleを適用するためにコンテンツ全部覆った形にしてます。

テキスト部分のマークアップはないのでその部分のスタイルは独自で行います。

マテリアルデザイン上で、カード内の要素のパディングは16pxなので「my-card-content」には16pxを入れています。

高さ０の外枠のタイプは以下のようにモディファイアクラスを付け足します。

<div class="mdc-card mdc-card--outlined">

メディア付

　　<div class="mdc-card mdc-card--outlined">
			<div class="mdc-card__primary-action" tabindex="0">
				<div class="my-card__media mdc-card__media mdc-card__media--16-9">
				  <div class="mdc-card__media-content">画像</div>
				</div>
				<div class="my-card-content">
					<div class="my-card-content__title">タイトル</div>
					<div class="my-card-content__subtext">タイトルの説明です。</div>
				</div>
			</div>
		</div>

先ほどの形に画像がついた形です。

「mdc-card__media–16-9」で画像サイズを16:9で表示できるようにしています。ここは後述のmixinから変更可能です。

「mdc-card__media-content」では画像のタイトルやアイコンを画像上に配置できます。(見えにくいですが、左上に文字が入っています。)

メディアは以下のように設定できます。

.my-card__media {
    background-image: url(assets/tree.png);
}

ボタン付き

　　<div class="mdc-card">
			<div class="mdc-card__primary-action" tabindex="0">
				<div class="my-card__media mdc-card__media mdc-card__media--16-9">
				  <div class="mdc-card__media-content">Title</div>
				</div>
				<div class="my-card-content">
					<div class="my-card-content__title">タイトル</div>
					<div class="my-card-content__subtext">タイトルの説明です。</div>
				</div>
				<div class="mdc-card__actions">
				  <button class="mdc-button mdc-card__action mdc-card__action--button">
				    <div class="mdc-button__ripple"></div>
				    <span class="mdc-button__label">Action 1</span>
				  </button>
				  <button class="mdc-button mdc-card__action mdc-card__action--button">
				    <div class="mdc-button__ripple"></div>
				    <span class="mdc-button__label">Action 2</span>
				  </button>
				</div>
			</div>
		</div>

上記のタイプに加えてボタンを設置したものです。

ボタン部分を「mdc-card-actions」で囲っておきます。

ボタン部分については【Material Design】Buttonの使い方を参考にしてください。

ボタンに使用には以下が必要になります。

@use "@material/button";

@include button.core-styles;

その他の例

上記のアレンジなどその他の例を紹介します。

カードサイズボタン

　　<div class="mdc-card">
			<div class="mdc-card__primary-action" tabindex="0">
				<div class="my-card__media mdc-card__media mdc-card__media--16-9">
				  <div class="mdc-card__media-content">Title</div>
				</div>
				<div class="my-card-content">
					<div class="my-card-content__title">タイトル</div>
					<div class="my-card-content__subtext">タイトルの説明です。</div>
				</div>
				<div class="mdc-card__actions mdc-card__actions--full-bleed">
				  <a class="mdc-button mdc-card__action mdc-card__action--button" href="#">
				    <div class="mdc-button__ripple"></div>
				    <span class="mdc-button__label">All Business Headlines</span>
				    <i class="material-icons mdc-button__icon" aria-hidden="true">arrow_forward</i>
				  </a>
				</div>
			</div

カード横幅分のボタンを設置できます。

「mdc-card__actions–full-bleed」を付けることで横幅一杯になります。

サンプルとしては矢印をアイコンで用意しておき、詳細へリンクさせるといった利用方法です。

アイコンボタン

  <div class="mdc-card">
			<div class="mdc-card__primary-action" tabindex="0">
				<div class="my-card__media mdc-card__media mdc-card__media--16-9">
				  <div class="mdc-card__media-content">Title</div>
				</div>
				<div class="my-card-content">
					<div class="my-card-content__title">タイトル</div>
					<div class="my-card-content__subtext">タイトルの説明です。</div>
				</div>
				<div class="mdc-card__actions">
				  <div class="mdc-card__action-icons">
				   <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
				    <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
				  </div>
				</div>
			</div>
		</div>

シェアボタンと…ボタンを表示しています。

「mdc-card__actions」内で「mdc_card__action-icons」を使用します。

アイコンボタン用のスタイルを以下で読み込みます。

@use "@material/icon-button";

@include icon-button.core-styles;

ホバー要素を加える

　　<div class="mdc-card my-card mdc-elevation-transition">
　　　<div class="mdc-card__primary-action" tabindex="0">
				<div class="my-card__media mdc-card__media mdc-card__media--16-9">
				  <div class="mdc-card__media-content">Title</div>
				</div>
				<div class="my-card-content">
					<div class="my-card-content__title">タイトル</div>
					<div class="my-card-content__subtext">タイトルの説明です。</div>
				</div>
			</div>
		</div>

@use "@material/elevation";
@use "@material/elevation/mdc-elevation";

.mdc-card {
	&:hover {
		@include elevation.elevation(8);
	}
}

デフォルトが１dpなので、ホバー時に高さを８dpにしています。デフォルトが0dpの場合は4dpにします。

また、高さを設定するために「@use “@material/elevation”;」が必要です。

html側で高さの変動要素に「mdc-elevation-transition」を設定しておくと自然な浮き上がりになります。

「mdc-elevation-transition」を使用するために「@use “@material/elevation/mdc-elevation”;」を読み込んでいます。

mixinの利用

cardsで利用できるmixinを紹介します。

cardsで利用できるmixinはシンプルなもので、全部で4種類でになります。

背景色の変更

.my-card {
  @include card.fill-color(#ff0000);
}

カードの背景色の変更が可能になります。

「fill-color」で変更したい色を指定できます。

枠色、枠太さ変更

.my-card {
  @include card.outline(#ff0000, 1px);
}

枠線の色、太さの変更ができます。

「outline」に色、太さを指定します。

デフォルト高さが1dpの方でも有効ですが、影には影響しないためあまりきれいに表示されません。

デフォルト高さが0dpの法での利用がおすすめです。

角丸設定

.my-card {
  @include card.shape-radius(20px);
}

カードの角丸設定ができます。

「shape-radius」に値を指定します。

画像比率の変更

<div class="my-card__media mdc-card__media">

.my-card__media {
    @include card.media-aspect-ratio(4,3);
    background-image: url(assets/tree-4-3.png);
}

例として4:3の画像を使用する場合です。

画像使用部分に「media-aspect-ratio」を使用し、(x,y)を指定することで画像の比率を変更できます。

まとめ

簡単に使用できて、便利そうなのが伝わったのではないかと思います。

また、使用方法、デザイン詳細を参考にして利用してみてください。

カード全体をリンクとしたい場合にはリンク上にリンクを重ねたいときの対処法を参考にしてみてください。