ウェブサイトの制作に必ず役立つブックマークレットのまとめ
Post on:2013年1月22日
sponsors
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。
ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。
- レスポンシブの確認はこれが一番便利
- コードとアクセシビリティをチェック
- ページに柔軟なグリッドを表示
- デザインの確認がピクセル単位でできる
- CSSの変更をリフレッシュ無しで確認
- 要素のスタイルを確認
- CSSのセレクタを確認
- ページで使用しているカラーを抽出
- CSS3をサポートしていないブラウザでの見え方
- ページの見出しを抽出
- ページの構造が正しいか確認
- ページをワイヤーフレーム化
- コードをシンタックス化して読みやすく
- スマフォやタブレットでもコードが見たい
レスポンシブの確認はこれが一番便利
表示しているウェブページをデスクトップ・スマフォ・タブレットなどのあらゆるサイズに変更して確認できます。アニメーションの動作が快適です！
用意されているデフォルトのサイズ（カスタマイズも可能）
詳しい使い方や特徴は下記ページをご覧ください。
コードとアクセシビリティをチェック
表示ページのHTMLをチェックし、エラーを箇所をかっこいいUIで表示します。WCAG2.0, Section508にも対応しているので、アクセスビリティのチェックもできます。
コリスで実行、エラーいっぱい、、、
ページに柔軟なグリッドを表示
ページにグリッドを表示するものは数多くありますが、左右中央寄せ・天地中央に自由にグリッドを配置できるので非常に重宝するブックマークレットです。マージンやカラム・溝も細かく調整できるので、ほとんどのレイアウトに対応できます。
グリッドの他に、ルーラー・ユニット・クロスヘアーのツールもついています。
Bootstrapや960 Grid Systemを使用する場合は、それに特化したものもあります。
デザインの確認がピクセル単位でできる
表示中のページに画像をオーバーレイで表示し、デザインの確認をするためのブックマークレットです。
パネルは3枚まで同時に表示が可能で、左上のピンで固定表示、下部のバーで透明度の調整ができます
キャプチャだと分かりにくいですが、画像を半透明にして重ねています。
CSSの変更をリフレッシュ無しで確認
CSSファイルに変更を加えてもページのリフレッシュ無しで変更を反映させるブックマークレット。
CSSファイルに変更を加えて保存すると、ページのリフレッシュ無しで変更を反映させます。
そして更に進化・改良が加えられ、レスポンシブ対応のフレーム版もリリースされています。
要素のスタイルを確認
クリックした箇所のスタイルシートの指定を表示します。
CSSのセレクタを確認
MRIには２種類の機能があり、一つはクリックした箇所のCSSでのセレクタを表示します。例えばbody箇所をクリックすると「body, html body, html>body」と表示されます。
もう一つはセレクタをテキスト入力欄に入力するとその箇所をハイライト表示します。これら二つを組み合わせると、どのセレクタにスタイルシートの指定を記述するか明確に分かります。
divを入力し、その箇所をハイライト表示
ページで使用しているカラーを抽出
表示しているページのカラーを抽出するブックマークレット。
抽出するカラーはソリッドなものだけでなく、半透明のものも抽出します。
CSS3をサポートしていないブラウザでの見え方
CSS3でスタイルした箇所をサポートしていない古いブラウザでどのように見えるのか簡単に確認できるブックマークレット。
実行すると、こんな感じです。
タイトルのシャドウや角丸がなくなっています。
ページの見出しを抽出
自分のページだけでなく、閲覧している他人のページでも見出しを抽出し、ページ内アンカーの機能も与えるブックマークレット。
対応している見出し要素はh1-3で、日本語のページでも抽出してくれます。
ページの構造が正しいか確認
レイアウトのバランスやグリッドの構造など、ページデザインのもっとも大切な基本となるポイントを確認できるブックマークレット。ページからあらゆる飾りを取り除いて表示します。
実行すると、こんな感じです。
飾りを除くことで、レイアウトのバランス、グリッドの構造、タイポグラフィの階層、タイポグラフィによるブランドプレゼンスなどが確認できます。
ページをワイヤーフレーム化
表示しているページをワイヤーフレーム化するブックマークレット。
画像やテキストだけでなく、動画などもワイヤーフレーム状にしてくれます。
Wirifyのデモ
コードをシンタックス化して読みやすく
ウェブページでHTML, CSS, JavaScript, C/C++, JAVA, Perl, Rubyなどがハイライトされていないコードをハイライトして、読みやすくするブックマークレット。
使用すると、こんな感じに
スマフォやタブレットでもコードが見たい
iPhone, iPadなどのモバイルデバイスで、表示中のウェブページのソースをシンタックスハイライトで表示できるブックマークレット。
iPod touchでももちろん使えます。
左：ページの情報、右：コード
コードはモバイル用に生成されたコードと元のコード、両方表示できます。
sponsors
