- Coding Methodology
- 第15回 大規模サイトコーディング（パーツ編）
第15回 大規模サイトコーディング（パーツ編）
大規模サイトでは、テンプレートやインクルードなど、全体の大枠にかかわる部分についてのノウハウのほか、共通パーツについても設計が重要になってきます。大規模サイトの場合、重要になる3つのポイントが、「シンプルなソースコード」「汎用的なclass」「ミスの出にくいHTML」といえます。そんな 3ポイントについて、具体的な例のいくつかをご紹介いたします。
1.boxはコマ切れにする
通常、たとえば4つの同じ意味の画像が並ぶ場合、aのようにすべてを1つのboxで囲んでしまうのが、スタンダードなコーディングです。ただし、大規模サイトの場合、bのように、classを共通化して、汎用的に使用できるようにすることで、この場所で使用したスタイルを、別のページでも流用して使うことができるようになります。
この工夫によって、少ないスタイル数で全体を構成することができるようになります。
2.「div」に幅を設定しない
同じようなレイアウトでも、コンテンツ幅いっぱいにレイアウトするboxの場合と、ある装飾枠の中に収めるboxの場合とでは、幅が異なっています。また、2カラム・3カラムのページが混在するようなケースもあります。それぞれ使用する場所によって、異なるクラスを設定する必要が無いように、 margin・paddingのみを設定し、widthを設定しないでおくことで、汎用的なboxとして利用することができます。
3.見出しは「hx」タグのみで記述できるようにする
多くのページで必ず出てくる上に、基本的にすべて統一化されたレイアウトであることが求められる「hx」タグについては、「div」で囲まなくても「hx」タグのみの1行で記述できるようにしておくことで、コーディングのスピードアップと、複数のページ間にまたがる整合性を、確実に担保することができます。
4.マージン設定用共通クラスを利用する
マージンはそれぞれのエリアごとに指定することが多いですが、同じboxを多くのページで流用したい大規模サイトの場合、右記のようなマージンのみ指定したクラスを設定しておき、box固有のclassと重ね合わせ（cascade）することで、ページごとのレイアウトに合わせ微調整できます。
5.改行・インデントルールの統一
アナログ面から意外に重要なのが、視認性です。大boxでは改行は2行分、小boxでは改行は1行分、といったルールや、同じ階層の「div」と「/div」をインデントでそろえるなど、整ったソースコードを記述し、コーダーが一目で構造を把握できるようにしておくことが、ミスを減らし、変更・修正時に迅速な対応ができることにつながります。
【補足】これらのコーディングについては、HTMLの厳密な「マークアップ」の意味を考えると、「グレーゾーン」に入る部分もあります。
コーディングにおける重要性として、厳密なマークアップの意味を追求したほうがいいのか、または、スピーディにたくさんのページを確実に制作することが重要なのか、ソースレベルでの統一感があり、運用開始後も更新しやすいことが重要なのか、といった、サイトに求められていることの優先度を正しく理解して、最適なコーディングをご提案させていただくために、まだまだ毎日が精進の日々と痛感しています。
