プログラミング

プログラミング

PR

プログレスバーからドロップダウンメニューまで・・・ 自由に使えるマテリアルデザインの傑作コードスニペット25選!

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、https://line25.com/free-design-resources/free-material-design-code-snippets
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

5,318 views

読了時間 : 約5分34秒

この記事では、素晴らしいマテリアルスタイルのウェブサイトやウェブアプリケーションをつくる際に使えるマテリアルデザインのフリーコードスニペットを25種類紹介します。以下に掲載したリストに収録したアイテムには、基本的なカラースキームとグリッド設定から、レスポンシブカード、フリップカード、ニュースカード、ブログカード、プロファイルカード、スイッチ、コンテナ要素、フォーム、アイコン、アニメーション付きボタン、ドロップダウンメニューとカルーセルまで、あらゆる要素が含まれています。

 

この記事で紹介するコードスニペットを使って、マテリアルデザイン志向のWebサイトやWebアプリケーションを今すぐ作り始めましょう

 

 

Material Design – Responsive Card

これらのレスポンシブカードのコードスニペットは、すべてのGoogleのマテリアルデザインの原則に従っています。ハンバーガーメニューをクリックすると、画像が小さくなって詳細情報が表示される滑らかなアニメーションが始まります。チーム紹介ページやポートフォリオに適しています。

 

 

Google Now Inspired Flip Cards

これらのフリップカードのコードスニペットは、Google Nowのパーソナルアシスタントのアプリデザインに基づくものです。長いドロップシャドウがあり、クリックかタッチで反転します。

 

 

Parallax Depth Cards

これらのカードはAndy Merskinによってデザインされました。フォトカードには、ユーザーのカーソル位置に合わせて視点を変更することで視差スクロール効果を実現するクールなホバー効果があります。テキストの内容が表示されるのもこの時です。これは素晴らしい!

 

 

 

Product Card

シンプルで無駄のない方法で商品を掲載するのに最適な、このコードスニペットをご覧ください。ホバーアクションによってサイズとカラー情報が表示されます。

 

 

 

Article News Card

このコードスニペットは、雑誌やニュースのウェブサイト、そしてブログに最適です。デザインは、カテゴリ、日付/時刻、コメント、見出し、写真から成ります。

 

 

 

Blog Cards

これは、水平方向フォーマットのブログカード用のもう1つのすばらしいコードスニペットです。それはChyno Deluxeによってデザインされました。写真は斜めに切り取られ、ホバリングで詳細コンテンツを表示します。デザインは全体を通して大変素晴らしいです!


 

 

 

Material Design: Profile Card

マテリアルデザインの原則に従うこのプロファイルカードをチェックしてみてください。水平と垂直の両方向のレイアウトを持ち、デザインはシンプルで無駄が無く、分かりやすいです。


 

 

 

News Cards – CSS only

このニュースカードはCSSでのみ利用できます。 JavaScriptは必要なく、機能的で美しいデザインです。ブログ投稿、ポートフォリオアイテムなどに使えます。

 

 

 

Flexbox Cards

コードスニペットを以下に紹介します。このレイアウトは、さまざまなサイズの見出しに適応可能です。これはCSSのみで作られているので、サイトに簡単に実装することができます。

 

 

 

Recipe Card

食品関連のサイトやブログを運営している場合には、このコードスニペットは皆さんが探していたものかもしれません。メインの画像とレシピカードと全体として美しいデザインのために必要な全てを備えたシンプルかつ効果的なレイアウトです。

 

 

 

Demo Web app UI

マペットにインスパイアされたこのデモウェブアプリのUIを確認してみましょう。これは、マテリアルデザインのトレンドです。 便利なコードスニペットがたくさん含まれています。

 

 

 

Material On/Off Switches

より簡単なコードスニペットの練習のためには、このトグルスイッチを見てみるのが良いでしょう。 フラットカラーとシンプルなスライドアニメーションから成っていて、マテリアルデザインのトレンドにも従っています。

 

 

 

Container Elements

これはマテリアルレスポンスを提供するコンテナ要素のコードスニペットです。 ユーザーのクリックは、マイクロ・インタラクションを伴って登録・記録されます。

 

 

 

Action Button Animation

これは、無料のコードスニペットとして利用できるアクションボタンのアニメーションです。 ドットナビゲーションアイコンを小さなXアイコンに変更し、ドロップダウンナビゲーション、あるいはモーダルウィンドウにリンクすることができます。 他の機能と連携させるためには念入りなカスタマイズが必要であることを覚えておきましょう。

 

 

 

Step-By-Step Form UI

これは無料のコードスニペットとして提供されているマテリアル形式のユーザーインターフェイスです。 現代のWebフォームで使用できるステップバイステップのプロセスがあります。

 

 

 

Custom Tabs

カスタムタブのコードスニペットが必要な場合にはこれが最適です。マテリアルデザインを愛する人たちにとってこれは基本であり、完璧でもあります。切り替えを行って、付属のアニメーションを体験してみてください。

 

 

 

Material Input Form

これは、フローティング入力ラベル付きのマテリアルデザインの入力フォームです。リンクをクリックして、アニメーションを見てみましょう。

 

 

 

Angular Material Dashboard

これは、Ajay Viswanathanによって1からデザインされました。コードスニペットを入手し、皆さんのプロジェクトに取り入れてみましょう。

 

 

 

Material Progress Bar

ここに、シンプルなマテリアルデザインのプログレスバーがあります。マテリアルスタイルのプログレスバーをWebサイトに追加したいなら、このコードスニペットを使用しましょう。

 

 

 

Materialize.css

Materialize.cssは、皆さんのプロジェクトで使用できる、マテリアルデザインに基づいた無料のライブラリです。マテリアルスタイルのウェブサイトを構築するための出発点としてこれを使用してください。それは皆さんが思いつくあらゆるものを実現するのに役立つコードスニペットを含んでいます!

 

 

 

MUI.CSS

これは皆さんのマテリアルデザインプロジェクトを開始する上で、役に立つもう一つのライブラリです。 MUIは軽量で、UIデザインのCSSフレームワークとして使用できます。

 

 

 

Material Bootstrap

Material Bootstrapは、マテリアルデザインのトレンドに基づいてブートストラッププロジェクトを発展させるための便利なコードスニペットを提供してくれます。Bootstrap v4のアップデートに基づいています。

 

 

 

Material Foundation

便利なこのマテリアルデザインライブラリをチェックしてみてください。 皆さんが思いつくすべての要素と、あらゆる事柄を網羅したドキュメントページが付属しています。

 

 

 

Material-UI

Material-UIフレームワークは、マテリアルデザインWebアプリケーションを構築する際に使用できるReactコンポーネント群です。

 

 

 

LumX

LumXはAngularフレームワークベースで、マテリアルデザイン言語を模倣しています。 頻繁に更新がされており、使えるコードスニペットがたくさんあります。

 

※本記事は、25 Free Material Design Code Snippetsを翻訳・再構成したものです。

 

 

 

▼こちらの記事もおすすめです!

 

 

おすすめ新着記事

おすすめタグ