コーディングについて

HTML

株式会社Webの間に制作に関する考え方について久し振りに更新します。過去の記事はこちらです。

先日Yahoo!知恵袋にて「高度なHTML、CSSコーディングとはどういうものを指しますか。」という質問がありました。この質問に回答しベストアンサーとなりました。ここで回答したことには自分のコーディングについての考え方になります。これに少し加筆をしてコーディング時に意識していることをお話しします。

表示が崩れない

大前提の話です。最近は少なくなったように思いますが、一部ブラウザで崩れるケースはあります。これは単なる確認ミスが招いているだけなのですが。ちなみに弊社ではIE6以降、Firefox＆Safari最新版に対応しています。Google Chromeもですね。

ソース上に無駄がない

いくらCSSベースでコーディングをしていても＜div＞タグが多かったり空要素があったりしていたら意味がありません。弊社では見栄えのためだけのタグは記述しません。同様にCSSも無駄のない記述を意識しています。

論理構造に即している

CSSベースなのにテキストが全て＜div＞タグで記述されていることもあります。＜table＞タグと変わらないので全く意味がありません。見出し部分には＜hx＞タグ、本文テキストには＜p＞タグというように定義リストタグ（＜dl＞）やリストタグ（＜ol＞・＜ul＞）など内容に即して意味付けが明確であることが大切です。

ディレクトリ構造

ページ数が多い場合はどのようにグルーピングをするかは重要です。ルートディレクトリに全てのファイルを集めたり、ディレクトリの中に1ページしかないような構造であるとページ間の関連性も不明確にもなるし何よりも管理がしづらくなります。

検索エンジンに最適である

これは上記とどう違うのかわかりづらいかもしれません。しかし非常に大切なことで、例えば＜title＞タグや＜meta description＞タグ、＜meta keywords＞タグが固有化されていないケースなど未だにあります。またページのユニークな部分を主張するような構造にすることもここに該当します。これらはユーザーや検索エンジンに何を伝えたいかが明確になっていないことが原因にあります。また主張が絞り込めいないケースもそうですね。実際にこの部分ができていないために検索エンジンに下層ページが認識されていないケースも把握しています。

表示速度が速い

最近Googleが表示速度をランキングのアルゴリズムに加えました。これは表示速度が早いことがランキングにプラスになること、また逆に遅いことはマイナスになるということです。ここで大切なのは制作会社の作り方によってはランキングが低下する一因となりかねないことです。単に作れればいいという訳ではありません。

管理・更新しやすい

共通部分を外部ファイル化したりディレクトリ構造の作り方などです。これらがきちんとできているかいかんで運用のしやすさは飛躍的に変わります。使う側の立場で作ることが大切です。

わかりやすいソースである

わかりやすさも大事な要素です。例えばCSSを見やすくするために目次を付けたり範囲を指定で設定しています。一見無駄になるのではという感じもしますが、効率化を図り過ぎて逆にわかりづらくなるようなら重複したとしてもわかりやすさを重視することもあります。この点はセンスによるところが大きいです。またCSSだけでなくHTMLをルールに沿った記述にすることも同様です。


というような感じです。これら全てを満たせる訳ではなく状況にあわせてベストな選択をしています。そしてその根拠をきちんと説明することが大切であると考えています。またCSS3を利用することで利便性が高まるので自社サイトではできるだけ新技術を試すことも忘れません。HTML5も同様で非常に興味がありますね。