ウェブサイトの制作・検証に役立つブックマークレット集

ウェブサイトの制作・検証に役立つブックマークレットをspeckyboyから紹介します。

Bookmarklets for Web Developers and Designers

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
ブラウザのサイズ変更:240x320
ブラウザのサイズ変更:480x640
ブラウザのサイズ変更:640x480
ブラウザのサイズ変更:800x600
ブラウザのサイズ変更:1024x768
ブラウザのサイズ変更:1280x768
ブラウザのサイズ変更:1600x1024

検証やチェック

HTMLの検証をします。

Bookmarklet
W3C Validate HTML
Quick Validate HTML

CSSの検証をします。

Bookmarklet
W3C Validate CSS

リンクのチェックをします。

Bookmarklet
W3C Link Checker

スタイルシート・スクリプト関連

スタイルシートやスクリプトを表示します。

Bookmarklet
View CSS
View Scripts
1
');w.document.write('

%E2%80%98);w.document.close();var%20wp=w.document.getElementById(%E2%80%99props%E2%80%99);Ev(document.childNodes);function%20ES(e){var%20o,s=%E2%80%9D,nm=e.nodeName;var%20p=w.document.getElementById(%E2%80%99prop%E2%80%99).value;if(e.id)nm+=%E2%80%99#'+e.id;if(e.className)nm+=%E2%80%99.'+e.className;if(document.defaultView)s=document.defaultView.getComputedStyle(e,null).getPropertyValue(p);else%20if(e.currentStyle)s=eval(%E2%80%99e.currentStyle.%E2%80%99+p);o=nm+%E2%80%99%E2%86%93%20%20%20%E2%80%B2+p+%E2%80%99:%20%E2%80%B2+s+%E2%80%99%E2%80%98;wp.innerHTML+=o;w.document.close()}function%20Ev(ch){var%20i,e;if(ch)for(i=0;iList Computed CSS Style

テーブル関連

テーブルや見出し、セルを表示します。

Bookmarklet
テーブルの見出しを表示
テーブルをハイライト表示
テーブルのセルを表示

その他、開発者用

サイトの編集をしたり、ショートURLを作成したり、その他開発者向けのブックマークレットです。

Bookmarklet
サイトの編集
現在のサイトの編集
画像のドラッグ&ドロップ
スクリーンショット -webshotspro
カラーリストの作成
ショートURLの作成 -tinyurl
リファラーの取得
画像のズーム
ドメインのトップへ移動
ページのズームイン
ページのズームアウト
背景をクリア
テキストカラーの変更
リンクをハイライト
HTPPヘッダの取得

top of page

©2017 coliss