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

RWD施行時に使える、デバイス毎のモニターサイズを視覚的に把握できるチートシート・「Responsive Web Design Cheat Sheet」

Responsive Web Design Cheat Sheet Responsive Web Design Cheat SheetはレスポンシブWebデザインの施行時に使えるモニターサイズのチートシートです。各メジャーなデバイスを...

クオリティの高めなTwitter Bootstrapテーマを紹介する・「Black Tie」

Black Tie Black Tieはクオリティの高いTwitter Bootstrapテーマを紹介するWebサイトです。アプリのライディングページやフラットデザイン、ポートフォリオなどなどが用意されています。数はまださほど多くあり...

軽量でシンプルなCSSフレームワーク・「Bijou」

Bijou Bijouはシンプルで軽量なCSSフレームワークです。圧縮版で2KBほどと、かなり軽量化されています。グリッドレイアウトにも対応できますが、12カラムではなく10カラムで設計されていますね・・なんとなく珍しい気がしました。...
Ads

ベーシックなスタイルのPHP製オープンソースCMS・「PyroCMS」

PyroCMS PyroCMSはOSSとして公開されているPHP製CMSです。ベーシックなスタイルで、基本として欲しい機能は全て搭載されています。アドオンやテーマも充実しているのも良いですね。デモもあるので触ってみては如何でしょう。 ...

CSSからブレークポイントを探して、その設定に応じた幅での表示状態をまとめて確認出来るブックマークレット・「BreakpointTester」

BreakpointTester BreakpointTesterは閲覧しているWebサイトのCSSからブレークポイントを探しだし、その設定幅で表示される状態をまとめて確認出来るブックマークレットです。ツールで決められたサイズで表示確...

フルスクリーン、入れ子、RWD対応などをサポートしたスライドコンテンツを実装するスクリプト・「SLIDEME!」

SLIDEME! SLIDEME!はフルスクリーンや入れ子、レスポンシブWebデザインなどにも対応したスライドコンテンツを実装するスクリプト。スライド内にスライドを入れ子で実装したりも出来ます。スライドに拘ったスクリプトですね。ちょっ...

ダイナミックなグリッドレイアウトを実装するスクリプト・「Free Wall」

Free Wall Free Wallはダイナミックなグリッドレイアウトを実装するスクリプトです。jQuery又はZeptoに依存します。モニターの幅に合わせてレイアウトが可変、ネストされたボックスにも対応しています。オプションも豊富...

レスポンシブWebデザイン対応のHTMLメールのフレームワーク・「Ink」

Ink InkはRWDなHTMLメールのフレームワークです。スマフォの普及でモバイルからメールを確認する機会が増えた方も多いかもしれませんのでニュースレターに導入するのも良いかもしれません。 Ink

レスポンシブWebデザインのリソースをまとめているハブサイト・「Responsive Design Knowledge Hub」

Responsive Design Knowledge Hub Responsive Design Knowledge HubはRWDの情報を収集したナレッジハブサイトです。定義に始まり、チュートリアルやツール、インスピレーション向上...

シンプルで軽量なCSSフレームワーク・「LAYERS CSS」

LAYERS CSS LAYERS CSSはシンプルで軽量なCSSフレームワークです。レスポンシブWebデザイン対応で無駄な装飾等もありません。かなり使いやすい印象でした。シンプルなものをお探しの方は一見の価値はあるかも知れません。ラ...

スマフォやタブレット向けのCSSフレームワーク・CLANK

CLANK CLANKはスマフォやタブレットデバイスのWebアプリ向けに作られたCSSフレームワークです。コンポーネントも多数揃えられており、SCSSで作られているそうです。シンプルで使いやすそうですね。 CLANK

Twitter Bootstrapで作られた様々なテンプレートを配布する・「Start Bootstrap」

Start Bootstrap Start BootstrapはTwitter Bootstrapで使える様々なテンプレートを配布するWebサイトです。ギャラリーサイト用、フルスクリーンなレイアウト、ブログ風など多岐に渡ります。スター...

Twitter Bootstrapでフラットなデザインを構築する為のフレームワーク・「Bootflat」

Bootflat BootflatはTwitter BootstrapベースのフラットデザインなWebサイトを構築する為のフレームワークです。モバイルファーストな設計で、リッチなコンポーネントが多数用意されています。ライトで使いやすい...

Twitter Bootstrapベースの管理画面デザインテンプレート・「TemplateVamp」

TemplateVamp TemplateVampはTwitter Bootstrapを使ったWebアプリの管理画面デザインテンプレートで、無料で配布されています。動作デモをみた感じでは、かなり見やすく使いやすい印象でした。カスタマイ...

RWDのワイヤーフレームを作成出来る・「Responsive Wireframes」

Responsive Wireframes Responsive WireframesはRWD向けのWebサイトのワイヤーフレームを作成出来る、というツール。画面サイズを見ながらレイアウトを作ることが出来ます。凝ったことは出来ませんが...

シンプルで軽量なレスポンシブWebデザイン対応CSSフレームワーク・「KNACSS」

KNACSS KNACSSはシンプルで軽量なCSSフレームワーク。レスポンシブWebデザインにも対応しています。チュートリアルページを確認する限りでは素敵な性能のフレームワークなのですが、CC-BYなので使いどころはある程度限られるか...

モバイルフレンドリーなWebアプリの為のUIコンポーネント・「Brick」

Brick BrickはモバイルフレンドリーなWebアプリの為に作られたUIコンポーネント集です。mozillaから提供されているみたいですね。同じくmozilla提供のX-Tagが使われています。カレンダーやデイトピッカー、スライダ...

デバイス別にレイアウトを作れるレスポンシブWebデザイン用CSS作成ツール・「Responsive Web Css」

Responsive Web Css Responsive Web Cssは、iPhoneやiPad、PCなどのデバイスの画面サイズ毎にレイアウトを作れるレスポンシブWebデザイン向けのCSS作成ツール。ボックスはカラムを追加して幅を...

Bootstrap向けのシンプルなWYSIWYGエディター・「Summernote」

Summernote SummernoteはBootstrap向けのシンプルなWYSIWYGエディターです。jQueryを使って動かしているみたい。機能も非常にシンプルで使いやすいイメージです。ライセンスはMITとのこと。 Su...

Web制作に使えそうなWebツールを週一で知らせてくれるメールマガジン・「WEB TOOLS WEEKLY」

WEB TOOLS WEEKLY WEB TOOLS WEEKLYは週一でWeb制作に役立ちそうなWebツールを教えてくれるメールマガジンです。まだ始まったばかりのメルマガですが、今の所はCSSやHTML、JavaScriptに関する...

YoutubeやVimeo、Googleマップ等をレスポンシブWebデザインに対応させる為のツール・「Embed Responsively」

Embed Responsively Embed ResponsivelyはYoutubeやVimeo、Googleマップ等の埋め込み可能なサービスのコンテンツをレスポンシブWebデザインに対応させるツールです。指示に従って入力すると...

CSSフレームワークのToastをベースとしたWordPressテーマ・「Toastpress」

Toastpress ToastpressはシンプルなcssフレームワークのToastをベースとしたWordPressテーマです。floatを使わず、inline-blockを使ってグリッドレイアウトを作っているのでie7には対応して...
Ads