私がよく使っているWebサイト作成に役立つブックマークレット

そもそもブックマークレットって？という方もいるかと思います。

もう少し詳しく説明するとこんな感じです。

ということで、プログラムを起動するボタンとしてブックマークを使う感じです。では、私が普段から使っているお勧めブックマークレットを紹介します。

XRAY

クリックした要素の内容を表示してくれます。topやleftなどの位置関係、width、height、margin、paddingなどのボックスに関することなどが一目で分かります。

ColrGrabr

そのサイトにどのような色が使われているか教えてくれます。

Design

サイト上にグリッドを表示するブックマークレットです。メジャーを表示できたり、サイズを測れたりもできます。

グリッド表示してくれるブックマークレットとしては、960 Gridderというのもあります。

SubtlePatterns Bookmarklet

テクスチャ素材で有名なSubtle Patterns。ここで提供されている素材を背景に適用するブックマークレットです。その都度ダウンロードする必要がないので便利です。

Announcing cssess

使われていないスタイルを教えてくれます。複数のページをまたいで調べてくれますので便利です。

フェイスブック関連のスタイルがたくさん出てくるときがたまにきずですが。。

Viewport Resizer

レスポンシブなサイトの表示確認に便利なブックマークレットです。スマホやタブレットなど様々なデバイスでの表示確認に便利です。表示確認する方法はウェブサービスや他のブックマークレットなどもありますが個人的にはこれがお勧めです。

CSSrefreshFrame

CSSを変更した際にブラウザを更新することなく変更した箇所が適用されます。どういう仕組みか分かりませんが作業時間の短縮になって便利です。

Webサイト表示のどこが遅いかを一発で調べるブックマークレット

サイトが表示されるまでの時間と問題点を教えてくれます。いつも怒られてばかりです。

さいごに

ということで、個人的に使っているブックマークレットを紹介しました。ブックマークレット自体使ったことがないという方もいるかもしれませんが、知っておいて損はないと思います。

ウェブサイト作成に使うブックマークレットに限定したため8つと少ないうえに有名なものも多いですが、1つでも新しい発見があればうれしいです。