MDC-103 ウェブ: 色、シェイプ、高度、タイプを使用したマテリアル テーマ設定(ウェブ)

MDC-103 ウェブ:
色、シェイプ、高度、タイプを使用したマテリアル テーマ設定(ウェブ)

この Codelab について

subject最終更新: 10月 11, 2020
account_circle作成者: Liz Mitchell, Abhinay Omkar

1. はじめに

logo_components_color_2x_web_96dp.png

マテリアル コンポーネント(MDC)は、デベロッパーがマテリアル デザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter.material.io/develop に利用可能です。

Codelab MDC-101 および MDC-102 では、マテリアル コンポーネント(MDC)を使用して、Shrine というアプリの土台を構築しました。Shrine は、衣服と生活雑貨を販売する e コマースアプリです。このアプリのユーザーフローはログイン画面から始まり、ログイン画面から商品が表示されるホーム画面に移動します。

マテリアル デザインは最近拡張され、デザイナーやデベロッパーが商品のブランドを表現するための柔軟性が向上しました。この Codelab では、MDC を使用して Shrine アプリをカスタマイズし、これまで以上にブランドのユニークなスタイルを反映させます。

作成するアプリの概要

この Codelab では、以下を使用して Shrine をカスタマイズして、ブランドを反映させます。

  • タイポグラフィ
  • 高度
  • シェイプ
  • レイアウト

9c51661824dfa934.png

この Codelab で使用する MDC ウェブ コンポーネントとサブシステム

  • テーマ
  • タイポグラフィ
  • 高度
  • 画像リスト

必要なもの

  • Node.js の最新バージョン(JavaScript パッケージ マネージャーである npm にバンドルされています)。
  • サンプルコード(次のステップでダウンロード)
  • HTML、CSS、JavaScript の基本的な知識
<ph type="x-smartling-placeholder">をご覧ください。

ウェブ開発の経験についてお答えください。

2. 開発環境を設定する

MDC-102 から続行する場合

MDC-102 が完了済みであれば、コードはこの Codelab を進められる状態になっています。ステップ 3: 色を変更するに進みます。

Codelab のスターター アプリをダウンロードする

スターター アプリは material-components-web-codelabs-master/mdc-103/starter ディレクトリ内にあります。開始する前に、そのディレクトリへの cd を行ってください。

GitHub からクローンを作成する

GitHub からこの Codelab のクローンを作成するには、次のコマンドを実行します。

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-103/starter

プロジェクトの依存関係をインストールする

スターター ディレクトリ material-components-web-codelabs/mdc-103/starter(上記の手順を行った場合は現在のディレクトリ)から、次のコマンドを実行します。

npm install

多くのアクティビティが表示され、最終的に、正常にインストールされたことを示すメッセージがターミナルに表示されます。

23003b0e5fdf9077.png

スターター アプリを実行する

同じディレクトリで次のコマンドを実行します。

npm start

webpack-dev-server が起動します。ブラウザで http://localhost:8080/ にアクセスしてページを表示します。

61dc5a089bf0986b.png

完了しました。ブラウザで Shrine のログインページが表示されます。[Username] フィールドと [Password] フィールドに入力し、[Next] をクリックします。ボタンをクリックすると、ホームページに移動します。左側に、商品画像のグリッドの横にナビゲーション ドロワーが表示されます。

e2f359c254988d75.png

ナビゲーション ドロワーは機能しますが、色、高度、タイポグラフィを変更して、Shrine ブランドに合わせてみましょう。

3. 色を変更する

このカラーテーマは、デザイナーがカスタムカラーを使って作成したものです(下記の画像を参照)。これには Shrine のブランドから選択されたカラーが含まれており、Material Theme Editor に適用されています。Material Theme Editor では、それらのカラーが拡張され、より完全なパレットが作成されています(これらのカラーは、2014 マテリアル カラーパレットのものではありません)。

Shrine アプリのナビゲーション ドロワーの色を変更して、このカラーパターンを反映しましょう。

テーマカラーをオーバーライドする

次の内容を含む、_variables.scss という名前の新しいファイルを作成します。

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

次に、_common.scss の最上部でインポートします。

@import "./variables";

ナビゲーション ドロワーに CSS スタイルを追加する

home.scss で、既存の import の後に次の import ステートメントを追加します。

@import "@material/ripple/mixins";

次に、以下のスタイルを追加して .shrine-drawer クラスを作成します。

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

http://localhost:8080/home.html のページを更新します。ホーム画面は次のようになります。

816105f1c5a033f2.png

ログイン画面の色を、このカラーパターンに合わせて変更しましょう。

ログインページに CSS スタイルを追加する

login.scss に、次の行を追加します。

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

また、.username, .password CSS セレクタ内に次のミックスイン呼び出しを追加します。

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

http://localhost:8080/ のページを更新します。ログイン画面は次のようになります。

9e0172a18582a44e.png

4. タイポグラフィとラベルのスタイルを変更する

デザイナーは、色の変更に加えて、サイトで使用する特定のタイポグラフィも提供しています。これをナビゲーション ドロワーにも追加しましょう。

タイポグラフィのパッケージをインストールするには、次のコマンドを実行します。

npm install @material/typography

タイポグラフィ用の CSS を追加する

home.scss で、既存の import の後に次の import ステートメントを追加します。

@import "@material/typography/mdc-typography";

次に、次の Mixin 呼び出しを shrine-title クラスに追加します。

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

次に、ドロワー アイテムのスタイルを設定します。

行区切り文字を追加する

home.html で、<a ...>Featured</a> 要素の直後に次のコードを追加します。

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

home.scss に次のスタイルを追加します。

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

画像のアイテムとラベルを調整する

アイテムとラベルを調整するには、.product-list セレクタ内の home.scss に次のスタイルを追加します。

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

ページを更新すると、ホーム画面は次のようになります。

129ada72a02baf5a.png

5. 高度を調整する

これで、Shrine 固有の色とタイポグラフィを使用してページのスタイルを設定できました。次は、Shrine の商品を示す画像リストを見てみましょう。商品をより強調して注目を集めましょう。

Elevation のパッケージをインストールするには、次のコマンドを実行します。

npm install @material/elevation

import ステートメントを追加する

home.scss で、最後の import ステートメントの後に次の行を追加します。

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

新しい div で画像リストをラップする

home.html で、<ul> 要素の周囲に次のマークアップを追加します。

<div class="shrine-body">
 
<ul...>
</div>

Sass ミックスインを使用して高度を変更する

home.scss に以下を追加します。

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

すごい!画像リストアイテムの背後にある白いサーフェスの左端にシャドウを追加して、ナビゲーションの上に少し浮いているように見えるようにしました。

66c3d6a82fb8bb23.png

6. レイアウトを変更する

次に、レイアウトを変更して、異なるアスペクト比とサイズの画像を表示して、各画像が他の画像と異なって見えるようにします。

HTML を変更する

home.html で、mdc-image-list 要素を更新して mdc-image-list--masonry クラスを含めます。

<ul class="mdc-image-list mdc-image-list--masonry product-list">

画像を追加する

home.html で、assets フォルダにある画像と一致するように各 img 要素の src 属性を変更します。次に、各画像のラベルテキストを更新します。完了すると、次のようになります。

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Ginger scarf</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Blue stone mug</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Cerise scallop tee</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Chambray napkins</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Fine lines tee</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Garden strand</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Gatsby hat</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Gilt desk trio</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Kitchen quattro</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Seabreeze sweater</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Shrug bag</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Stella sunglasses</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Surf and perf shirt</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Vagabond sack</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Walter henley (white)</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Weave keyring</span>
       
</div>
     
</li>
   
</ul>

CSS を更新する

home.scss で、mdc-image-list-standard-columns(4) ミックスインを削除し、次のミックスインに置き換えます。

@include mdc-image-list-masonry-columns(4);

次に、次の padding 値を home.scssproduct-list クラスに追加します。

.product-list {
  ...
  padding: 80px 100px 0;
}

9c51661824dfa934.png

コードが complete/ フォルダに含まれているコードと一致するはずです。

7. 別のテーマを試す

色はブランドを表現するための強力な手段です。色を少し変えるだけで、ユーザー エクスペリエンスに大きく影響します。これを試すために、ブランドのカラーパターンが完全に異なると Shrine がどのように見えるかを見てみましょう。

CSS を変更する

_variables.scss で、プライマリ テーマに対して宣言した変数を次のように置き換えます。

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

login.scss で、.username, .password セレクタの Mixin を削除します。次のようになります。

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

さらに、.cancel クラスの mdc-button-ink-color ミックスイン オーバーライドを削除します。

home.scss で、次のルールを .home クラスに追加します。

background-color: $mdc-theme-background;

.shrine-logo-drawer セレクタ内で、fill プロパティを on-primary 色に置き換えます。

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

同様に、.shrine-title セレクタ内で、color プロパティを on-primary 色に設定します。

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

最後に、.shrine-body セレクタで前に使用した mdc-elevation ミックスインを削除します。

ビルドして実行します。新しいテーマがブラウザに表示されます。

7fdf830a944e53d7.png

次に http://localhost:8080/home.html に移動して、home.html ページに対する変更を確認します。

7369127decb1a875.png

8. 内容のまとめ

これで、デザイナーの仕様に近いアプリが作成されました。

次のステップ

この Codelab では、MDC コンポーネントとして、テーマ、タイポグラフィ、高度、シェイプを使用しました。その他のコンポーネントとサブシステムについては、MDC ウェブカタログをご覧ください。

<ph type="x-smartling-placeholder">をご覧ください。

この Codelab を完了するためにそれなりの時間と労力を必要とした

今後もマテリアル コンポーネントを使用したい