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

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

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

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

テーマが説明しました

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

色のカスタマイズ

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

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

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

タイポグラフィの調(diào)整

マテリアルは、テーマを通じてカスタマイズ可能なベースタイポグラフィスケールを提供します。タイポグラフィは、CSSクラスまたはミキシンを使用して、各見出しレベルの調(diào)整できます。 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;

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

あなたの創(chuàng)造性を解き放ちます

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

実世界の例

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

はじめる

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

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

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