スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

個人的にお世話になっているウェブサイト作成に役立つブックマークレットを8つ紹介します。1つでも新しい発見があればと思います。

bookmarklet00.png

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

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。 - Wikipediaより

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

ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。 - Wikipediaより

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

XRAY

bookmarklet01.png

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

ColrGrabr

colorgrabr.png

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

Design

bookmarklet03.png

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

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

SubtlePatterns Bookmarklet

bookmarklet04.png

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

Announcing cssess

bookmarklet05.png

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

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

Viewport Resizer

bookmarklet06.png

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

CSSrefreshFrame

bookmarklet08.png

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

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

bookmarklet09.png

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

さいごに

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
大変参考になりました。いくつか使ってみます。
ありがとうございました。
【2013/09/18 21:08】 | ブラックコーヒー #- | [edit]
ブラックコーヒーさん

コメントありがとうございます。
お役に立ってうれしいです。

またお立ち寄りください~
【2013/09/19 19:53】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。