CSSのbackground-blend-modeとgradientを使った背景パターンを公開する・「CSS Gradients with background-blend-mode」
CSS Gradients with background-blend-mode CSS Gradients with background-blend-modeはタイトル通り、background-blend-modeとgradie...
Resource - CSS/HTML
Google製のマルチデバイス対応Boilerplate・「Web Starter Kit」
Web Starter Kit Web Starter KitはGoogle製のWeb制作スターターキットです。マルチデバイス対応のレスポンシブなBoilerplateとなっています。パフォーマンスも最適化済みの様です。この辺はさすが...
多数のコンポーネントが備わったCSSフレームワーク・「Maxmertkit」
Maxmertkit Maxmertkitはタイポグラフィやテーブル、ボタンやタブなどなどWebサイトに必要なコンポーネントを大量に備えたCSSデザインフレームワークです。RWDにも対応しています。Bootstrapのような使い方が出...
モバイルファーストなUIコンポーネントのコレクション・「Titon Toolkit」
Titon Toolkit Titon ToolkitはモバイルファーストなUIコンポーネントのコレクションです。レイアウトやエフェクト、パンくずやボタン等のエレメントからアコーディオンやタブなどのモジュールまで様々。ボリュームも結構...
Google+スタイルのBootstrap・「Bootplus」
Bootplus BootplusはGoogle+スタイルのBootstrapテーマキットです。各コンポーネントもGoogle+を彷彿とさせるUIに仕上がっていました。なかなか素敵。ライセンスはフッターに記載されていますのでご利用の際...
テンプレートも用意されている軽量なレスポンシブWebデザイン対応CSSフレームワーク・「Responsee」
Responsee Responseeは軽量で直感的に使えるCSSフレームワーク。直感的と感じるかどうかは個人差はあるかもしれませんが、本サイトでそう謳っていましたのでそうなんでしょう。RWDに対応しており、PSDも配布されています。...
Bootstrap向けのレスポンシブなメガメニューを実装する・「Responsive Bootstrap MegaMenu」
Responsive Bootstrap MegaMenu Responsive Bootstrap MegaMenuはBootstrap向けのRWDに対応対応したメガメニューです。ドロップダウンメニューの中には動画やGoogleマッ...
Bootstrapベースの管理画面向けテンプレート・「AdminLTE」
AdminLTE AdminLTEはBootstrap 3をベースとしたコンロールパネル向けのデザインテンプレートです。BootstrapベースなのでRWDにも対応しているのは楽でいいですね。サンプルをざっと見た感じは、かなり良くでき...
スマフォ向けWebアプリの為のシンプルなコンポーネント集・「Ratchet」
Ratchet Ratchetはスマフォ向けWebアプリの為のシンプルなコンポーネント集です。Bootstrapと同じ開発元で公開されていました。スマフォ専用のBootstrapなのかもしれないですね。基本的なものは一通り揃っています...
CSSのみで作られたUIコンポーネント集・「Pure CSS Components」
Pure CSS Components Pure CSS ComponentsはCSSのみで作られたUIコンポーネント集です。タブやモーダルウィンドウ、カルーセル、アコーディオン、ドロップダウンメニューなどの実装コードが紹介されていま...
スピード構築に拘ったRWD対応のグリッドシステム・「Jeet」
Jeet Jeetは高速構築を目指したレスポンシブWebデザイン対応のCSSグリッドシステムです。柔軟性、使いやすさを重視した、との事。SASSにも対応しています。使いやすいかどうかは個人差があるでしょうけど、個人的には良さそうな印象...
Webサイトでよく用いられるパーツやコンポーネントのデザインフレームワーク・「Refills」
Refills RefillsはWebサイトでよく用いられるUIのソースをパッケージ化したフレームワークです。Bourbonを開発したthoughtbotが公開したフレームワークのようですね。ドロップダウンやリスト、フッター、アイキャ...
CSSで書かれたフラットデザインなiPhoneやiPad・「devices.css」
devices.css devices.cssはフラットデザインなiPhoneやiPadをCSSで書くためのコードです。シンプルで見やすいので、モニタ部分に画像をはめ込んでモックアップにしたりもできそうですね。利用シーンは多くはないで...
CSS3によるユニークなホバーエフェクトをまとめた・「iHover」
iHover iHoverはCSS3によるユニークなアニメーションホバーエフェクトをまとめて、パックにして配布するWebサイト。サークルタイプで20種類、スクエアタイプで15種類のエフェクトとソースが紹介されています。CSS3なので使...
WebベースのiOS7アプリ向けHTMLフレームワーク・「Framework7」
Framework7 Framework7はWebベースのiOS7アプリ向けに開発されたHTMLフレームワークです。iOS7のようなフラットなデザインで各UIコンポーネントもiOS7を意識した作りとなっています。ライセンスはMITとの...
Flexboxを使ったCSSグリッドシステム・「Flexbox Grid」
Flexbox Grid Flexbox GridはCSS3のFlexboxを使用したRWD対応のグリッドシステムです。flexible boxを使う事により、軽量でシンプルな設計を実現できそうですね。対応ブラウザはCan I Use...
シンプルなプリローダーを実装するCSS・「(cs)spinner」
(cs)spinner (cs)spinnerはCSSのみで作るシンプルなプリローダーを実装するCSSです。CSSで描かれたエレメントをアニメーション表示させています。非常に軽量なので、少しでも軽くしたいモバイルサイト等に良さそうです...
使い易さを重視したOSSのCSS/HTMLフレームワーク・「WEBPLATE」
WEBPLATE WEBPLATEは使い易さを重視したフロントエンドのフレームワークです。RWDやSASSにも対応しています。使いやすい、というのは本フレームワークの開発者さんの言葉を借りましたが、使いやすいかどうかは個人差もあると思...
レスポンシブWebデザイン対応のシンプルなHTMLメールのフレームワーク・「CERBERUS」
CERBERUS CERBERUSはRWD対応のシンプルなHTMLメールのフレームワークです。GmailやYahoo!メールからOutlookやThunderbird、iOSやAndroidのメールに対応可能です。レイアウトのみで装飾...
Font Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSS・「Font Awesome Animation」
Font Awesome Animation Font Awesome AnimationはFont Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSSです。CSSを読み込んで指定されたclassを加えればア...
SASS対応のモバイルファーストなレスポンシブWebデザイン向けCSSフレームワーク・「Sculpt」
Sculpt SculptはモバイルファーストなRWDのWebサイトを構築する為のCSSフレームワーク。SASS対応で軽量に作られているようです。とても良さそうではありますが、クリエイティブコモンズ4.0の表示必要なライセンスの元での...
クオリティの高めなTwitter Bootstrapテーマを紹介する・「Black Tie」
Black Tie Black Tieはクオリティの高いTwitter Bootstrapテーマを紹介するWebサイトです。アプリのライディングページやフラットデザイン、ポートフォリオなどなどが用意されています。数はまださほど多くあり...