東京のWeb制作会社LIGLIGならできるおもしろいこと。Webサービスシェアこんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。シニガン?な私は裏面(おそらくフィリピン語)を見てもさっぱり作り方がわかりません、クノールなのに...パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。「ブックマークレットってなんだろう?」な方に説明をしておくと、ブックマークレット通常ウェブブラウザでブックマーク(お気に入り)を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。そのようなものをブックマークレットと言う。インストールはそのコードをブックマークするだけで行える。はてなキーワードよりです。画像がなくなっても大丈夫?というコーディング後のよくあるチェックが簡単に出来ます。その場で画像のコピペもできるし、ctrl+z(⌘+z)で操作を戻すことも可能です。要素の幅・高さ・プロパティを表示http://www.westciv.com/xray/画像や要素の幅・高さをホイホイっと調べたいときに便利!正直、プロパティの表示は見づらいので、デベロッパーツールと使い分けましょう。指定のセレクタをハイライトhttp://www.westciv.com/mri/「article」「.box」「#header」など、指定したセレクタをハイライトで表示してくれます。CSS3の装飾を非表示にhttp://davatron5000.github.io/deCSS3/「CSS3非対応のブラウザで見たらどうなるか?」をチェックすることが出来ます。あらゆる装飾を非表示にhttp://min.artequalswork.com/背景や文字色などを取り払って、デザインのバランスを確認することができます。画像のalt属性を一括表示http://www.trustworks.biz/blog/2008/04/alt.htmlページで使っている画像とそのaltを分かりやすく表示してくれます。altの間違いや入れ忘れのチェックに。タグの閉じ忘れをチェックhttp://tockri.blog78.fc2.com/blog-entry-168.html閉じタグの多かったり少なかったりを教えてくれます。ページが急に崩れてエッとなったとき、まずチェックしてみましょう。フォントの名前を教えてくれるhttp://chengyinliu.com/whatfont.html「あのサイトのこのフォントなあに?」を教えてくれます。LIGのサイトでは「Montserrat」というwebフォントを使っていますね。同じ機能でChromeまたはSafariの拡張機能版も配布していますので、お好きなものをどうぞ〜。レスポンシブサイトの確認にhttp://lab.maltewassermann.com/viewport-resizer/ブラウザの拡張機能でも同じようなものはありますが、こちらの方が切り替えがサクサクできてお手軽でした。title、短縮URLなどのページのあらゆる情報を一括表示http://geturlinfo.com/title、description、サムネイルなど、ページの基本情報を見ることが出来ます。titleをぱっと知りたいときによく使います。まとめブックマークレットはお手軽で、いくらブクマしても重くならないのがいいですね!私は、頻繁に使うものは「ブラウザ拡張」、たまにしか使わないかブラウザ拡張より便利なものは「ブックマークレット」と使い分けて、ブックマークバーにブックマークレット用のフォルダを作って使っています。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。