Web制作に役立つ便利すぎるブックマークレットのまとめ
Post on:2015年4月2日
sponsors
Webサイトの制作に役立つ便利なブックマークレットを紹介します。
ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。
- ページにグリッドを表示した確認
- レスポンシブWebデザインの確認
- デザインの確認をピクセル単位でできる
- ページで使用しているフォントをチェック
- ページをワイヤーフレーム化
- ページの構造が正しいか確認
- マークアップのいまいちな箇所を指摘してくれる
- 背景を素敵なテクスチャに変えてみたい
- ページのパフォーマンスを確認
- minifyされたCSSを見やすく表示
- SEOやソーシャルメディアに大切な項目を確認
- コードとアクセシビリティをチェック
ページにグリッドを表示した確認
BootstrapやFoundationで採用されているグリッドを表示します。
※キャプチャに使ったページ：Grid Template for Bootstrap
左右中央寄せ・天地中央のレイアウトに自由にグリッドを配置できます。グリッドの他に、ルーラー・ユニット・クロスヘアーのツールもついています。
ページ幅が960pxに特化したグリッド表示を表示します。
レスポンシブWebデザインの確認
表示しているページをデスクトップ・スマフォ・タブレットなどのあらゆるサイズに変更して確認できます。カスタマイズも可能。
デザインの確認をピクセル単位でできる
表示しているページに画像をオーバーレイで表示し、デザインの確認をするためのブックマークレット。画像はローカルのものも指定できるので便利。
ページで使用しているフォントをチェック
ページで使用しているフォントの種類、サイズ、カラーなどの情報を表示します。日本語フォントもでます。
ページをワイヤーフレーム化
表示しているページのコンテンツや画像やテキストを使って、ワイヤーフレーム状にします。
ページの構造が正しいか確認
表示しているページからあらゆる飾りを取り除き、グリッドやレイアウトのバランスや要素の構造など、ページデザインのもっとも大切な基本となるポイントを確認できます。
マークアップのいまいちな箇所を指摘してくれる
表示しているページの必須属性のない要素、空要素、廃止予定の要素など、アクセシブルではないマークアップ、validでないマークアップ箇所を指摘してくれます。
背景を素敵なテクスチャに変えてみたい
もしも背景を紙にしたら、ドットにしたら、どうなるか、というのを簡単に試すことができます。
Bootstrapを布地にしてみました。
ページのパフォーマンスを確認
ページに配置されている画像それぞれのロード時間とタイミングを元にページのパフォーマンスを表示します。
minifyされたCSSを見やすく表示
改行コードやスペースなど削除されたCSSのコードを見やすいように整形して表示します。ブラウザで表示したコードをさくっと整形するので非常に便利です。
SEOやソーシャルメディアに大切な項目を確認
タイトルや見出しなど、ページ上のSEOに関連する要素とFacebookやTwitterのOGPやMeta情報が正しく記載されているか表示します。
コードとアクセシビリティをチェック
表示しているページのHTMLをチェックし、エラー箇所を表示し、WCAG2.0, Section508のアクセスビリティのチェックもできます。
sponsors
