5日目 スタイルシートの書き方を学ぶ
サイトをデザインする前に、”管理のしやすい”CSSの書き方について学びましょう。
当サイトでは、HTMLタグやCSSについて詳細な説明は省いています。HTMLやCSSについて知りたい方は以下のリファレンスサイトなどをご参考ください。
ホームページ制作用のブラウザはFirefoxを使用する
普段お使いのブラウザは何ですか？IEを使用している方がほとんどだと思いますが、ホームページを作る際は、Firefox というブラウザでチェックを行うことをお勧めします。というのも、IEは独自拡張をしてしまうので、多少間違った記述をしても、きちんと見えてしまう場合があります。逆にFirefox で作っていて、IEで確認したらくずれている場合もあります。その場合はIEによるバグか独自の解釈のせいなので、個別にIE専用のCSSをあてたりする必要があるかもしれません。
また、Firefox は、ホームページを制作するのに役立つ｢アドオン｣というものがあります。例えば、Web DeveloperやFirebugなどがあります。使い方は少し難しいと思いますが、デバック（バグを修正すること）に役立つツールです。
デフォルトスタイルシートをリセットする
ブラウザは元々スタイルが指定してあります。例えば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;
}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を用いないようにすることです。CSSの指定を細かくするとできるだけ無駄なclassを使用しなくて済みます。
例えば以下のようにサブコンテンツとメインコンテンツにpタグがあって、それぞれでスタイルを変えたいと思った場合、
<div id="mainCon">
<h2>見出し</h2>
<p>段落段落段落</p>
</div><!-- /#mainCon -->
<div id="subCon">
<h2>見出し</h2>
<p>段落段落段落</p>
</div><!-- /#subCon -->スタイルは以下のように指定します。
div#mainCon p {
margin:0 0 1em 0;
}
div#subCon p {
margin:0 0 1em 10px;
}セレクタを活用することでもっとCSSデザインが楽になる
上記の例の方法を｢子孫セレクタ｣と言うのですが、他にも様々なセレクタがあります。これをうまく使うことで無駄なclassを使用しないようにしましょう。セレクタに関しては当サイトのblogを参考にしてみてください。