マテリアルテーマ：素材を自分で作る！

ウェブの進化し続ける風景には、創造的な才能と効率的でスケーラブルなデザインの両方が必要です。現在、トップ製品は、アクセシビリティとユーザーエクスペリエンスを優先しながら、ブランドの一貫性を維持するために堅牢な設計システムに依存しています。 Googleデザインシステムであるマテリアルデザインは、創造的な表現と体系的な開発のギャップを埋めます。

当初、マテリアルデザインには、個々のブランドアイデンティティを完全に表現する柔軟性がありませんでした。フィードバックは、改善のための2つの重要な領域を強調しました。つまり、制限されたスタイルの適応性と、体系的なブランド実装のための不十分なツールです。

Google I/O 2018で導入されたマテリアルデザインのテーマ機能は、これらの懸念に対処しています。テーマは、デザイナーと開発者が外観をカスタマイズしながら、素材の強みを活用できるようにします。これには、色、タイポグラフィ、形状を調整して、ユニークなブランドエクスペリエンスを作成することが含まれます。

この投稿は、CSS（具体的にはSCSS）を使用したWebテーマに焦点を当てています。マテリアルWebコンポーネントで構築された基本的なログインテンプレートで説明しましょう。

テーマが説明しました

マテリアルデザインのテーマにより、色、タイポグラフィ、形状をグローバルに調整し、すべてのコンポーネントに影響を与えます。一見制限されているように見えますが、これらの調整はデザインの全体的な感触を大幅に変えます。

色のカスタマイズ

Material.ioは、色の選択とコントラストチェックを支援するカラーピッカーを提供します。 SCSSを使用して、ログイン画面の外観を簡単に変更できます。

 $ MDC-Theme-Primary：＃26418F;
$ mdc-theme-secondary：＃d1c4e9;
$ mdc-theme-background：＃fdf6f9;

材料は、アクセシビリティのために$mdc-theme-on-primary白に自動的に設定します。 $mdc-theme-on-primaryおよび$mdc-theme-on-secondaryでテキストの色をオーバーライドできます。

タイポグラフィの調整

マテリアルは、テーマを通じてカスタマイズ可能なベースタイポグラフィスケールを提供します。タイポグラフィは、CSSクラスまたはミキシンを使用して、各見出しレベルの調整できます。 Googleフォントを簡単に使用します。

 @import url（ 'https://fonts.googleapis.com/css?family=josefin sans'）;
$ mdc-typography-font-family：unquote（ "Josefin sans、sans-serif"）;

$ mdc-typography-styles-button：（
 フォントサイズ：14px、
 font-weight：600、
 文字間隔：0.05em、
）;

形状の変更

形状のカスタマイズは、コンポーネントコーナーラジア（ボタン、カード、シート）を変更します。材料は、さまざまなコーナーやコンポーネントサイズのさまざまな形状を可能にします。例えば：

 $ mdc-shape-small-component-radius：12px 4px;
$ mdc-shape-rarge-component-radius：8px;

わずか数行のコードで、アプリケーションを劇的に変換しました。

あなたの創造性を解き放ちます

色、タイポグラフィ、形状の多数の組み合わせが存在し、独特のブランドアイデンティティを作成します。以下の例は、材料コンポーネントを使用してこれらの要素の多様なアプリケーションを示しています。

実世界の例

Google自体は、Gmail、Google News、Google Playなどの製品全体でカスタマイズされた材料コンポーネント（Google Material Theme）を採用しています。 LyftやAnchorなどの他の企業も、マテリアルデザインの柔軟性を活用して、ユニークなブランドエクスペリエンスを作成します。

はじめる

マテリアルスターターキットと「マテリアルテーマのビルド」グリッチプロジェクトを使用して、マテリアルテーマの構築を開始します。 SCSS変数を試して、コンポーネントをカスタマイズします。これらの変数をmy-theme.scssファイルに貼り付けて、構築を開始するだけです。

要するに、マテリアルデザインのテーマ機能は、前例のない柔軟性を提供します。今日から探索を始めましょう！

以上がマテリアルテーマ：素材を自分で作る！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。