1. TOP >
  2. 運営者紹介 >
  3. 運営者ブログ >
  4. サイト構成に合わせたスタイルシート設定

運営者ブログ

サイト構成に合わせたスタイルシート設定

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

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

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

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

HTML

<ul class="type1">
 <li>テキスト</li>
</ul>

CSS

ul.type1 {
 list-style-type:disc;
}
ul.type1 li {
 border-bottom:solid 1px #000000;
}

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

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

HTML

<div id="type1">
 <ul>
  <li>テキスト</li>
 </ul>
</div>

CSS

div#type1 ul {
 list-style-type:disc;
}
div#type1 li {
 border-bottom:solid 1px #000000;
}

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

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