「jQuery Console」 を機能別に小出しでご紹介しております。
ケース:HTMLデザイン検収に
本題は次項です。こちらはあくまで「使用例」としてご覧ください。
WEBサイト制作において、HTMLのコーディングまではデザイン会社。システムへの組み込みはシステム会社の分担で作業を行う際、
デザイン会社より納品いただいたHTMLデザインをシステム会社でチェックする時のお話。(WEB担当者・デザイナーの方にも寧ろおすすめです)
納入していただいたHTMLコードデザインをチェックする時、致命的になりがちなのが、**「幅考慮の不足」**の見逃しだったりします。
「幅考慮の不足」:HTMLデザインはきれいな表示なのに、いざ、システムに組み込むと、「動的に変化する要素(金額・名称・説明文等)」の幅によってデザインが崩れてしまう事
要件定義で決められていても、検収期間を過ぎてしまい、修正が依頼できない自体になる事も・・
「説明文」であれば一定文字数で切り捨てる等の対応できますが、「コード・番号」、「金額」等はそうもいかず、やむなくHTMLをいじってしまう事態に陥ります。
そうならない為にも、おすすめなのが以下。
既存WEBページだってWYSIWYG(直接編集)できる「jQuery Console」
ひとまず手軽にチェックできるのが**「jQuery Console」の「直接編集」**機能。
上記の様に簡単なテキスト修正であれば可能です。(SSL環境下でも、ローカルのhtmlファイルにも対応しています)
F12開発者ツールでHTMLを探る手間もなく、その場で的確かつ直感的にレビュイーに指摘することができるでしょう。
使い方
http://ltside.com/jqc/
を参照。指定のリンクをブックマークに登録し、対象のページでブックマークを開くと右の操作画面がポップアップで開きます。詳細な説明は、リンク先参照。