アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
読み間違えると恥ずかしい！デザイン・プログラミング用語15選 | UX MILK
ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
