ウェブサイトの制作に必ず役立つブックマークレットのまとめ

ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。
ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。

レスポンシブの確認はこれが一番便利

サイトのキャプチャ

VIEWPORT RESIZER

表示しているウェブページをデスクトップ・スマフォ・タブレットなどのあらゆるサイズに変更して確認できます。アニメーションの動作が快適です!

サイトのキャプチャ

用意されているデフォルトのサイズ(カスタマイズも可能)

詳しい使い方や特徴は下記ページをご覧ください。

コードとアクセシビリティをチェック

サイトのキャプチャ

HTML_CodeSniffer

表示ページのHTMLをチェックし、エラーを箇所をかっこいいUIで表示します。WCAG2.0, Section508にも対応しているので、アクセスビリティのチェックもできます。

サイトのキャプチャ

コリスで実行、エラーいっぱい、、、

ページに柔軟なグリッドを表示

サイトのキャプチャ

Design

ページにグリッドを表示するものは数多くありますが、左右中央寄せ・天地中央に自由にグリッドを配置できるので非常に重宝するブックマークレットです。マージンやカラム・溝も細かく調整できるので、ほとんどのレイアウトに対応できます。
グリッドの他に、ルーラー・ユニット・クロスヘアーのツールもついています。

Bootstrapや960 Grid Systemを使用する場合は、それに特化したものもあります。

デザインの確認がピクセル単位でできる

サイトのキャプチャ

Image-A-Trois

表示中のページに画像をオーバーレイで表示し、デザインの確認をするためのブックマークレットです。

パネルは3枚まで同時に表示が可能で、左上のピンで固定表示、下部のバーで透明度の調整ができます

サイトのキャプチャ

キャプチャだと分かりにくいですが、画像を半透明にして重ねています。

CSSの変更をリフレッシュ無しで確認

サイトのキャプチャ

CSS Refresh

CSSファイルに変更を加えてもページのリフレッシュ無しで変更を反映させるブックマークレット。
CSSファイルに変更を加えて保存すると、ページのリフレッシュ無しで変更を反映させます。

そして更に進化・改良が加えられ、レスポンシブ対応のフレーム版もリリースされています。

サイトのキャプチャ

CSS Refresh Frame

要素のスタイルを確認

サイトのキャプチャ

XRAY

クリックした箇所のスタイルシートの指定を表示します。

サイトのキャプチャ

CSSのセレクタを確認

サイトのキャプチャ

MRI

MRIには2種類の機能があり、一つはクリックした箇所のCSSでのセレクタを表示します。例えばbody箇所をクリックすると「body, html body, html>body」と表示されます。
もう一つはセレクタをテキスト入力欄に入力するとその箇所をハイライト表示します。これら二つを組み合わせると、どのセレクタにスタイルシートの指定を記述するか明確に分かります。

サイトのキャプチャ

divを入力し、その箇所をハイライト表示

ページで使用しているカラーを抽出

サイトのキャプチャ

Color Grabr

表示しているページのカラーを抽出するブックマークレット。

抽出するカラーはソリッドなものだけでなく、半透明のものも抽出します。

サイトのキャプチャ

coliss.comのカラーをチェック

CSS3をサポートしていないブラウザでの見え方

サイトのキャプチャ

deCSS3

CSS3でスタイルした箇所をサポートしていない古いブラウザでどのように見えるのか簡単に確認できるブックマークレット。
実行すると、こんな感じです。

サイトのキャプチャ

タイトルのシャドウや角丸がなくなっています。

ページの見出しを抽出

サイトのキャプチャ

Flexible Nav

自分のページだけでなく、閲覧している他人のページでも見出しを抽出し、ページ内アンカーの機能も与えるブックマークレット。
対応している見出し要素はh1-3で、日本語のページでも抽出してくれます。

ページの構造が正しいか確認

サイトのキャプチャ

MIN

レイアウトのバランスやグリッドの構造など、ページデザインのもっとも大切な基本となるポイントを確認できるブックマークレット。ページからあらゆる飾りを取り除いて表示します。
実行すると、こんな感じです。

サイトのキャプチャ

飾りを除くことで、レイアウトのバランス、グリッドの構造、タイポグラフィの階層、タイポグラフィによるブランドプレゼンスなどが確認できます。

ページをワイヤーフレーム化

サイトのキャプチャ

Wirify

表示しているページをワイヤーフレーム化するブックマークレット。

画像やテキストだけでなく、動画などもワイヤーフレーム状にしてくれます。

サイトのキャプチャ

Wirifyのデモ

コードをシンタックス化して読みやすく

サイトのキャプチャ

syntaclet

ウェブページでHTML, CSS, JavaScript, C/C++, JAVA, Perl, Rubyなどがハイライトされていないコードをハイライトして、読みやすくするブックマークレット。

サイトのキャプチャ

使用すると、こんな感じに

スマフォやタブレットでもコードが見たい

サイトのキャプチャ

snoopy

iPhone, iPadなどのモバイルデバイスで、表示中のウェブページのソースをシンタックスハイライトで表示できるブックマークレット。
iPod touchでももちろん使えます。

サイトのキャプチャ

左:ページの情報、右:コード

コードはモバイル用に生成されたコードと元のコード、両方表示できます。

top of page

©2017 coliss