スタイルシートの作り方と書き方

スタイルシートは以下の手順で作成しましょう。

①拡張子「.css」にて「任意の英数小文字.css」のスタイルシートを作成する

例えば、トップページ用のスタイルシートなら「top.css」や「index.css」など、あるいは個別ページなら「page.css」や「entry.css」などわかりやすいファイル名を付けておきます。作成する場所は任意ですが、ルートディレクトリに設置するか、もしくは別途に「css」などの専用フォルダを作成してまとめておくとよいでしょう。

②htmlファイルのhead内にて、作成したCSSファイルのURLを指定する

次に、htmlファイルのheadタグ内に、上記CSSファイルのあるURLを記述して設定します。

<link rel="stylesheet" href="CSSのURL" type="text/css" />

これで①で作成したスタイルシートの内容にてそのページが表示されるようになります。ページごとにデザインを変える場合は、ページごとに違うスタイルシートを用意するとよいでしょう。

ちなみに、URLを相対リンクで指定した場合、CSSとhtmlファイルの階層が違うとリンク切れになってしまう可能性もあるため、省略せずに絶対リンクで指定しておくことをおすすめします。

HTMLとCSSで「id属性」や「class属性」を対応させる

スタイルシートを作成する際、あらかじめhtmlファイル側にも「id属性」や「class属性」を埋め込んでおき、htmlとcssの両方をそれぞれ対応させる必要があります。

例えば、ヘッダー部分については、<div id="header">と書く人もいれば、単に<div id="head">などと書く人もいます。あるいはサイドバーを<div id="sidebar">と書く人もいれば、<div id="left">や<div id="right">などと指定する人もいます。

CSS側で単に#header {ほにゃらら}などと記述しても、ヘッダー部分のデザインが変更されるわけではないため、あらかじめ両方の属性を対応させておく必要があります。

htmlファイル上で<div id="header">と書いた場合には、CSSファイル上でも「#header」と書き、<div id="head">と書いた場合には「#head」などと書いて、htmlファイルとcssファイルのそれぞれを対応させましょう。

htmlとcssの対応

これにより、CSSで該当する箇所を変更すれば、それに対応したHTMLファイルの箇所のデザインが一括で変更される仕組みになっています。

HTMLファイル側での「id」属性や「class」属性の指定方法

HTMLファイルには、デザインを指定したい要素にあらかじめ「id」属性や「class」属性を埋め込んでおきます。

例えば、特定の<div></div>で囲まれた領域に<div id="outer"></div>や<div class="text"></div>などとあらかじめ記述しておきます。

この「id」と「class」の違いについてですが、そのページ内で1回しか使わない要素には「id属性」を使い、何度も出てくる要素には「class属性」を指定します。

  • id → 1回だけ
  • class → 複数回

例えば、ヘッダーやフッターなどはサイト内でひとつしか出てきませんので、そのような箇所には「id属性」を指定するとよいでしょう。一方、広告の領域などは複数回出てくることもあるため、そのような箇所には「class属性」を指定しておくとよいでしょう。

記述する際は<div class="hoge">や<div id="header">など、任意の英数小文字で記述します。

  • 英数小文字で書く

  • 長い場合はハイフンでつなぎ、アンダーハイフンは避ける
    (header_innner → header-innerなど)

  • 意味のある短めの文字列にする
    (パンくずリスト → breadcrumbなど)

  • 先頭に数字は使わない
    (1navや2contentなどはNG。nav1や.content2などはOK。)

数字のみにした場合もそうですが、先頭に数字を記入した場合は反応しないので注意しましょう。

上記は<div>を例にしましたが、同じように<p>や<h1>などでも<p class="hoge">や<h1 id="hoge">、<ul class="hoge">、<span class="hoge">などと指定することができます。

CSSファイル側で対応する箇所のデザインを指定

次に、作成したスタイルシートに指定内容を書いていきましょう。

htmlファイル上で指定したidやclassの箇所について、スタイルシート側でも対応させて記述していきます。HTML側でidで指定した属性には「#」を、class属性には「.」を付けて以下のように書きます。

例えば、HTMLファイルのid属性で<div id="example">などと指定していた場合、スタイルシート側では以下のようになります。

#example {padding: 10px;}

あるいは、class属性にて<div class="example">と指定していた場合は以下のようになります。

.example {padding: 10px;}

このclass属性の点はカンマではなく、ドットコムの「ドット」ですので注意しましょう。

この場合、htmlファイル上のexampleで指定した箇所のpadding(間隔)を10pxで指定するという意味になります。paddingのあと「コロン」で区切って値を記述し「セミコロン」で終了します。

一方、属性を指定していない、一般的なpタグやbody、h1などの要素についてはそのまま記述することができます。

p {font-size: 14px;}
h1 {color: #333333;}

これで、p(段落タグ)の文字の大きさは14px、h1の見出しの色は黒などと指定することができます。このpやh1などについては、どのサイトでも共通して出てくるものですので、そのまま記述しておけばよいでしょう。

追記:HTML5からは「header」や「footer」などについてもそのまま記述できるようになりました。

スタイルシートの書き方のポイント

半角英数で書く

基本的に全て半角英数で書いていきます。

例外として、フォントファミリーの箇所で「font-family: 'メイリオ';」などと全角文字で指定する際はシングルクォートで囲って記述します。

見やすいように整えて書く

スタイルシートは見やすいように改行して形を揃えて書くのが一般的です。インデントで字下げする際は、タブよりも半角スペースを使うようにしましょう。

p {
  font-size: 14px;
}

インデントについての関連ページ:
HTMLソースの書き方

ただし、単に見やすくなるだけで、改行しなくてもサイトの表示には影響ありません。

コメントアウトで注記する

他の人にもわかりやすいよう、コメントを挿入しておくとよいでしょう。

/* コメント部分 */

この箇所の記述は無視されるため、「ここからヘッダー部分」など他の人でも分かり易いように書いておくとよいでしょう。この箇所は無効になるので全角文字で記述してもOKです。複数の人で管理している場合や一時的に無効にしたい部分などに使用すると便利です。

複数の指定をする

2つ以上の複数の指定をする場合、半角英数のコロン「:」と半角英数のセミコロン「;」を使ってまとめて書くのが一般的です。

p {
font-size: 14px;
color: #000000;
}

この最初の「(:)コロン」と後ろの「(;)セミコロン」についてですが、後ろのセミコロンについては複数の指定をする際の区切りになります。そのため、一つのみを指定する場合や複数を指定した際の一番最後のセミコロンについては省略することができます。

例えば、p{font-size:14px}やp{color:#000000}などとひとつのみを記述する際はセミコロンを省略できますが、このふたつを合体させる場合、セミコロンでつなげて以下のように記述します。

p {
font-size:14px;
color:#000000
}

そのため、複数の記述をしたあとの一番最後のセミコロンも省略できます。けれども、後から追加する際など、セミコロンの記述忘れでエラーになる可能性もありますので、すべてを省略しないで書くことをおすすめします。

0の値にはpxなどの単位を付けない

padding: 0px; → padding: 0;

付けてもサイトの表示には影響ありません。

デフォルトの値は記述しない

デフォルトの状態では、背景色は白、文字色は黒、フォントサイズは16pxです。
この状態で指定する場合、background-color: #ffffff;やcolor:#000000;などはあえて指定する必要はありません。

もちろん、記述してもサイトの表示には影響ありません。

ただし、marginについてはデフォルトでは0ではないため、0を指定するのとしないのとではブラウザによって表示方法に違いが出てきます。margin: 0;を指定した場合はびっちりと間隔が詰まるのに対し、何も記述しなかった場合はブラウザ側で自動で間隔をとってしまうので注意しましょう。

アルファベット順で書く

.example {
border:ほにゃらら;
color:ほにゃらら;
font-family:ほにゃらら;
}

b → c → f のアルファベット順で書きましょう。
アルファベット順でなくてもサイトの表示には特に影響ありません。

コロンの後とかっこの前に半角スペースを入れる

text-align:center; → text-align: center;
.example{ほにゃ → .example {ほにゃ

クォーテーションマーク

URLに引用符は必要ありません。

background-image: url('img/bg.png');
→ background-image: url(img/bg.png);

font-family等の場合、ダブルクォート(半角英数でShift+2のキー)ではなく、できるだけシングルクォート(半角英数でShift+7のキー)を使いましょう。

font-family: "ヒラギノ角ゴ Pro W3";
→ font-family: 'ヒラギノ角ゴ Pro W3';

ショートハンドで簡略化する

paddingやmarginの値はショートハンドで簡略化して書くことができます。

例えば、#example {padding: 4px 4px 4px 4px;}は、#example {padding: 4px;}と同じ意味となるため、できるだけ簡略化して記述するようにしましょう。

また、カラーコードについても、#00ffccを#0fcなどと省略して書くことができます。そのほか、背景のbackgroundなど、まとめて書ける場合はショートハンドして簡略化しましょう。

ただし、ショートハンドしなくてもサイトの表示には影響ありません。

同じ記述はまとめて書く

同じ記述の箇所はカンマで区切ってまとめて書きましょう。

例えば、以下の例では「background-color: #cccccc;」の部分が共通しています.

.example {font-size: 94%; background-color: #cccccc;}
.content {background-color: #cccccc;}
#footer {background-color: #cccccc;}

これはカンマ(,)で区切って以下のようにまとめて書くことができるため、CSSの行数を短くすることができます。

.example {font-size: 94%;}
.example, .content, #footer {background-color: #cccccc;}

上から下へ、流れるように書く

親要素で指定されている内容は子要素にも継承されます。そのため、個別にそれぞれ指定するのではなく、代表となる大きな親要素に1回だけ指定し、シンプルに記述するようにしましょう。

例えば、ヘッダーとコンテンツ、フッターのそれぞれの箇所で、文字の大きさを14pxに指定するとします。

この場合、#header {font-size:14px;}や#content{font-size:14px;}など、すべての要素に記述することもできますが、これらをすべて含む親要素のbodyや#outerに1回だけ記述しておくとすべてに適用されます。

また、htmlソースの上から下へ読み込まれる順序にて、スタイルシートでも上から下へ流れるように設定しておくとよいでしょう。フッターの箇所を一番上に、ヘッダーの箇所を一番下になどと書いておくと修正する際に探すのにも手間がかかってしまいます。

加えて、同一箇所の指定は後に記述したものが優先され、前の箇所は上書きされるため、順序を考えて書くようにしましょう。

この順序を間違った場合、サイトの表示に影響出てくることがありますので、注意して記述するようにしましょう。

複数の属性を指定する

class属性やid属性に半角スペースを入れて、複数の属性を追加で指定することができます。

例えば、サイドバーなどで<div class="side">と指定していた箇所が複数あったとします。そのなかのひとつにだけ、上との間にmarginの値を10pxで指定したい場合、半角スペースで区切って、<div class="side example">などと追加して複数指定することができます。

この場合、CSS側では、共通の.side {ほにゃらら}のあとに、その箇所にだけ指定したい.example {margin-top: 10px;}などを追加で書き、順番に記述していくとよいでしょう。

.side {font-size:13px;}
.example {margin-top: 10px;}

それぞれをまったく別の属性で個別に指定することもできますが、共通している箇所は同じCSSを重複して書くことになってしまうため、冗長になってしまいます。共通部分については一括で指定するとよいでしょう。

ただし、冗長になったとしてもサイトの表示には影響はありません。

CSSのチェック

CSSの書き方が正しいかどうかについては、htmlのvalidatorと同様、こちらのW3CのCSS検証サービスを利用してみるとよいでしょう。
The W3C CSS Validation Service - Jigsaw Demo Site

CSSを外部化せず、htmlファイル内に直接記述する方法

上記はCSSファイルを独立させて外部化する方法になりますが、一方でhtmlファイル内にスタイルシートを直接記述する方法もあります。直接記述する場合は上記の「.css」ファイルを作成する必要はありません。

①headタグ内で<style type="text/css"></style>を記述する方法

htmlファイルのhead内に直接記述する場合には、以下のように、<style type="text/css"></style>で囲って記述することができます。

<style type="text/css">
p {font-size: 14px;}
h1 {color: #444444;}
</style>

ちなみに、HTML5からは「 type="text/css"」を省略できるようになったため、HTML5に対応している場合は単に<style></style>で囲って記述することができます。

<style>
p {font-size: 14px;}
h1 {color: #444444;}
</style>

けれども、このようにheadタグ内に記述するとHTMLファイルの記述内容が長くなるため、CSSは外部化させて独立させることが推奨されています。そのページにだけ追加で適用させたい場合などに使用するとよいでしょう。

②htmlタグに直接「style=""」を指定する方法

style=で記述すれば、htmlタグ内にそのまま直接書くこともできます。
HTMLタグにstyle属性の指定方法 style=

例えば、以下のようなスタイルシートがあったとします。

<div class="sample">あいうえお</div>

.sample {font-size: 14px;}

これで「あいうえお」の文字サイズが14pxで表示されますが、これをhtmlタグにstyle属性を使用して直接記述することができます。

<div style="font-size: 14px;">あいうえお</div>

この場合、スタイルシートは必要ありませんが、すべてのhtmlタグにスタイルを指定していくと膨大な量になってしまうため、基本的に外部化して独立させることが推奨されています。

■まとめ

・CSS外部化(※サイト単位での指定)
→ サイトに1個で済むので簡単

・HEADタグ内に<style typeで記述(※1ページ単位での指定)
→ 各ページごとに指定する必要あり面倒

・HTMLタグにstyle=""で記述(※htmlタグ単位での指定)
→ タグ単位での指定のため、量が膨大で煩雑になる