読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【ディベロッパーツールでトレペを作る発想】

コーディングテクニック

f:id:wp-lesson:20161008012435j:plain

ウェブサイトのカスタマイズにおいて一番難しくて一番大事なことは、
お客様に「変更後のイメージ」を正確に伝えることだと思います。
 
文字の大きさや余白の広さなど、実際の表示イメージに限りなく近い
「絵」を、カスタマイズをする前に、しかもなるべく時間をかけずに
用意するにはどうすればよいか?

その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
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!