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

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

①拡張子.cssにて、「任意の英数小文字.css」でファイルを作成する

例えば、トップページ用のスタイルシートならtop.cssとか、index.cssなど、あるいは個別ページならpage.cssなど、わかりやすいファイル名を付けておきます。

作成する場所はどこでも可能ですが、ルートディレクトリに設置するか、もしくは「css」などのフォルダを作成し、その中に作成しておくとよいでしょう。

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

次に、スタイルシートを設定したいhtmlファイルのheadタグ内に、以下の記述をして設定します。

<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">と書く人もいれば、leftやrightなどと指定する人もいます。

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

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

htmlとcssの対応


【①htmlファイル側での指定】

まずは、デザインを指定する領域のhtmlに「id」属性や「class」属性を埋め込んでおきます。特定の<div></div>で囲まれた領域に、<div id="outer"></div>や<div class="text"></div>などとあらかじめ書いておきます。

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

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

記述する際は、<div class="hoge">とか、<div id="header">など、任意の英数小文字で書いておくとよいでしょう。

  • 英数小文字で書く

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

  • 意味のある短めの文字列にする
    (ナビゲーション → #navなど)


【②CSSファイル側での指定】

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

①のhtmlファイル上で指定したidやclassの箇所について、スタイルシート側でも対応させて記述していきます。

idで指定した属性には「#」を、class属性には「.」を付けて以下のように書きます。

#example {padding: 10px;}
.example {padding: 10px;}

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

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

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

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

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

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

半角英数で書く

基本的に全て半角英数で書いていきます。
例外として、フォントファミリーの箇所で「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を指定するのとしないのとではブラウザによって表示方法に違いが出てきます。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

外部化せず、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>

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

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

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

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

・htmlファイル側

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

・cssファイル側

.sample {font-size: 14px;}

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

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

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

■まとめ

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

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

・タグにstyle=""で記述 - htmlタグ単位での指定
→ タグ単位での指定のため、煩雑