にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:23:15.

グリッド背景を加えるブックマークレット

グリッドオブジェクトの配置をピクセル単位で細かく調整したり、ページ全体をグリッドレイアウトで作りたい場合には、背景画像に方眼紙みたいな目盛り画像を指定すると便利。
…という話が、Lucky bag::blogに出てました。

グリッドレイアウトのための背景画像(@Lucky bag::blog)

なるほど確かに、背景画像をグリッドにすれば、ちゃんと望みの位置に配置できているかどうか確認が容易ですね。複数のブラウザでの表示確認でも、同じように表示されているかどうかが判断しやすそうです。

私がウェブページを作るときは基本的にリキッドレイアウト(可変サイズ)なので、グリッドに合わせてレイアウトを作ることはありません。でも、グリッドレイアウトでなくても、あるオブジェクトと隣のオブジェクトとの距離が複数のブラウザで同じにできているかどうかの確認とかにも使えそうです。

ただ、確認のために背景画像の指定をいちいち変更するのは面倒です。
そんな面倒な作業を肩代わりできるブックマークレットが公開されてました。

グリッドレイアウトのための背景画像のための bookmarklet(@subtechグループ)

これイイですね!
これを使えば、目的のページを表示してる状態で、ブックマークレットを選択するだけで、そのページの背景をグリッドに変更できます。もちろん変更は一時的なものなので、リロードすれば元通り。HTMLを書き換える手間は不要だし、他人の作ったページにも手軽に適用できます。(笑)

たとえば、以下はAmazon.co.jpのトップページですが、ここに適用すると...

グリッド適用前

こーんな感じで↓グリッドが現れます。

グリッド画像を背景に指定

こりゃおもしろいですね!(笑)

ぜひ、お試し下さい。(^^;;;

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---