プログラミング

プログラミング

プログレスバーからドロップダウンメニューまで・・・ 自由に使えるマテリアルデザインの傑作コードスニペット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
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

    985 views

    読了時間 : 約5分35秒

    この記事では、素晴らしいマテリアルスタイルのウェブサイトやウェブアプリケーションをつくる際に使えるマテリアルデザインのフリーコードスニペットを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を翻訳・再構成したものです。

     

     

     

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

     

     

    おすすめ新着記事

    おすすめタグ