Web標準、W3C対応、SEO対策、スマートフォンサイト等、HTMLコーディング代行サイトです！全国どこからでもお申し込み可能。

コーディングに関して、サイト構築する際に主に2つのパターンが考えられます。

・サイト全体でページの体裁が整っている
・各ページそれぞれレイアウトが変化する

前者は情報サイトなど、ページ数も多く規模が大きなサイトに、後者は10ページ程度で小規模ながら個性のあるのサイトによく見られます。さて、この大きく分けて2つのパターンのサイトは、どのようにスタイルシート設定すれば効率的でしょうか。

サイト全体でページの体裁が整っている場合は、パーツごと設定するのが効率的です。具体的には、よく使われるパーツにclassセレクタを指定するのです。

HTML

CSS

このサンプルでは、箇条書きリストタグ（ul）に対して、classセレクタをtype1として設定したものです。このように設定することで、何度もスタイルシートで設定することなく、同じ表示形式のタグを簡単に設置することができます。

次に各ページそれぞれデザイン／レイアウトが変化する場合です。この場合はページごとidセレクタをふって、その中で処理するのがよいでしょう。

HTML

CSS

このようにidセレクタの後ろに続けて記述することで、他ページに影響を与えることなくデザイン／レイアウトを設定できるわけです。

2つのパターンの記述法を紹介しましたが、どちらにしてもこれから作ろうとしているホームページの全体像を把握しておくことが大事です。把握できているからこそスタイルシートの記述方法も選べるというもの。スタイルシート制作に入る前に、まずはじっくりとサイト全体を確認しておきましょう。