【ディベロッパーツールでトレペを作る発想】
ウェブサイトのカスタマイズにおいて一番難しくて一番大事なことは、
お客様に「変更後のイメージ」を正確に伝えることだと思います。
文字の大きさや余白の広さなど、実際の表示イメージに限りなく近い
「絵」を、カスタマイズをする前に、しかもなるべく時間をかけずに
用意するにはどうすればよいか？
その1つの答えがディベロッパーツールです。
ディベロッパーツールとは、ブラウザに付属している開発ツールです。
ブラウザに付属しているので、当然無料で使えます。
ディベロッパーツールを使うと、プレビューしながらHTMLやCSSを変更
できるので、「こんな感じかな」という時点で画面のキャプチャを取り、
お客様にメールで送れば、イメージが正確に伝わります。
お客様も、細かいレベルで「ここはもう少しだけ大きくして欲しい」
などの要望が言えるので、お互いに手戻りを抑えることができます。
さて、もう少し実務向けのテクニックをご紹介します。
実務向けテクニック
スクリーンキャプチャの画像をCSSで
body { background: url(xxx) no-repeat; }
のようにして、カスタマイズするページの背景画像にします。
あとは、背景画像に合わせてHTMLやCSSを微調整していきます。
そうすると、1ピクセルのずれもなく正確無比な変更ができます。
ちょうど、トレーシングペーパーを敷いて上からなぞると
誰でも同じ絵が描けるのと似ていますね。
実務でウェブのコーディングをする方は
一度試してみてはいかがでしょうか？
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。
