ウェブサイトの制作・検証に役立つブックマークレットをspeckyboyから紹介します。
32 Indispensable Bookmarklets for Web Developers and Designers
Layout Grid Overlay
レイアウト用のグリッドをオーバーレイで表示します。
URLを変更すれば画像の変更可。
- Bookmarklet
- Layout Grid Overlay
MRI
セレクタをチェックします。
- Bookmarklet
- MRI
Spry Medias Design
グリッドやルーラーを表示します。
- Bookmarklet
- Spry Medias Design
Quick Accessibility Page Tester
アクセシビリティをチェックします。
- Bookmarklet
- Quick Accessibility Page Tester
Reload CSS
スタイルシートを2秒ごとにリロードします。
- Bookmarklet
- Reload CSS
Slayer Office Mouseover DOM Inspector
DOMをチェックします。
- Bookmarklet
- Slayer Office Mouseover DOM Inspector
Slayer Office Favelet Suite
カラー、ドキュメントツリー、HTTPヘッダなどを表示します。
- Bookmarklet
- Slayer Office Favelet Suite
Wave – Web Accesibilty
アクセシビリティの評価をします。
- Bookmarklet
- Wave – Web Accesibilty
XRAY
エレメントのさまざまな情報を表示します。
- Bookmarklet
- XRAY
ブラウザのサイズを変更
指定サイズにブラウザのサイズを変更します。
- Bookmarklet
- ブラウザのサイズ変更：240×320
- ブラウザのサイズ変更：480×640
- ブラウザのサイズ変更：640×480
- ブラウザのサイズ変更：800×600
- ブラウザのサイズ変更：1024×768
- ブラウザのサイズ変更：1280×768
- ブラウザのサイズ変更：1600×1024
検証やチェック
HTMLの検証をします。
- Bookmarklet
- W3C Validate HTML
- Quick Validate HTML
CSSの検証をします。
- Bookmarklet
- W3C Validate CSS
リンクのチェックをします。
- Bookmarklet
- W3C Link Checker
スタイルシート・スクリプト関連
スタイルシートやスクリプトを表示します。
- Bookmarklet
- View CSS
- View Scripts
- List Computed CSS Style
テーブル関連
テーブルや見出し、セルを表示します。
- Bookmarklet
- テーブルの見出しを表示
- テーブルをハイライト表示
- テーブルのセルを表示
その他、開発者用
サイトの編集をしたり、ショートURLを作成したり、その他開発者向けのブックマークレットです。
- Bookmarklet
- サイトの編集
- 現在のサイトの編集
- 画像のドラッグ&ドロップ
- スクリーンショット -webshotspro
- カラーリストの作成
- ショートURLの作成 -tinyurl
- リファラーの取得
- 画像のズーム
- ドメインのトップへ移動
- ページのズームイン
- ページのズームアウト
- 背景をクリア
- テキストカラーの変更
- リンクをハイライト
- HTPPヘッダの取得
Post on:2009年2月26日
);void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));){kind=link}