【Webデザイン】Webサイト制作に役立つブックマークレット


ブックマークレットとは?

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
1

Design

Webサイト上のサイズを測るブックマークレット。グリットを表示させ詳細に設定したり、定規・ルーラーを表示させ横幅・縦幅を測定できます。ルーラーはPhotoShopやIllustratorと同様に左上をドラッグして起点を変更することができます。

2

MRI

ポップアップに調べたいセレクタ名を入力すると、その要素がハイライトで表示されます。(上図はh2を指定した場合)また、同サイトでは要素の縦横サイズ・プロパティを調べられるXRAYもあります。

3

Wirify

ブックマークレットをクリックするだけで閲覧中のサイトがワイヤーフレームで表示されます。

4

VIEWPORT RESIZER

スマホ・タブレット等のデバイスや、任意のカスタマイズサイズで表示確認ができます。レスポンシブ対応サイトなど調べる時に重宝します。

5

Get URL Info

description・Keywordなどのページ情報からページランク・サーバー情報・はてぶのコメントまで調べることができます。

6

WhatFont

フォントをクリックするとフォント情報を表示してくれるブックマークレット。海外サイトで気になる英文フォントがあった時などに重宝します。

7

SEOチェキ!

SEOチェキ!ブックマークレットをクリックするだけで、対象サイトの計測結果が別窓にて表示されます。※SEOチェキ!のブックマークレットのありかは計測結果ページの右下にあります。

7

Web担当者Forum版 ページ速度分析ツール

ページの読み込みスピードを計測できるブックマークレット。



PICK UP
RELATED POSTS
  • 【jQuery】レスポンシブ対応のタブを実装できる「GridTab」
  • マルチボックスのフルスクリーンメニュー「Multibox Menu」
  • 【jQuery】Youtubeの動画サムネイルをアニメーション表示させる「PreViewTube.js」
  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • 無料で使用できるフリーイラスト素材サイトまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年4月版】
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア