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月",
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails4.2で簡単にマテリアルデザインを使えるmatelializeを試してみた〜matelialize | | Scimpr Blog
