Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
「Ombré(オンブレ)」とはここ数年、海外セレブたちが火付け役となって人気になったオンブレヘアーの美しいグラデーションで、特定の2色間をグラデーションでつなぐデザインです。ロゴデザインではこのグラデーションをベクターベースの面白い形状で色分けして利用しています。 Circles 完璧と無限を表現する美しいサークルは、非常に人気が高いデザイン要素です。最近のトレンドは、サークルの上にサークルを重ねたり、繰り返して使用しています。こういった幾何学的な形はシンプルであればあるほど良く、要素に区別をつける時にはフラットにしたり透明にしたり、グラデーションにしても効果的です。 Half and Half
「COLORION」は指定した色を含むカラーパレットを探し出せるサイトです。五色で彩られたカラーパレットがたくさん登録されていますよ。また、ひとつひとつの色についての詳細情報もまとまっており、気になる色をとことん追求することができます。 以下に使ってみた様子を載せておきます。 まずCOLORIONへアクセスしましょう。 カラーパレットの色は、フルカラーとマテリアルデザイン用の色で分類することもできます。用途に応じて使い分けてみましょう。「SEARCH」メニューから自分で指定した色を含むカラーパレットを検索することができますよ。これだけは使いたいという色が決まっている場合に便利ですね。ログインするとブックマーク機能を利用することも可能。 ひとつひとつの色に対して詳細情報がまとまっています。類似色や補色がひと目で確認できますよ。ぜひWebデザインの配色決めをする際にご活用ください。 COLOR
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く