コーディングメソドロジー

第15回 大規模サイトコーディング(パーツ編)

大規模サイトでは、テンプレートやインクルードなど、全体の大枠にかかわる部分についてのノウハウのほか、共通パーツについても設計が重要になってきます。大規模サイトの場合、重要になる3つのポイントが、「シンプルなソースコード」「汎用的なclass」「ミスの出にくいHTML」といえます。そんな 3ポイントについて、具体的な例のいくつかをご紹介いたします。

1.boxはコマ切れにする

boxはコマ切れにする

通常、たとえば4つの同じ意味の画像が並ぶ場合、aのようにすべてを1つのboxで囲んでしまうのが、スタンダードなコーディングです。ただし、大規模サイトの場合、bのように、classを共通化して、汎用的に使用できるようにすることで、この場所で使用したスタイルを、別のページでも流用して使うことができるようになります。
この工夫によって、少ないスタイル数で全体を構成することができるようになります。

2.「div」に幅を設定しない

「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の厳密な「マークアップ」の意味を考えると、「グレーゾーン」に入る部分もあります。
コーディングにおける重要性として、厳密なマークアップの意味を追求したほうがいいのか、または、スピーディにたくさんのページを確実に制作することが重要なのか、ソースレベルでの統一感があり、運用開始後も更新しやすいことが重要なのか、といった、サイトに求められていることの優先度を正しく理解して、最適なコーディングをご提案させていただくために、まだまだ毎日が精進の日々と痛感しています。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム