Googleが2014年に提唱したデザインガイド「マテリアルデザイン」。最近の新しいウェブサイトでも、このマテリアルデザインの考え方や基本原則を取り入れたものが増えています。 今回は、コピー&ペーストで手軽にマテリアルデザインを再現できるHTML/CSSスニペットをまとめています。 対応しているスニペットは、ナビゲーションメニューやドロップシャドウなど特長的な素材から、ボタンやカード型レイアウト、Preloader、ホバーエフェクト、チャット機能、モーフィングアニメーションなどさまざま。ゼロからスタイリングすると時間のかかってしまう作業を短縮できるものも多く、ぜひ実践の現場で役立ててみてはいかがでしょう。 マテリアルデザインを手軽に!CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ お好みのマテリアルデザイン配色でHTMLスニペットを一発作成で
![コピペ可ですぐに役立つ!マテリアルデザインを極めるHTML/CSSスニペット30個まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/040aea253da437035b636629a915dc893056f576/height=288;version=1;width=512/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2017%2F07%2Fmaterial-design-snippet-1.jpg)