Resource - レスポンシブWebデザイン

Bootstrapをベースに、新しいコンポーネントやスタイルが追加されたUI開発キット・「Avant UI」

Avant UI Avant UIはBootstrapをベースに作られたUI開発キットです。新しいコンポーネントやスタイルが追加されています。 例えばカラーはSNSなどのブランドカラーやグラデーションが追加されていたり、テーブル...

スマフォで横スクロールがある場合はその旨をアイコンで明示してくれるスクリプト・「ScrollHint」

ScrollHint ScrollHintはスマフォでWebページを見た際に横スクロール可能なtable等があった場合に、その旨をアイコン等で明示してくれるスクリプトです。国産CMSのa-blogを提供するappleple社さんが開発...

CSS変数を利用したパララックスエフェクトをサポートするライブラリ・「basicScroll」

basicScroll See the Pen basicScroll Default Demo by Tobias Reich (@electerious) on CodePen. basicScrollはCSS変数を利用して...
Ads

URL入力だけでスマフォやタブレットで閲覧した際のスクショをまとめて撮れる・「Responsive Screenshots」

Responsive Screenshots Responsive ScreenshotsはURLを入力するとそのアドレスをスマフォやタブレット、ノートやデスクトップPCで閲覧した際のスクリーンショットをまとめて撮ってくれるWebサー...

軽量でレスポンシブ、スタイルも選べるナビゲーションメニューのスタイルシート・「LUXBAR」

LUXBAR LUXBARは羽のように軽量なレスポンシブWebデザイン対応のナビゲーションメニュー用スタイルシートです。カラースタイルもいくつか選べます。これで非圧縮で8kbほどなので確かに軽量な設計ですね。また、ナビゲーションを固定...

Pinterest風でレスポンシブWebデザイン対応のレイアウトを作れてドラッグで位置移動やソートも出来るスクリプト・「MUURI」

MUURI MUURIはPinterestライクなレイアウトを構築出来るスクリプトです。MUURIという名はフィンランドの言葉で壁を意味するそう。レスポンシブWebデザインにも対応しており、任意のキーワードでソートも可能。Hammer...

よく出来たHTMLメールを紹介するデザインギャラリー・「Really Good Emails」

Really Good Emails Really Good Emailsは出来の良い企業のHTMLメールを紹介するデザインギャラリーです。レスポンシブなHTMLメールを紹介しています。SSのみではなく、コードをCodePenで書いて...

レスポンシブWebデザイン対応の棒グラフ、折れ線グラフ、円グラフを作れる・「Pizza Amore!」

Pizza Amore! Pizza Amore!は様々なデバイスで折れ線グラフや円グラフ、棒グラフ等を表示出来るスクリプトです。Foundationを提供するZURBが開発、公開しています。マークアップは簡単なリストにカスタムデータ...

Bootstrapベースで作られたオープンソースの管理画面UIフレームワーク・「CoreUI」

CoreUI CoreUIはBootstrapベースのUIフレームワークです。レスポンシブな管理画面の基礎を用意してくれており、開発スピードを補うものとして公開されています。各コンポーネントも揃えられており、キレイめで見やすい印象でし...

レスポンシブなEメール向けのCSSフレームワーク・「Foundation for Emails」

Foundation for Emails Foundation for EmailsはRWD対応のHTMLメール用フレームワークです。名前の通り、多数の方に愛用されるCSSフレームワーク、Foundationを提供するZURBが公開...

BootstrapとUnderscoresを組合せたモバイルファーストなWordPressテーマフレームワーク・「UnderStrap」

UnderStrap UnderStrapはBootstrapとUnderscoresを組合せたモバイルファーストなWordPressテーマフレームワークです。UnderscoresはAutomattic社の社員さんが開発、公開してい...

レスポンシブなペラページを直感で作成、CC0ライセンスでダウンロード出来る・「Launchaco Website Builder」

Launchaco Website Builder Launchaco Website BuilderはRWD対応のペラページを直感的に作成、ダウンロード出来るWebサイトビルダーサービスです。作成されたファイルはCC0ライセンスで配...

flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」

Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...

モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」

okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...

モバイルサイトの為の軽量でフレキシブルなCSSフレームワーク・「Mobi.css」

Mobi.css Mobi.cssはモバイルサイトの為のCSSフレームワークです。よくあるモバイルファーストよりもよりモバイルにフォーカスして作成されているようで、PCサイトではQRコードを表示するスペースを用意出来るclassが用意...

レスポンシブWebデザインにも対応できるオープンソースのプロトタイピングツール・「PrototypeBrewery.io」

PrototypeBrewery.io PrototypeBrewery.ioはRWD対応のプロトタイピングツールです。直感的に操作可能なインターフェースで独自のCSS、JavaScriptを書くことも出来ます。ビューモードでは各デバ...

Webサイトのテキストのスタイルを作成、CSSでダウンロードできる・「Type Nugget」

Type Nugget Type NuggetはWebサイトのテキストを直感的なUIでスタイル、CSSをダウンロードできるWebアプリです。見出しやパラグラフ、リスト、リンクなどのテキストスタイルを設定、CSSをジェネレートしてくれる...

シンプルなニュースレター発行サービス・「Volleyy」

Volleyy Volleyyはシンプルなニュスレター発行サービスです。レスポンシブWebデザイン対応のメールマガジンを監理・発行出来る、というもの。凝ったことは出来ないにしてもWYSIWYGやグループの作成、テスト送信などなど基本的...

Bootstrapの代替として作られたコンパクトなCSSフレームワーク・「Cutestrap」

Cutestrap CutestrapはコンパクトなBootstrap代替CSSフレームワークです。肥大化したBootstrapをもっとコンパクトに、というニーズはよく見かけますので結構この手のCSSは出回っていますが、本フレームワー...

モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」

Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...

製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」

Products Comparison Table Products Comparison Tableはよくある製品情報の比較tableにフィルタ機能を付与するためのコードです。上記のようなUI。比較対象が沢山ある場合、ユーザーが任意...

ライブ等のイベント管理やチケット販売が可能なオープンソースソフトウェア・「Attendize」

Attendize Attendizeは音楽ライブやイベントなどの管理とチケットの販売を可能にするOSSです。PHPフレームワークのLaravelが使用されています。モバイル、タブレットフレンドリー、embed機能、イベントの主催者、...
Ads