マテリアルデザインライトは、Web用に特別に作成された、軽量なマテリアルデザインの実装です。他のプラットフォームの詳細なガイドラインと仕様については、マテリアルデザインサイトをご覧ください。
タイポグラフィ
- h1
-
Light 112spdisplay-4 フォントウェイト 300
- h2
-
Regular 56spdisplay-3 フォントウェイト 400
- h3
-
Regular 45spdisplay-2 フォントウェイト 400
- h4
-
Regular 34spdisplay-1 フォントウェイト 400
- h5
-
Regular 24spheadline フォントウェイト 400
- h6
-
Regular 20sptitle フォントウェイト 500
<head>の最初の要素としてコードをコピーします。<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
アイコン
マテリアルデザインアイコンは、Googleマテリアルデザイン仕様で紹介されている公式のオープンソースアイコンです。含まれるもの
- 24pxと48pxの両方のサイズのすべてのアイコンのSVGバージョン
- すべてのアイコンのSVGおよびCSSスプライト
- Web向けの1倍、2倍のアイコン（PNG）
- iOS向けの1倍、2倍、3倍のアイコン（PNG）
- すべてのアイコンの高解像度バージョン（hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi）（PNG）
はじめに
アイコンを取得するには、いくつかのオプションがあります。
Zipをダウンロード
マスターから最新版のすべてのアイコンを含む、最新の安定したzipアーカイブ（約57MB）を入手してください。
Bower
$ bower install material-design-icons --savenpm
$ npm install material-design-icons --save使用方法
含まれているindex.htmlファイルで、セットに含まれるすべてのアイコンのプレビューを確認してください。プロジェクトに最適な方法でアイコンを自由に使用できます。
構造
一般的に、アイコンカテゴリ（例：アクション）には、複数の解像度のアイコンを含む次のディレクトリが含まれます。
- 1倍、2倍 Web
- 1倍、2倍、3倍 iOS
- drawable hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi
- svg
プロジェクトに必要なアイコンの解像度を決定し、コピーして、使用するアイコンを参照します。
スプライトシート
マテリアルデザインアイコンには、含まれるアイコンのカテゴリごとにSVGおよびCSSスプライトが付属しています。これらは、spritesディレクトリのsvg-spriteとcss-spriteにあります。
CSSスプライトの使用
CSSスプライトシートを使用するには、使用したいアイコンカテゴリのスタイルシートを参照し、マークアップにアイコン定義を含めます。例：css-sprite-avの再生アイコンの1つを使用するには。
それだけです！プロジェクトをデプロイするときは、対応するCSSおよびSVG / PNGファイルを公開することを忘れないでください。
<link href="css-sprite/sprite-av-black.css" rel="stylesheet"><div></div>iconスプライトシートと特定のicon icon-ic_play-circle_outline_black_24dpを参照するクラスを追加します。これは上記のスタイルシートから取得できます。<div class="icon icon-ic_play-circle_outline_black_24dp"></div>SVGスプライトの使用
同様に、SVGスプライトシートを使用するには、アイコンカテゴリのスタイルシートを参照し、マークアップにアイコン定義を含めます。
svg-sprite-avの再生アイコンの1つを使用するには、スタイルシートを参照します<link href="svg-sprite/svg-sprite-av.css" rel="stylesheet"><div></div><style>
.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
</style>svg-ic_play_circle_outline_24pxを設定します。これは上記のスタイルシートから取得できます。<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"> </div>Polymerアイコン
Polymerでアイコンセットを使用する場合は、<iron-icons>-elementを介して使用することをお勧めします。
ライセンス
すべてのアイコンは、Attribution 4.0 Internationalライセンスでリリースされています。
カラーパレット
拡張カラーパレットを使用している場合は、最初の色をアプリのプライマリカラーとして使用し、他の色をアクセントとして使用します。
すべての色とそのアクセシビリティ比を参照してください。このリソースには、色の背景に白または黒のテキストを使用する場合の適切なコントラスト比とアルファ値に関する情報が含まれています。
