TOP  >  WebDesign  >  CSS3 Flexbox UIパターン集「Flexbox Patterns」
2016年06月06日

CSS3 Flexbox UIパターン集「Flexbox Patterns」


CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集﹁Flexbox Patterns﹂です。
flex02
﹁Flexbox Patterns﹂は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。
詳しくは以下

flex01
上記のようにCSSとHTMLがコピーできる形でまとめられているため、技術者でなくてもパーツだけなら簡単に組み込むことが可能です。
現在は実用的なものから、なかなかニッチなものまで全部で10のユーザーインターフェイスが登録されています。シンプルなセットなので、ベースにしてカスタマイズすることもできそうです。ソースはサイト上だけでなく、GitHubにも公開されていましたので、まとめて取得したい方は﹁GitHub – cjcenizal/flexbox-patterns: Patterns for using flexbox CSS to build awesome UI components.﹂もどうぞ。
Flexbox Patterns
※当サイトのに掲載されている一部画像、スクリ－ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 10:55  |  
Category: WebDesign   
tag: CSS CSS3 Flexbox WEBデザイン コーディング
このエントリーをはてなブックマークに追加

関連記事

Default Thumbnailソース付きCSS3で作るボタン「10 Awesome CSS3 Buttons to use on your website」 Default ThumbnailWEBデザイナーのためのフリーリソース集「Free Resources for Web Designers」 CSSのみで実現する軽量なツールチップ「Ballon.css」 Default ThumbnailWEBデザイナーのための12の軽量なCSSフレームワーク「12 Small CSS Frameworks」

Sponsor

最近の記事

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください 【商用可】アナログ感のあるドローイングフリーフォント「THRONE」 アイコンサイズやカラーを選んでSVGで出力できる「ICONSVG」 子どもをイメージしたフリーフラットアイコンセット「Download free Childhood flat icons set」 クリエイター向けモックアップテンプレートまとめ「15 Free Hero & Scene Creator Mockup Templates for Photoshop」 バレンタインを楽しく演出するフリーアイコンセット「50 free valentines themed icons」 インスタグラムの投稿をおしゃれに彩るフリーテンプレートまとめ「10 Free Instagram Story Templates」 花を抽象的にイメージしたパターン素材「Art Dimension abstract patterns」 個性的なラインナップを楽しめるフリーアイコンセット「Emojious Icons」 最新のクリエイティブなフリーフォントまとめ「20 New Free Fonts For 2019」

このブログを購読する

facebook
twitter
rss

Designdevelopについて

 デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。
  
 ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。
  
 ※当サイトのに掲載されている一部画像、スクリ－ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。 
 ※本ブログの﹁プライバシーポリシー﹂です。  

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに！をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る