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

2014/01/17

by sayo

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

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

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

htmlマークアップでタグの意味付け

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

header section nav article figure など。

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

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

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

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

クラス名はコンテンツの意味づけをする

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

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

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

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

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

インデントをキレイに

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

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

関連するコンテンツ

コメント

コメントを残す

この記事と同じ に関する記事です。お役に立ちそうなのはどれですか?

広告

記事はありませんでした

気になる単語をサイト内検索できます

>> 記事一覧を見る(TOPページ)