Recent Entries

スポンサーサイト

[スポンサード リンク]


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

ブックマークレット Spry Medias Designが凄く便利です!

[スポンサード リンク]


コリスさんでWebサイトの制作・検証に役立つブックマークレットがたくさん紹介されてました。
その中でもSpry Medias Designがとってもいい感じでした。

リンクをブックマークに登録して使います。(このページで試すならクリックでもOKです。)
Spry Medias Design

このブックマークレットをクリックすると画面右下にこのようなものが現れます。
これがSpry Medias Designだ!

これが、Spry Medias Design本体です。
機能にはGrid、Rule、Unit、Crosshairの4種類があります。

それぞれクリックするとアイコンが青くなり使えるようになります。
Spry Medias Design アイコン選択後

Spry Medias Design

Grid

Gridは簡単に画面上にグリッド線をひけます。
サイズを知っている自分のブログなどで当てはめて試してみるとよくわかると思います。
何に使おうか困りますけど…。

Spry Medias DesignのGridをクリックしてスタートです。

Spry Medias DesignのGrid

Page

  • Align : どっちよりにグリッドを引くかの設定。
  • Size : 全体の横幅と高さの設定。数値を入力。単位を変えられます。
  • Margin : 上下左右のマージン(余白)。

Lattice

  • Columns : 格子の縦棒の設定。
  • Rows : 格子の横棒の幅の設定。

Gutter

  • Column gutter width : 縦棒の幅。
  • Rows gutter width : 横棒の幅。

レイアウト確認する時などの参考にどうぞ。
Sizeの幅にはMarginの幅が含まれていますので間違わないように。

Rule

Webページ上の長さを測れるメジャーです。

まず、Spry Medias DesignのRuleをクリックします。
すると画面の上と左に目盛(黒い帯)が現れます。(px:ピクセル単位)
マウスカーソルを移動すると目盛の目印が動くのがわかると思います。

Spry Medias DesignのRule

はじめは画面左上が0になっていますので、目盛の始まり(0)を変更しましょう。
左上の?マークの上にあるマークをクリックして、測りたい場所の左上までドラッグしていきます。
これで目盛の始まり(0)がそこに移動します。

次に、目盛の上をクリックして下(右)にドラッグすると線が現れるので測りたい場所の終わり部分まで、ドラッグしていきます。下と右、それぞれ行います。
(カーソル移動中、マウスーバーした場所の座標、Node、Classが表示されます。)
線は色んな区切りにスナップするので設定しやすいです。(引き寄せられる。)
終了する時は、左上の[×]か、ページ更新です。

使い方を覚えれば色々な場所の長さを測るのに大変便利なツールになります。
FirefoxのMeasureItよりいいかもしれません。

Unit

これはクリックしたある地点からの座標の差分を表示してくれます。

軸となる地点をクリックしたまま、任意の地点までドラッグしてください。
まぁ、ものさしとして使って良いのではないでしょうか。

Spry Medias DesignのUnitをクリックしてスタートです。

Spry Medias DesignのUnit

  • Difference : なんですか、これは。
  • X difference : 横方向の差分です。
  • Y difference : 縦方向の差分です。

Crosshair

ブラウザの画面上の座標をピクセル単位(px)で表示してくれます。
モニタ全体では無い事に気をつけましょう!

また、ブラウザのブックマークバーやメニューバーの部分は含まれません。
でも、スクロールバー上は測れます。

Spry Medias DesignのCrosshairをクリックしてスタートです。

Spry Medias DesignのCrosshair

さぁ、何に使おうかな。

Spry Medias Designを流してご紹介しましたが、一番お勧めなのはRuleです。
ブログ改造したりする時に測りたい事ってありますよね?
そんな時の為にブックマークバーにSpry Medias Designを登録しておきましょう!

いやぁそれにしてもJavaScriptはええなぁ。
何でも出来るし、カッコええなぁ

Comments

ice0 : No title

これは便利そうですね!
ブックマークレットでここまで出来るとは…。
作者さんもJavaScriptも本当にすごいですよね。

JavaScript、早く使えるようになりたいです。
…でもその前にHTMLとCSSを使いこなせるように勉強しなきゃ……orz

パペポ : No title

>ice0さん
なかなか便利ですよね~
JavaScriptってすごいです。
作者さんは凄すぎです!
Web関係のお勉強がんばってください^^

Comment Form