2014年に、Googleは、堅実な設計原則をまとめることを目的とした視覚的な言語、さまざまなプラットフォームやデバイスにわたる一貫したユーザーエクスペリエンス、および技術的および科学的革新を目的とした視覚的な言語を公開しました。
2015年7月には、GoogleリリースマテリアルデザインLiteが見られました。これは、マテリアルデザインの外観をウェブサイトに簡単に追加できるように設計されたフロントエンドライブラリです。 この記事では、マテリアルデザインの次の基本原則とコンポーネント、およびマテリアルデザインライト（MDL）ライブラリを使用してそれらを実装する方法に焦点を当てています。
タイポグラフィ
マテリアルデザインの英語と英語のような言語（ラテン語、ギリシャ語、キリル語の文字）用の選択された書体は、ロボットとnotoです。
Notoは、中国語、日本、韓国語のような密集したスクリプト、および東南アジアや中東の言語など、アラビア語、ヒンディー語などの高さの脚本もサポートしています。
プロジェクトにRobotoフォントファイルを含めるには、HTMLドキュメントのセクションの上部に次のタグを追加します。<span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>
たとえば、.mdl-typography-display-2を
タグに追加すると、それぞれ45pxと34pxのフォントサイズ値を追加します。 ：
<span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span> </span></span><span><span></span><span><span></script</span>></span></span>
MDLには、活性化された原則、読みやすさの原則を備えた多くのクラスがあります。これにより、デバイスがアクセスするのに使用されていることに関係なく読むのが楽しい美しいテキストコンテンツを簡単に表示できるようになります。
タイポグラフィのクラスの完全なリストについては、GitHubのMDLタイポグラフィコンポーネントページにアクセスしてください。
MDLライブラリStyleSheetファイル名に注意してください。名前は、スタイルシートに実装されているマテリアルデザインカラーパレットを指しています。デフォルトのカラーパレットは、インディゴをプライマリカラーとして、ピンクをアクセント色として使用します。しかし、あなたはこれらに固執していません。以下は、カスタムカラーパレットの仕上げ方法とMDLを使用して実装する方法に関するマテリアルデザインの推奨事項です。 マテリアルデザインの色の原則
素材のデザインは、大胆で落ち着いた色、影、ハイライトを組み合わせるのが大好きです。Google Material Design Spec
ただし、これはWebページにランダムな色をはねかけることではありません。まったく逆です。ウェブサイトのカスタムカラー選択を作成する場合、マテリアルデザインは、プライマリパレットから3つの色合いを選択し、セカンダリパレットから1つのアクセントカラーを選択することをお勧めします。例を次に示します：
マテリアルデザインは、調和して一緒に機能する幅広い美しいカラーパレットを提供します。色の選択を容易にするために、パレットの各色には、それを識別するための16進レーベルと16進の色の値があります。マテリアルデザインのガイドラインは、500色を一次色として示しています。他の色は、アクセントの色として使用するのが最適です
リンク、プライマリアクションボタン、スイッチやスライダーなどのコンポーネントにアクセント色を使用することを制限します。ボディテキストにアクセントの色を使用しないでください：
また、材料設計のガイドラインは、ページの広い領域とアプリバーでのアクセントの色を使用して阻止します。特に重要なのは、フローティングアクションボタンと背景の両方に同じ色を使用しないことです。
材料デザインの色のガイドラインをしっかりと理解しているので、MDLプロジェクトに素晴らしい色を選択する時が来ました。これが方法です。
デフォルトのIndigo-Pinkパレットから、次のいずれかの方法で独自のカスタムパレットに切り替えることができます。
GoogleのCDNを使用している場合、この記事のデモでやったように、次の手順に従ってください。
たとえば、
材料デザインのパレットから選択した色は、プライマリとしてティール、アンバーがアクセントとしてティールであるとしましょう。これがGoogle CDNでホストされているMDL StyleSheetのURLが次のように見えるものです。
<span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>
完了です！
サーバー上のコンパイルされたMDLファイルをホストしたい場合は、MDL Webサイトで説明しています。カスタマイズおよびプレビューツールを見つけることができます。これにより、インタラクティブなカラーホイールからプライマリとアクセントのカラーパレットを選択できます。その後、選択したテーマにCSSをダウンロードして、プロジェクトに直接接続できます。
この記事のHTMLデモでは、デフォルトのIndigo-Pinkパレットを使用していますが、上記の方法のいずれかを使用して、さまざまな色の選択を自由に実験できます。
MDLは、レイアウト、ボタン、カード、スイッチなどを含む多くの一般的に使用されるWebコンポーネントを提供します。材料デザインLiteのレイアウトコンポーネントを使用してHTMLテンプレートの構造を構築し始めます。
MDLは、レイアウトにCSS FlexBoxを使用します。 .mdl-layout要素は、フレックス方向プロパティが列に設定されたフレックスコンテナです。
レイアウトコンポーネントには、次の4つのサブコンポーネントが含まれています
ナビゲーションレイアウト
<span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span> </span></span><span><span></span><span><span></script</span>></span></span>
タブ
フッター
スクロールヘッダー
最後に、対応するコンテンツパネルを追加する必要があります：
<span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>
パネルには.is-activeクラスがあり、デフォルトで表示されます。 引き出しコンポーネントに余分なコンテンツを配置する
引き出しは、デザインを乱雑にせずにウィジェットを追加したり、ボタンを共有したり、追加のナビゲーションリンクをWebページに追加したりするのに最適です。
以前に追加したコードスニペットを使用して、
これらのスニペットを表示するか、デモプロジェクトのソースコードを検査して、タブ付きナビゲーションと引き出しコンポーネントの完全な実装について。
マテリアルデザインライトグリッドマテリアルデザインライトは、デスクトップ画面に12列のグリッド、タブレット用の8列グリッド（最大800px）、およびモバイル画面サイズの4列グリッド（最大500px）を使用します。
<span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span> </span></span><span><span></span><span><span></script</span>></span></span>
レイアウトは、各セクションを異なる.mdl-grid要素に巻き付け、箱入りセクションに960pxのCSS最大幅の値を持つ追加のカスタムクラスを提供することで実現されます。
<span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span>
およびcss：
また、グリッド列間にマージンが必要な場合は、MDLにはグリッド列のコンテナ要素に追加できる便利なクラスがあります。
<span><span><span><h1</span> class<span>="mdl-typography--display-2"</span>></span>Title<span><span></h1</span>></span> </span><span><span><span><p</span> class<span>="mdl-typography--display-1"</span>></span> </span> Sub-title <span><span><span></p</span>></span></span>
デフォルトの列サイズをオーバーライドする場合は、1〜12の範囲の数字を持つ.mdl-cell- {number} -COLクラスを追加する必要があります。2列グリッドのコードは次のとおりです。 ：
<span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css"</span>></span></span>
Codepenのライブデモをチェックしてください
<span><span><span><div</span> class<span>="mdl-layout mdl-js-layout"</span>></span> </span> <span><!-- All your template markup goes here --> </span><span><span><span></div</span>></span></span>
これを実際に見るには、さまざまな画面サイズでデモプロジェクトのウェルカムセクションをご覧ください。リストアイテムの横にある装飾的なピンクの円が小さな画面に表示されていないことにすぐに気付くでしょう。
材料設計がカードコンポーネントを定義する方法は次のとおりです
カードは、より詳細な情報のエントリポイントとして機能する素材のシートです。カードには、写真、テキスト、および単一の科目に関するリンクが含まれている場合があります。
マテリアルデザイン仕様さまざまな種類のコンテンツを単一のカードに追加できますが、すべてコアトピックに関連していることを確認してください。また、カード内にあまりにも多くの情報やリンクやボタンが多すぎることを避けてください。むしろ、ユーザーを専用のページに向けて、トピックに関する詳細情報を作成しました。
MDLカードコンポーネントを使用してページに簡単なカードを追加する方法は次のとおりです。
.mdl-cardのクラスでコンテナ要素内のカードコンテンツをラップします。 .mdl-shadow- {number} dpクラスでは、ドロップシャドウの深さを制御できます。このクラスに3、4、6、8、または16を追加すると、より深いドロップシャドウが得られます。 次に、次のカードセクションにコンテナを追加します。
<span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> </span></span><span> <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>
カードタイトル
.mdl-card__media classを使用して、
カードメディア .mdl-card__supporting-text classを使用した
この記事は、Googleによるマテリアルデザインライトライブラリを探索し、実際のHTML Webテンプレートで実践することに関するものです。
MDLは、たとえばBootstrapなどの包括的なフレームワークではありません。アプリケーションの可能性の高いすべてのコンポーネントとスタイルについてカバーすることはできません。したがって、いくつかの機能を自分でコーディングすることを期待してください。しかし、図書館はまだ進化しており、将来のリリースでいくつかの新しいもので私たちを驚かせるかもしれません。また、このWebは、デザイナーと開発者向けのリソースの豊富なマテリアルデザインエコシステムを提供します。そのほとんどは無料です。
この記事には、MDL Webサイトのテンプレートとともに、MDLの実験を開始し、独自の素晴らしいマテリアルデザインプロジェクトの構築を開始するためのもう1つのリソースとして、この記事にはHTMLテンプレートを使用できます。
最高の素材のテーマのガイドをチェックしてください。Googleによるマテリアルデザインライトに関するよくある質問（FAQ）マテリアルデザインライト（MDL）とは何ですか？材料デザインとどのように違いますか？
マテリアルデザインライト（MDL）は、すべてのデバイスで統一されたユーザーエクスペリエンスを提供することを目的としたGoogleが開発したデザイン哲学です。およびプラットフォーム。これは、デジタルエクスペリエンスを作成するための理論、リソース、ツールを組み合わせた包括的な設計システムである材料設計の軽いバージョンです。マテリアルデザインは、さまざまなツール、ガイドライン、コンポーネントを含む完全な設計言語ですが、MDLはこのシステムのサブセットであり、実装が簡単なよりシンプルで軽量なフレームワークを提供します。完全な材料設計システムの複雑さなしにモダンで洗練されたユーザーインターフェイスを作成したい開発者にとって特に便利です。マテリアルデザインライトを使用すると、プロジェクトにMDL CSSとJavaScriptファイルを含める必要があります。これらのファイルは、公式のMDL Webサイトからダウンロードするか、コンテンツ配信ネットワーク（CDN）から直接含めることができます。これらのファイルを含めたら、HTMLコードでMDLコンポーネントの使用を開始できます。 MDL Webサイトは、各コンポーネントの使用方法を理解するのに役立つ包括的なドキュメントと例を提供しています。マテリアルデザインライトの重要なコンポーネントは何ですか？ユーザーインターフェイスを構築するために使用できます。これらには、ボタン、チェックボックス、テキストフィールド、スライダーなどが含まれます。各コンポーネントは、一貫したモダンなルックアンドフィールを提供するように設計されており、特定のニーズに合わせてカスタマイズできます。 MDL Webサイトは、コードの例や使用ガイドラインなど、各コンポーネントの詳細なドキュメントを提供します。はい、マテリアルデザインライトはオープンソースであり、個人プロジェクトと商業プロジェクトの両方に無料で使用できます。 Apacheライセンス2.0に基づいてライセンスされています。これにより、ライセンスの条件を遵守すると、ソフトウェアを自由に使用、変更、配布できます。
マテリアルデザインライトは、Chrome、Firefox、Safari、Edgeなど、すべての最新のブラウザと互換性があるように設計されています。ただし、古いブラウザや最新のWeb標準を完全にサポートしていないブラウザでは期待どおりに機能しない場合があります。
Lite Liteはレスポンシブデザインをサポートしていますか？これには、さまざまな画面サイズと方向に適応するレイアウトを作成できるレスポンシブグリッドシステムが含まれています。これにより、デスクトップデバイスとモバイルデバイスの両方で見栄えの良いWebサイトやアプリを簡単に作成できます。コミュニティからの貢献を歓迎します。バグを報告したり、新機能を提案したり、コードの変更を送信したりすることで貢献できます。すべての貢献は、MDLのWebサイトで入手可能なプロジェクトの貢献ガイドラインに従う必要があります。
以上がGoogleによるMaterial Design Liteの実用的な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
