Web制作に使えそうなWebツールを週一で知らせてくれるメールマガジン・「WEB TOOLS WEEKLY」
WEB TOOLS WEEKLY WEB TOOLS WEEKLYは週一でWeb制作に役立ちそうなWebツールを教えてくれるメールマガジンです。まだ始まったばかりのメルマガですが、今の所はCSSやHTML、JavaScriptに関する...
Resource - レスポンシブWebデザイン
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には対応して...
モバイルファーストなCSSフレームワーク・「Cardinal」
Cardinal CardinalはモバイルファーストなCSSフレームワークです。必要最低限の設計で残りはユーザーがカスタマイズする、という事を念頭に置いて作られたようです。この手のフレームワークは数多に存在しますが、選択肢が大いに越...
レスポンシブWebデザインの表示確認ツール・「Demonstrating Responsive Design」
Demonstrating Responsive Design Demonstrating Responsive DesignはレスポンシブWebデザインのデバイス別の表示を確認出来るツールです。URLを入力すればフレーム内に表示され...
様々なスマフォやタブレット、PCなどのスクリーンのサイズを一覧化・「Screensiz.es」
Screensiz.es Screensiz.esはスマフォやタブレット、PCなどのスクリーンサイズを一覧化したWebサイトです。一覧テーブルではOSや普及率、サイズなどでソートも可能で、不要な項目は非表示にする事も出来ます。 ...
レスポンシブWebデザイン対応のHTML5 / CSS3テンプレートを配布する・「HTML5 Up!」
HTML5 Up! HTML5 Up!は様々なHTML5 / CSS3なテンプレを配布するWebサイトです。全てレスポンシブWebデザインに対応しています。現在12~13個ほどあり、素敵なデザインに仕上がっています。ライセンスはCC-...
レスポンシブWebデザイン対応のWebサイトを構築する為の軽量フロントエンドフレームワーク・「skel.js」
skel.js skel.jsはレスポンシブなWebサイトを構築する為のフロントエンドフレームワークです。19kbと、なかなか軽量で内容も充実した印象でした。使い慣れれば便利そうです。ライセンスはMITとGPL。 skel.js
レスポンシブWebデザイン対応のシンプルで軽量なグリッドシステム・「.FITGRD」
.FITGRD .FITGRDはレスポンシブWebデザインにも対応したグリッドレイアウトを構築する為のCSSです。フレームワークではない、との事です。（当記事では一応フレームワークのカテゴリに含めています）CSS自体は非圧縮でも4KB...
手軽にHTML形式のプレゼンテーションを作成できる・「Slid.es」
Slid.es Slid.esは、HTML形式のプレゼンテーションスライドを手軽に作成、共有出来るWebサービスです。モバイルにも対応しています。WYSIWYGを使ってスライドを作成していきます。アカウントはGoogleやFacebo...
Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」
Topcoat TopcoatはAdobe社が提供するOSSのCSSフレームワークです。シンプルで使いやすいUIでレスポンシブWebデザインにも対応しています。モバイル版はタップしやすいようにエレメントの高さをやや高くしてくれてるのも...
CSSフレームワークの機能が一目で分かる一覧表・「CSS Front-end Frameworks with comparison」
CSS Front-end Frameworks with comparison CSS Front-end Frameworks with comparisonは様々なCSSフレームワークの持ち合わせている機能を一目で確認出来る一覧...
デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」
Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...
レスポンシブ且つグリッドなレイアウト生成ジェネレーター・「gridpak」
gridpak gridpakは、レスポンシブWebデザインに対応したグリッドレイアウトジェネレーターです。従来のグリッドジェネレーターにブレークポイントを設定出来る項目が付いているので操作も楽に行えます。 gridpak
レスポンシブWebデザイン対応確認用ブックマークレット・「VIEWPORT RESIZER」
VIEWPORT RESIZER VIEWPORT RESIZERは、閲覧中のWebサイトをリサイズしてレスポンシブWebデザイン対応状態を表示確認するブックマークレットです。PCと、タブレットやスマフォサイズに対応。 VIEW...
レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」
The Responsinator The Responsinatorは、レスポンシブWebデザインの表示テストを行えるツールです。縦長になってしまうのですが、まとめて表示確認出来るのは便利だと思います。 The Respons...
レスポンシブWebデザイン対応のテンプレ生成ジェネレーター・「Responsify」
Responsify Responsifyは、レスポンシブWebデザインに対応したWebサイトのテンプレートを作成出来るジェネレーターです。グリッドのカラム数やブレークポイントなどを指定してからダウンロードします。 Respon...
画面サイズごとの表示を確認出来る・「Screenqueri.es」
Screenqueri.es Screenqueri.esはレスポンシブWebデザインの表示確認ツール。iPhone、iPadやAndroidのような人気デバイスに限らず、GalaxyやBlackBerry、Kindleなど様々なデバ...
HTML5のテンプレートを作るスタータージェネレーター・「Initializr」
Initializr InitializrはHTML5で作るWebサイトを構築するためのスターターキットをジェネレートするツールです。様々なオプションもあるので好みの雛形を作成する事が可能です。 Initializr
iPhone/iPad用のPhotoshop用テンプレート・「Photoshop Grids」
Photoshop Grids Photoshop Gridsは、iPad/iPhone用のグリッドとして作られたPhotoshop用テンプレート。ガイドも既に引かれており、モバイルファーストなWeb制作向けとして使えるようになってい...