[B! webデザイン] hpptmsのブックマーク

最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。

hpptms 2016/10/20

リンク

アニメーションが心地よいマテリアルデザインのUIサンプル５選

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

hpptms 2016/10/14

マテリアルデザインって最初フラットな感じでボタンとか機能が分かりやすいことを指してたと思ってたけど、もうフラット以外はセンスな気がしてきた。(公式はまだ読んでない)

リンク

マテリアルデザインのサイトを簡単に作るためのフレームワーク８選

マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali

hpptms 2016/08/18

リンク

CSS3のtext-shadowを使ったテキスト装飾のサンプル集

たまに使うので自分用にメモします。 css3のtext-shadow等を使用したテキスト装飾のサンプルコードの備忘録です。工夫すればいろいろと作れるんでしょうけど、とりあえずよく使うものをピックアップします。自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。 CSS3 text-shadow sampleいろいろ。フォントはGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。 Default