Web、モバイルのデザイン新基準「マテリアルデザイン」を学ぼう(1) そもそもMaterial Designって?
Googleは2014年にMaterial Designというデザインシステムを公開しました。そして2017年1月時点で、このデザインを活用したアプリがGoogle Play上に100万以上も公開されています。 この連載では、「Material Designとは何か」「どのようにMaterial Designを利用してアプリを作るのか」を解説していきます。 なぜMaterial Designが生まれたのか かつては「パソコン」が唯一のインターネット環境を提供するデバイスとして存在していましたが、この10年で「スマートフォン」や「タブレット」「ウェラブル端末」「コネクテッドカー」「テレビ」など、さまざまなデバイスから利用できるようになりました。 しかし一方で、Googleの「検索」や「メール」といったさまざまなアプリ・サービスは、増え続けるデバイスごとに、異なるユーザーインタフェースで提供し
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python モーダルの作り方 ステップ形式で解説しています. それぞれ Runstan のデモもあります!! 1. Materialize のセットアップ 前回同様 cdnjs 経由で読み込みます. <script src='https://code.jquery.com/jquery-2.1.4.js'></script> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materi
phiary
Google が発表してからちょこちょこ話題に上がっているマテリアルデザイン. 今回はそのマテリアルデザインをベースとしたフレームワーク『Materialize』使ってみたのでそのメモです. 毎回 bootstrap じゃ飽きちゃいますしね♪ Materialize って？ 公式より A modern responsive front-end framework based on Material Design 「マテリアルデザインをベースとしたモダンでレスポンシブなフロントエンドフレームワークです.」 的なことが書かれてますね. ざっくり言うと bootstrap のマテリアルデザイン版です. less ではなく sass 使ってるとことか若干インターフェースが違ったりしますが, 基本的には同じ感じで使えます. Reference Official Github cdnjs Materi
MaterializeCSSのDate Pickerを日本語化する - Null and void
ある意味本家GoogleのMaterial Design Liteよりも良くできているのではないかという感もあるMaterializeCSSですが、カレンダー形式で日付を入力するDate Pickerは一般利用者をターゲットとした場合、日本語化無しに使用してもらうのは困難です。 サイトの解説にはLocalizationに関する説明は全くありませんが、Javascriptのソースファイルを解析するとMaterializeCSSのDate PickerはDate picker - pickadate.jsが元ネタであることがわかりますので、そちらを見ると"translations"の解説がありました。 その解説とソースコードを参照すると、日本語化に必要なパラメータはこんな感じになります。 $(".datepicker").pickadate({ monthsFull: ["1月", "2月",
簡単！マテリアルデザイン「Materialize」でサイト作ってみた！第一回目 | ホームページ制作のLiruuDesign(リールーデザイン)！
Googleが推奨するデザインのガイドライン「マテリアルデザイン」！ いろいろ思うところはあるものの、 Googleが発表したからには、何かしら出てくるんじゃないかと見張っていたら出ました！！ マテリアルデザインを取り入れたフレームワーク「Materialize」を見つけたので、作り方やコンポーネントも紹介します。 掘り出しモノスタンプを見つける「DIG Stamp」 LINEスタンプ宣伝ツール「LINEスタンプPRサービス」を始めました！ LINEスタンプの宣伝になりますので、ぜひ使ってください！！ マテリアルデザインを取り入れたフレームワーク「Materialize」 URL: http://materializecss.com/ 見た目も操作もBootstrapと酷似しているので、Bootstrapを触ったことがある方はすぐ使いこなせます！ ただし、しょーがないんですがIE用にいろい
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails4.2で簡単にマテリアルデザインを使えるmatelializeを試してみた〜matelialize | | Scimpr Blog