top > ホームページの作り方 > 5日目 スタイルシートの書き方を学ぶ

5日目 スタイルシートの書き方を学ぶ

サイトをデザインする前に、”管理のしやすい”CSSの書き方について学びましょう。

  1. デフォルトスタイルシートをリセットする
  2. HTMLファイルに出てくる順序でCSSを記述する
  3. CSSプロパティの記述順序を決める
  4. ワイヤーフレームと個別の指定は別にする
  5. CSSの賢い指定方法

当サイトでは、HTMLタグやCSSについて詳細な説明は省いています。HTMLやCSSについて知りたい方は以下のリファレンスサイトなどをご参考ください。

ホームページ制作用のブラウザはFirefoxを使用する

普段お使いのブラウザは何ですか?IEを使用している方がほとんどだと思いますが、ホームページを作る際は、Firefox というブラウザでチェックを行うことをお勧めします。というのも、IEは独自拡張をしてしまうので、多少間違った記述をしても、きちんと見えてしまう場合があります。逆にFirefox で作っていて、IEで確認したらくずれている場合もあります。その場合はIEによるバグか独自の解釈のせいなので、個別にIE専用のCSSをあてたりする必要があるかもしれません。

また、Firefox は、ホームページを制作するのに役立つ「アドオン」というものがあります。例えば、Web DeveloperFirebugなどがあります。使い方は少し難しいと思いますが、デバック(バグを修正すること)に役立つツールです。

ただし、IE9以降であれば、かなりバグが少なくなっているため、IE8以前のバージョンに対応しない場合であれば、IE9以降でホームページの動作確認を行なっても、他のブラウザでバグが起こることはほとんどなくなっています。

デフォルトスタイルシートをリセットする

ブラウザは元々スタイルが指定してあります。例えばh1タグの文字が大きいのは、ブラウザのスタイルシートで設定されているからです。

しかし、ブラウザによってスタイルシートの設定方法が違うので、見た目が異なる場合があります。それを防ぐために一度デフォルトスタイルシートをリセットするのです。

CSSのリセットのコードはいくつかあるのですが、Yahoo!のYUI Reset CSSを使用します。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}

CSSの初期化方法。リセットする?それとも標準化する?

2012年頃から、CSSのスタイルはリセットするのではなく、標準化する、というのが流行りになっています。

例えばh1タグの文字が大きくなるのは、ブラウザのデフォルトCSSによって設定されているからです。また、ブラウザによって、h1タグの文字の大きさなどが異なる場合があります。そのため、ブラウザで指定されているCSSを一旦リセットしてしまおうというのが、リセットCSSです。

ただし、CSSを全てリセットしてしまうと、全てのタグで同一の文字の大きさや色になってしまい、パッと見で、h1タグなのかpタグで指定したのかがわかりにくくなります。

そこで、次の考えとして出てきたのが、ノーマライズCSSという考え方です。ノーマライズCSSは、ブラウザの差異を失くしつつ、タグのデザイン性は保つので、個別にデザインを修正していない場合でも、パッと見はわかりやすくなります。

ノーマライズCSSのダウンロードはこちらから。

ノーマライズCSSの解説についてはこちらをご参考ください。ちょっとむずかしいかもしれませんが。

HTMLファイルに出てくる順序でCSSを記述する

CSSを編集しているうちに、ある要素にはどんなスタイルを指定したのかよくわからなくなってしまいます。それを防ぐためにもやみくもにCSSを指定せず、HTMLファイルに出てくる順番にCSSを指定していきます。

CSSプロパティの記述順序を決める

CSSプロパティの記述順序を決めておくと、二重に指定することがなくなります。

ワイヤーフレームに関するプロパティ

div#name {
/* 表示・配置に関する設定 */
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   text-align: ;
   background: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   min-height: ;
   height: ;
   max-height: ;
   margin: ;
   padding: ;
   border: ;
}

一般的なclass属性

.name {
/* 表示・配置に関する設定 */
   display: ;
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   overflow: ;
   visibility: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   max-width: ;
   min-height: ;
   height: ;
   max-height: ;
   vertical-align: ;
   margin: ;
   padding: ;
   border: ;

/* テキスト・背景に関する設定 */
   color: ;
   font-family: ;
   font-style: ;
   font-weight: ;
   font-size: ;
   text-indent: ;
   text-align: ;
   text-decoration: ;
   letter-spacing: ;
   line-height: ;
   background: ;
}

その他の独自のプロパティ、例えばulの「list-style-type」などはこれらの最後に記述するようにします。

ワイヤーフレームと個別の指定は別にする

私が書きやすいと思う方法なので、一概にこれが一番!とは言い切れませんが、ワイヤーフレームと個別の指定はわけて管理したほうがよいです。

CSSのファイルそのものをわけてもよいですし、同一CSSファイル内で記述する場所をかえてもよいです。

サンプルを示します。HTMLファイルが以下のようなものだったとします。

<div id="header">
   <h1>サイトタイトル</h1>
</div><!-- /#header -->
<div id="contetns">
   <h2>見出し</h2>
   <p>段落段落段落</p>
</div><!-- /#contetns -->

その場合、CSSは以下のようにdivタグで囲んだワイヤーフレームと個別のpタグなどは別に管理したほうがよさそうです。

/**************************************/
/*             wire frame             */
/**************************************/
div#header {
   width:800px;
}

div#contetns {
   width:780px;
   margin-top:10px;
   padding:10px;
}

/**************************************/
/*             div#header             */
/**************************************/
div#header h1 {
   color:#6F86A3;
}

/**************************************/
/*            div#contetns            */
/**************************************/
div#contetns h2 {
   font-size:120%;
}

div#contetns p {
   margin:0 0 1em 0;
}

その際の注意点としてワイヤーフレームのスタイルを指定している箇所では、枠組みとしてのスタイルしか指定してはいけないということです。つまり、CSSプロパティの記述順序を決めるで紹介したワイヤーフレーム用のプロパティのみを使用し、その他のフォントなどの指定は個別で行うべきです。こうしたほうが、テンプレートとその他のデザインがわけられるので、管理がしやすくなります。

CSSの賢い指定方法

CSSは記述の後ろから処理していきます。そのため、子孫セレクタを使うより、idやclassを直接指定したほうが処理速度は早くなります。

例えば以下のようにサブコンテンツとメインコンテンツにpタグがあって、それぞれでスタイルを変えたいと思った場合、

<div id="mainCon">
   <h2>見出し</h2>
   <p>段落段落段落</p>
</div><!-- /#mainCon -->
<div id="subCon">
   <h2>見出し</h2>
   <p>段落段落段落</p>
</div><!-- /#subCon -->

以下の様に、子孫セレクタでスタイルを設定するより、

#mainCon p {
   margin:0 0 1em 0;
}

#subCon p {
   margin:0 0 1em 10px;
}

pタグにそれぞれ、class名を付けて、

<div id="mainCon">
   <h2>見出し</h2>
   <p class="mainText">段落段落段落</p>
</div><!-- /#mainCon -->
<div id="subCon">
   <h2>見出し</h2>
   <p class="subText">段落段落段落</p>
</div><!-- /#subCon -->

.mainText {
   margin:0 0 1em 0;
}

.subText p {
   margin:0 0 1em 10px;
}

としたほうが処理速度は早くなります。

ただ、闇雲にidやclassを指定していければよいというわけでもなく、子孫セレクタを使ったほうがメンテナンスしやすい場合もあります。余計なidやclassを記述しなくてもよいわけですし。どちらにするのがよいかはケース・バイ・ケースですが、セレクタを利用するのも処理速度は多少落ちるとは言えども、人の感覚としてはほとんど差がないレベルです。便利なのでしっかり活用していきましょう。

セレクタを活用することでもっとCSSデザインが楽になる

上記の例の方法を「子孫セレクタ」と言うのですが、他にも様々なセレクタがあります。これをうまく使うことで無駄なclassを使用しないようにしましょう。セレクタに関しては当サイトのblogを参考にしてみてください。

CSS3対応のCSSセレクタ一覧 – CSSデザインノート

ステップアップ!当サイトのコラム

CSSを習得するには時間がかかります。効率的に覚えてしっかりとマスターしましょう。

ページの最終更新日:2015.08.16

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。