18
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTMLデザイン検収に、WEBページを直接WYSIWYGできる「jQuery Console」を利用する

Last updated at Posted at 2016-11-24
「jQuery Console」 を機能別に小出しでご紹介しております。

ケース:HTMLデザイン検収に

本題は次項です。こちらはあくまで「使用例」としてご覧ください。

WEBサイト制作において、HTMLのコーディングまではデザイン会社。システムへの組み込みはシステム会社の分担で作業を行う際、
デザイン会社より納品いただいたHTMLデザインをシステム会社でチェックする時のお話。(WEB担当者・デザイナーの方にも寧ろおすすめです)

納入していただいたHTMLコードデザインをチェックする時、致命的になりがちなのが、**「幅考慮の不足」**の見逃しだったりします。

「幅考慮の不足」:HTMLデザインはきれいな表示なのに、いざ、システムに組み込むと、「動的に変化する要素(金額・名称・説明文等)」の幅によってデザインが崩れてしまう事

要件定義で決められていても、検収期間を過ぎてしまい、修正が依頼できない自体になる事も・・
「説明文」であれば一定文字数で切り捨てる等の対応できますが、「コード・番号」、「金額」等はそうもいかず、やむなくHTMLをいじってしまう事態に陥ります。
そうならない為にも、おすすめなのが以下。

既存WEBページだってWYSIWYG(直接編集)できる「jQuery Console」

ひとまず手軽にチェックできるのが**「jQuery Console」「直接編集」**機能。

jqc001n.gif
上記の様に簡単なテキスト修正であれば可能です。(SSL環境下でも、ローカルのhtmlファイルにも対応しています)
F12開発者ツールでHTMLを探る手間もなく、その場で的確かつ直感的にレビュイーに指摘することができるでしょう。

使い方

http://ltside.com/jqc/
を参照。指定のリンクをブックマークに登録し、対象のページでブックマークを開くと右の操作画面がポップアップで開きます。詳細な説明は、リンク先参照。

18
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?