Webプログラマーに喜ばれるコーディングの心得

Webデザインコーディングは、サイトを制作するプロジェクトの通過点の1つでしかありません。

プログラマーとの連携をしながら作っていかなければいけないものなので、
デザインコーディング担当者だけに都合がよいものではなく、開発に関わる人みんなにとって、わかりやすいものを心がける必要があります。

分かりづらいコーディングは、プロジェクト全体の進行がスムーズに進まなくなるだけでなく、プログラムを組み込むエンジニアや、のちに別な担当者にデザインコーディングする人が変わっても、わかりやすくしておくほうがいいです。

html5では、より内包するコンテンツの意味を重視したタグが増えました。

header section nav article figure など。

デザインコーディングを行う際も、この意味づけに従って記載すると、
ぱっと見ただけで、どこに何があるか誰が見てもわかりやすくなります。

せっかくw3cの専門家が一生懸命考えぬいて作ってくれたルールなので、それに従っておくと、世界共通のルールに乗っかれるので、自然と、誰が見ても、意味がわかるHTMLになります。

また、意味のわかる文書構造のhtmlは、
SEOにもよく、徘徊してきたクローラーにも意味が伝わりやすくなると言われています。

HTMLは意味づけを行うためだけに利用し、デザインやレイアウトはcssを使って、HTMLは極力シンプルにします。

HTMLでレイアウトをせずにスタイルシートでレイアウトするためには、HTMLにクラス名をつける必要があります。

付けるクラス名は、始めて見た人でも、どんな内容が内包されているか意味がわかるものにします。

そうしたほうが、後でプログラムを入れたりする場合にエンジニアさんにもわかりやすいし、自動テストを作る人や、後でデザインコーディングを違う人が修正することになった場合にも、理解してもらいやすくなります。

また、HTMLファイルはプログラムや自動テスト作成者も利用することになるため、デザイン修正のためにHTMLを使うことになると、それだけ競合することになり、互いの作業中断の原因にもなります。

そのため、HTMLは極力シンプルにして、HTMLファイル内にはデザインに関する要素は極力含まないように気を付けます。

インデントを綺麗にすることは、自分がミスしにくくなるだけでなく、同じHTMLファイルを利用するプログラマーやテスト担当者にとってもわかりますくなります。

dreamweaverなら環境設定のコードフォーマットで、あらかじめどのタグはどんなふうにインデントするかなど、設定しておくと、ある程度作業が切りのいいところに、来た時に、メニューからコードフォーマットを選択するだけで、インデントが綺麗に整います。