目次
Material Design Lite (MDL) はどこで使用すべきですか？
マテリアルデザインのエクスペリエンスを、CSS、JavaScript、HTML などのバニラ Web テクノロジを使って実現したい場合は、MDL が役立つ選択肢になるかもしれません。当社では、マーケティングページ、記事、ブログ、特にアプリ的ではない一般的な Web コンテンツなど、コンテンツが豊富な Web サイト向けに最適化しています。色を選択し、テンプレートをカスタマイズしてマテリアルエクスペリエンスを実装したいだけの場合、そのプロセスをよりシンプルにするために取り組んでいます。
マテリアルデザインには、コミュニティ主導のいくつかのオプションがありますが、Web に関してはマテリアル仕様にいくつかのギャップがあることが当社の経験からわかっています。これらのギャップをどのように埋めるべきかを推測するのではなく（これはコミュニティが苦労していることを知っています）、マテリアルデザインチームと緊密に連携して、現在仕様に準拠し、かつ進化中の仕様の側面に関するガイダンスを提供するマテリアルライブラリを提供することを選択しました。
MDL はどのような CSS の命名規則を使用していますか？
MDL は BEM を使用して記述されました。BEM は、ブロック、要素、修飾子の略です。これは、CSS クラス名が整合性があり、分離され、表現力豊かになるように構築するために使用される手法です。BEM メソッドの詳細を学ぶためのいくつかの優れたリソースを次に示します。
これらは、BEM を理解するために必要なデータを簡略化する優れたリソースです。考案者から方法論を読みたい場合は、Yandex がリソースを提供しています。このリファレンスは、CSS だけにとどまらず、使用している完全な JavaScript セットアップにも及んでいます。
当社の wiki には、MDL で使用される名前空間に関するセクションが含まれています。
MDL はプログレッシブエンハンスメントをサポートしていますか？
MDL のコンポーネントは、プログレッシブエンハンスメントを念頭に置いて、ゼロから設計されました。当社では、可能な限りネイティブ HTML 要素を基盤として構築することを試み、どうしても必要な場合にのみ JavaScript を「拡張機能」として使用しています。
この一例として、マテリアルデザインの「テキストのみ」テンプレートがあります。Chrome DevTools で JavaScript をオフにすると、ページは CSS で問題なくレンダリングされます。
これにより、重要なコンテンツを最初にレンダリングし、マテリアルデザインのボタンのリップルやポップアウトメニューコンポーネントなどの要素でページを「拡張」することができます。
MDL は IE9 では JavaScript がない状態にまで劣化しますが、拡張エクスペリエンスのためにポリフィルを導入できます。Layout など、コンポーネントが機能するために JavaScript が必要な場合は、開発でそれらを計画する必要があります。IE10 以降およびエバーグリーンブラウザは完全にサポートされています。当社のブラウザサポートの詳細については、「MDL はどのブラウザをサポートしていますか？」を参照してください。
注: MDL サイト自体は、可能な限りプログレッシブエンハンスメントを使用しようとしています。ただし、サイトの一部（コンポーネントページなど）は JS に大きく依存しています。MDL テンプレートとコンポーネントは、それ以外の場合は JS をオフにした状態でできる限り適切にレンダリングしようとします。
MDL はどのブラウザをサポートしていますか？
MDL の完全なエクスペリエンスは、すべてのエバーグリーンブラウザの最新の 2 つのバージョンで動作するはずです。一方、当社の Cutting-the-mustard テストに合格しない IE9 などのブラウザでは、CSS のみの状態に正常に劣化します。
当社の ブラウザ互換性マトリックスには、当社が公式にサポートするブラウザに関する最新の情報が記載されています。コンポーネントについては、少なくとも querySelector、classList、および addEventListener のサポートが必要であり、必要に応じて ポリフィルを適用できます。当社のテンプレートは、主に Flexbox の使用により、IE10 以降で動作します。
古い IE でのサポートを向上させるために、MDL サイトで現在使用しているポリフィルは次のとおりです。
<!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.2.0/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
IE10 標準モードでは、条件付きコメントのサポートが削除されるため、上記は IE9 などの古いバージョンの IE でのみ解釈されます。
当社は IE8 を公式にはサポートしていません。とは言え、一部のコンポーネントは、CSS のみ（またはネイティブ HTML 要素）のエクスペリエンスを使用する方が他のコンポーネントよりも優れています。例を挙げます。
ボタン
表
スライダー（入力フィールドに劣化）
MDL は Polymer とうまく連携できますか？Paper 要素の代替になりますか？
MDL は、ブログ、マーケティングページ、およびより伝統的なテキストベースの Web ページなど、静的コンテンツサイトに最適化されたエクスペリエンスを提供することに重点を置いています。
Paper 要素は Polymer で構築されており、個別に、または組み合わせてマテリアルデザインスタイルのサイトを作成できる、完全にカプセル化されたコンポーネントであり、より高度なユーザーインタラクションをサポートしています。
とは言え、MDL は Polymer 要素の対応物と並行して使用できます。Polymer は Web Components の力を使って、これらのコンポーネントに使用されるデザインをカプセル化します。MDL は、カスタムコンポーネント内のスタイルには影響しません。
MDL は Bootstrap と比較できますか？
Bootstrap の代わりに MDL を使用する場合、同じレベルのコンポーネントスタイリングを期待できますか？
マテリアルデザインは、Bootstrap の多くの部分を置き換えることができます。ただし、Bootstrap が提供するすべての機能に一致させることを意図しているわけではありません。代わりに、MDL はマテリアルデザイン仕様で指定されたコンポーネントを実装することを意図しています。これにより、最も包括的で正確なソリューションを提供できます。
既存のマテリアル CSS 実装と比較してどうですか？
Materialize、Material Bootstrap など
コミュニティが CSS ライブラリにマテリアルデザインを実装する方法について独自の解釈を提供しているのは素晴らしいと思います。
とは言え、利用可能な実装は数多くあり、多様であり、仕様の解釈はかなり自由であり（彼らのせいではありません！）、彼らの意見は必ずしもマテリアルデザインチームが「正しい」と考えるものを反映しているとは限りません。MDL は、マテリアルデザインチームと Chrome UX チームと緊密に連携して開発され、仕様への準拠について定期的にレビューを受けています。仕様の中でまだ完全に具体化されていない領域に遭遇した場合、MDL はマテリアルデザインに忠実であり続ける方法でこれらの問題を解決する方法について、レビュー済みの意見を提供できます。
MDL の minify 版、CDN 版、または Sass 版のどれを使用すべきですか？
独自のバージョンをビルドするか、minify 版をダウンロードするか、CDN オブジェクトを参照するだけでよいでしょうか？
minify 版: MDL を初めて使用する場合は、CSS/JS の minify 版と、オプションで既製のテンプレートを含む、「はじめに」ページからデフォルトパッケージのいずれかをダウンロードすることをお勧めします。
CDN: MDL CSS および JS ファイルの独自のコピーをホストすることを避けたい場合は、プロトタイプを作成するだけであったり、CDN を使用して、エッジキャッシュされたバージョンをプルダウンできます。
カスタマイザ: MDL で新しいサイトを作成していて、カスタムカラースキームを使用している場合は、デフォルトパッケージをダウンロードしてから、カスタマイザツールを使用してカスタムビルドを生成することをお勧めします。これを使用すると、必要に応じて material.min.css ファイルをオーバーライドできます。
Sass: 全部やりたい場合は、MDL の Sass バージョンを入手できます。これには、元のソース、ドキュメント、テンプレートが含まれています。このバージョンでは、CSS 変数や使い慣れた Sass のその他の利点を使用して、最大限のカスタマイズを行うことができます。
公式 CDN はどのサービスを使用していますか？
公式 CDN は、Google Cloud Storage を使用してホストされています。
MDL は Web Starter Kit とどのように関連していますか？
MDL は、Web Starter Kit で提供されるスタイルガイドからの進化的ステップです。Web Starter Kit が使用されるにつれて、多くの開発者が単にサイトにマテリアルデザインを求めていることがますます明らかになりました。
また、WSK スタイルガイドはマテリアルデザインに完全には準拠していませんでした。単にそのアイデアに基づいていたのです。WSK プロジェクトから、開発者のこのニーズを満たすために MDL が生まれました。その過程で、実装を仕様にできる限り忠実にしました。
Google のプロダクトで MDL を本番環境で使用しているものはありますか？
MDL は、いくつかの異なる Google プロパティの本番環境で使用されています。これらは古い不完全なバージョンを使用していますが、デプロイされたエクスペリエンスがどのように見えるかを示しています。例を次に示します。
Google サービスサイト
DoubleClick による RichMediaGallery
また、Google ショッピングを含む、今後のプロジェクトの多くの他のチームで使用されています。
MDL を使用しているサイトのショーケースはありますか？
MDLを本番環境で使用しているGoogleサイトの初期リストについては、ショーケースをご覧ください。
サイトの追加をご希望の場合は、GitHubのIssueトラッカーで新規Issueを作成してください。Issueには、リンク、サイトの説明、推奨されるスクリーンショットを含める必要があります。
近い将来、サイトに適切に磨き上げられたショーケースを追加したいと考えています。
個々の MDL コンポーネント (ボタンなど) をビルドまたは使用できますか？
MDLのV1では、ページにいくつかの異なるコンポーネントが必要で、MDLライブラリのほとんどを含めたいと考えるユーザーのユースケースに焦点を当てています。つまり、単一のコンポーネントのみを抜き出すことに関するサポートとドキュメントは最小限です。
ただし、単一（または少数の）コンポーネントのみを使用してビルドを生成する必要がある場合は、SassビルドでGulpを使用する必要があります。material-design-lite.scssで不要なコンポーネントをコメントアウトし、Gulpfileで不要なスクリプトをコメントアウトしてから、gulpを実行してビルドを作成できます。
よりモジュール化された方法でコンポーネントを提供することについては話し合ってきましたが、これはV1後のタイムラインで検討します。
MDLに関する問題を報告するにはどうすればよいですか？
GitHubリポジトリでIssueをオープンして、問題をお知らせください。
MDL の使用に関する質問についてどこで助けを得られますか？
MDLのユーザーおよび開発者コミュニティには、Material-Design-Liteタグを使用して、Stack Overflowで質問したり、質問に回答したりすることを推奨します。
MDL に関するプレゼンテーションやスライドはありますか？
Google I/O 2015でMDLに関するプレビュートークを行い、そのトークのスライドはSpeakerDeckにあります。
MDL にコンポーネントをリクエストまたは提供できますか？
もちろんです。まだ提供していないMDLに実装したいコンポーネントやテンプレートがあるかもしれません。 Issueトラッカーでご提案ください。すべてを実装できるとは限りませんが、リクエストを検討し、定期的に見直します。
MDL は Sass 以外のプリプロセッサをサポートしますか？
Stylus、Less、PostCSSなど。
MDLはSassを使用して実装されており、これを変更する現在の計画はありません。他のプリプロセッサへの移植を維持したい場合は、自由に実行してください。
興味のある問題の最新情報をどのように入手できますか？
リポジトリ全体を監視すると、ストリームに多くの不要なノイズが入る可能性があります。関心のあるIssueのみを更新するには、そのIssueを購読するだけで済みます。これは、Issueページの右側のサイドバーにある「Subscribe」ボタンをクリックすることで行われます。
