【コードからおさらい】HTMLとCSSを使ったマテリアルデザインの応用例まとめ14選！

Googleによる開発以来、様々なサイトやアプリケーションがマテリアルデザインを成功裡に取り入れています。今年はマテリアルデザインの年と言っても過言ではないでしょう。
マテリアルデザインとは、あらゆるメジャーなプラットホームやデバイスに対応可能にするとともに直観的に理解しやすいデザインのためにGoogleが作成したデザイン・ガイドラインのことです。
同じコンセプトをもったメジャー・ストリームであったフラットデザインに比べ、より視覚的・直観的に把握しやすいように奥行きや影などを使用し、「物質感」を出す点が特徴です。
本記事では、まだこの流れになじみがないという方や、よくわからないという方のために、CodepenからいくつかHTLMとCSSの実例を引っ張ってきました。
（画像をクリックするとCodePenにとびます）
 
マテリアル・デザインを応用した各要素については次の記事を参考にしてみてください。
・マテリアルデザインを盛り込める！ユーザフレンドリーなWebフレームワーク10選
・【Googleのマテリアルデザインを応用！】シンプルかつ特徴的なアイコン製作ガイド
・これは便利！【マテリアルデザイン】のカラーパレットを自動で作れちゃうWebサービスを使ってみた
・美しいカードデザインをコードで学ぶ！無料で使えるCSSコンテンツカード用スニペット10選！
 
&nb

リンク元