Webサイトを制作する際、現在ではPC画面のみならずスマートフォンやタブレットPCなどなどあらゆるデバイスできちんとレイアウトが保たれるように制作することが必要になります。それらのいろいろなデバイスで画面確認するための、あらゆる種類の画面解像度での表示をWebページ上で簡単に確認することができるツール「Screenfl…

マークアップされたHTMLソースの記述や文法などをチェックしてくれるツールは数多くありますが、HTMLソース内にある不適切な記述部分をCSSを使って診断・指摘してくれる「holmes.css」が構文チェックをする際に使えそうだったのでご紹介。holmes.css - CSS Markup Detective≫holme…

以前、HTMLソースのチェックツールを「HTMLチェックツール「Another HTML-lint gateway」」にて紹介しましたが、残念ながらいずれもHTML5にはまだちゃんと対応していない模様。現状では、「Quality Assurance tools for HTML5」で紹介されているHTML5用のチェック…

Webデザインをするにあたって、画面サイズは結構重要なもの。一般的と言われている1024×768の画面解像度に加えてモニターサイズのパターンはさまざま。そんな画面サイズをブラウザ上で一発で調整が可能になるツール「resizeMyBrowser」が結構使えそうだったのでご紹介。≫resizeMyBrowser - Web…

Webサイトを構築する際、HTMLの組み方やCSS／JSの構成などでページの表示するレンダリングスピードは変わってくるもの。ページを閲覧するユーザにとってレンダリングスピードをいかに早くするか、が重要だったりします。そんなページのレンダリングスピードを対決方式で比較することが出来るサイト「Which loads fas…

サイトデザインにおいて、ブラウザ上で画面を拡大表示できたり、サイズや使用しているカラーをスポイトで抽出できたりと制作や調査になにかと便利そうなFirefoxのプラグイン「PixelZoomer」をご紹介。≫PixelZoomer - Firefox extension with zoom, measure tool a…

あまり新しいものでもなさそうですが、Web開発者なら誰もが知っているであろうFirefoxプラグインのFirebug。そのFirebugにjQueryの動作確認およびデバッグを追加する拡張プラグイン「FireQuery」なるものがあるもよう。≫FireQuery :: Add-ons for Firefox最近はWeb…

IEの各バージョンでのレンダリング確認は「IE TESTER」を通常よく使用していますが、Microsoftから出されている「Microsoft Expression Web SuperPreview」も結構便利そうです。≫Expression Web team blog : Microsoft Expression …

ちょっと今更な感じもしますが、コーディングやサイト構築際に、何かと役に立つWeb開発補助ツール。ブラウザ毎にさまざま用意されていますが、ここでも２つほど紹介しておきます。まず、Firefoxのアドオン「Web Developer」かなり便利に使えます。≫Webdeveloperのダウンロード：ミナトラボFirefoxに…

コーディング後のブラウザレンダリング確認において結構頭を悩ませるのが、ブラウザによっての各バージョンでのチェック。以前、BrowserShotなるものはここで紹介しましたが、今回は普段よく使っているIE各バージョンでのチェックが可能なツールについて２つほど。まずは「IE Tester」という名のツール。≫IE Test…