【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について）
今回は、CSSの基本の「書き方」や「HTML上に置く場所」を見てみよう。
CSSの基本構造
CSSは、セレクタ { プロパティ : 値 } というカタチが基本です。
この要素の { このスタイルを : こうする } という ブラウザに向けての指令です。
プロパティと値の間は「:（コロン）」で区切り、そのセットを「{ } （中かっこ）」で囲みます。
例えば、h1 { color : red } と書けば、<h1>要素の文字の色を赤にする という指令になります。
セレクタ（selector）とは、HTML要素をセレクトするもの。HTML要素を特定します。
HTML要素の名前、id名（HTML要素のid属性の値）、class名（class属性の値）など、いろいろな種類があります。（セレクタの種類については次回詳細）
プロパティ（property）はスタイル の種類。
「color」なら文字の色、「background-color」なら背景色、「font-size」ならフォントサイズ、といった具合で、だいたい英語そのまんまなのでわかりやすい。これもたくさん種類があります。
値（value）はもちろんプロパティの値。スタイルをどうしたいかを書きます。
色なら「red」とか「#ff0000」とか、サイズなら「20px」や「2em」といったかんじで、プロパティによって値の書き方もいろいろあります。
1つのセレクタに 複数のスタイルを指定する方法
1つのセレクタに複数のスタイルを指定するには、
プロパティと値のセットを「;（セミコロン）」で区切ります。
「;」が抜けてると、エラーになるよ。最後の「;」は、あっても無くてもOK。
h1 {
color:red;
font-size:120%;
line-height:1em;
}
上の書き方は、読みやすいように改行していますが、改行やスペースはあっても無くてもOK。
h1{color:red;font-size:120%;line-height:1em;}
ただ、CSSのショートハンド（複数の値をいっぺんに指定する方法）を使う時は、値を半角スペースで区切るルールがあり、その半角スペースは省略不可。注意が必要です。
（ショートハンドについては、後日まとめます。）
複数の「セレクタ」を指定する方法
複数の「セレクタ」に同じスタイルを指定したい時は「,（カンマ）」で区切ってひとまとめにして、同じ指定をすることができます。
区切りのための「,」が抜けてたり、セレクタの最後（ { の直前）に「,」があるとエラーになるので要注意です。（こういう細か〜いタイプミスに気をつけなきゃいけないのがCSS。笑）
section h1,
section h2 {
color:red;
line-height:1em;
}
これも、改行やスペースは必須ではありません。
h1,h2{color:red;line-height:1em;}
CSSのコメントの書き方
CSSのコメントは /*（スラッシュ、アスタリスク）と */ で囲みます。
/*CSSのコメントはこのように書きます。 中で改行してもOK。*/
CSSを置く場所
CSSをHTMLファイルに読み込む方法です。下記の4つの方法があります。
オススメは3番目の「外部CSSファイルにして<link>要素で読み込む」方法です。
が、それぞれの方法に利点がありますので、臨機応変に使い分けよう。
- <style>要素でHTMLの<head>内に直接CSSを書く
- <style>要素で<body>内に直接CSSを書く
- 外部CSSファイルにして<head>内に<link>要素で読み込む
- 各要素にインラインで書く
<style>要素でHTMLの<head>内に直接CSSを書く
HTMLの<head>部分で、<style>〜</style>の中に直接CSSを書く方法です。
この方法で書いたCSSは、そのHTMLファイルだけに有効になるので、すべてのHTMLファイルに同じスタイルを適用したい場合は、全部のHTMLファイルにおんなじコトを書かなきゃなりません。これじゃ編集作業も大変ですね。
ですので、この方法はあまりお勧めしません。外部CSSファイルにしたほうが編集が楽だから。
ただし、そのページにしか使わないスタイルを書く時には有効な方法です。
例えば期間限定の特設ページなどの場合は、<head>にCSSを書いておけば、そのHTMLファイルが不要になった場合、CSSも一緒に始末できるので便利です。
<head>
<style>
.sample img {
width:34px;
padding:8px;
border: 0; }
</style>
</head>
このソースでは、<style>要素の type属性を略しています。type属性のデフォルトは「text/css」なので、type属性が無ければブラウザはこのMIMEタイプで解釈します（HTML5から）。だから省略OK。
<style>要素についての詳細は「[43] style で CSS を HTML内に書いてみよう」をご覧ください。
<style>要素で<body>内に直接CSSを書く
HTML5から、<style>要素は「scoped属性」をつければ、<body>内にも置けるようになりました。
これも、そのページだけにしか使わないスタイルを書く時には有効。
<body>内に書けるので、ほんとにピンポイントでスタイル変更したい時には便利です。
ただし、ほかのHTMLでも共通して使うスタイルには、この方法は使わないようにしよう。あとで編集する時めんどくさいから。
<section>
<style scoped>
p { border: solid 3px #CCC; padding:1em; }
p.bRed { border-color:#f66; }
p.bYellow { border-color:#fc0; }
</style>
<h1>サンプル</h1>
<p class="bRed">この段落のborderは赤。</p>
<p class="bYellow">この段落のborderは黄色。</p>
<p>この段落のborderはグレー。</p>
</section>
<section>
<p>この段落はborder無し。上のsectionのスタイルが適用されない。</p>
</section>
<style>要素の「scoped属性」の使い方の詳細は、
「[43] style で CSS を HTML内に書いてみよう：「scoped属性」」で。サンプルもあります。
外部CSSファイルにして<head>内に<link>要素で読み込む
これがオススメ、というか最もスタンダードな方法です。
「○○○.css」と拡張子をつけてCSSを別ファイルにし、<link>要素でHTMLに読み込ませる方法。
編集するときは、たくさんのHTMLファイルを修正するのではなく、外部CSSファイルを直すだけで済むので効率的なんです。
<head> <link rel="stylesheet" href="style.css" type="text/css"> </head>
WordPressを使うときもこの方法ですね。style.css はWordPressテーマの必須ファイルなので、この方法で header.php の<head>に読み込ませますね。
・<link>要素については「[42-1] link で外部CSSファイルの読み込み、グループ化をしよう」を、
・外部CSSファイルの作り方は「[12-1] CSSを外部ファイルにしよう」をご覧ください。
複数の外部CSSファイルを読み込むこともできます
<link>要素を複数書いて、複数の外部CSSファイルをHTMLに読み込むことができます。
CSSファイルを分けたほうが、編集しやすいので、このように複数読み込めると便利ですね。
例えば、ブラウザのデフォルトスタイルをリセットするためのCSSは、1度書いたらめったに修正しないので、分けておいたほうがいい。他のCSSの編集の時に邪魔にならないし、間違っていじってしまうことも避けられます。
また、PCビューでのスタイルと、タブレットやスマホ用のスタイルも分けたほうが、自分がわかりやすいですね。
（ま、どんな分け方であれ、自分があとで編集しやすいように、自由に分ければOKです）
<head> <link rel="stylesheet" href="css/reset.css" > <link rel="stylesheet" href="css/layout.css" > <link rel="stylesheet" href="css/responsive.css" > </head>
この場合、書く順番（外部CSSファイルを読み込む順番）が大事です。
CSSには「前に読み込まれたものを、後で読み込んだものが上書きする」というルールがあるので。
（優先度のルールについては、後日詳細）
たとえば上のソースでは、
1.デフォルトスタイルのリセット → 2.レイアウト用のCSS
という流れで、サイトのスタイルを整えています。
これを逆に書いちゃったら、せっかく指定したスタイルをリセットしちゃうことに。
上のソースはtype属性を略しています。type属性のデフォルトは「text/css」なので、<link>要素の rel属性値が stylesheet なら、type属性は省略OK（HTML5から）。
また、ここでは相対URLを使っていますが、絶対URLでもOK。ほかのサーバに上げたCSSも持って来れます。
・相対URL、絶対URLについては「[10] 絶対URL と 相対URL」をご覧ください。
外部CSSファイル内で @import を使って複数のCSSを指定することも
外部CSSファイル内で @import を使っても、複数のCSSファイルを読み込めます。
これはWordPressを使う時にも便利です。
style.css に、何もかも全部書いてもいいんですが、分けたほうが編集しやすいので。
また、WordPress の style.css はテーマの第1階層に置く必要がありますが、style.css に読み込むほかのCSSは「CSS」ディレクトリにまとめることができて便利です。
<head> <link rel="stylesheet" href="style.css" > </head>
@charset "UTF-8"; /*（WordPressの場合は、style.cssにコメントで「テーマの情報」を書きます） Theme Name: Description: Author: Author URI: */ @import url(css/reset.css); /*ブラウザのデフォルトスタイルをリセットするCSS*/ @import url(css/layout.css); /*全体のフォーマット*/ @import url(css/others.css); /*コンテンツ部分のh1, h2 p などのために*/ @import url(css/responsive.css); /*レスポンシブ用*/
もちろん WordPressじゃなくても、この @import を使う方法は便利でオススメです。
@import を使えば、それぞれのCSSファイルを「ディスプレイ用」「印刷用」などと切り替えることもできます。詳しくは（ちょっとメモ）link よりスマートな CSSの @import と @media で。
この場合も、書く順番（外部CSSファイルを読み込む順番）が大事です。
CSSは「前に読み込まれたものを、後で読み込んだものが上書きする」というルールがあるので。
（優先度のルールについては、後日詳細）
各要素にインラインで書く
HTML要素に「style属性」を使って、直接その要素だけのスタイルを書くこともできます。
ページ内のある要素だけに特にスタイルを与えたい時に、使います。
ただし、W3Cで「HTML文書とCSSを分離する」ことが推奨されているので、この方法は多用せず、ここぞという時にだけ使いましょう。
あんまりコレを使うと、あとで編集したい時にメッチャ大変だから。
（なので、もう絶対直さない（どこに何を書いたか忘れちゃってもイイ）と確信できる場所だけにピンポイントで使おう。
後で修正しそうだとか、他のページでも同じスタイルを使う場合は、キチンと外部ファイルに書いたほうが無難です。）
<p style="margin-bottom:0; font-size=85%"> </p>
このインラインで書く方法はCSSの優先度的に最強。他のどんなスタイル指定よりも、インラインスタイルが最優先で適用されます。これは知っててお得な豆知識です。
例えば、他の人が書いたCSSを変更していて、ど〜しても解決できずに困った時に、「もしかしてインラインで書いてたりして」と疑ってみるとアタリだったりするw。知っていれば解決も早いですね。
次回予告
次回は「セレクタ」の種類についてざっくり見てみましょう。
セレクタは、たくさん種類があるんですが、そのなかでも基本的な（よく使う）ものや、知ってると便利なもの（擬似要素、擬似クラス、属性セレクタなど）をざっと紹介します。
セレクタの種類によって「CSSの優先度のルール」が決まるので、どんな種類があるかだけでも知ってたほうがイイです。優先度のルールは、実際にCSSでレイアウトを組む時にとても大事なので。
意図したとおりにプレビューしない時は、この優先度のルールが引っ掛かってる可能性大（または単なるタイプミスw）。
- 関連記事
- 【11-4】marginの相殺（margin collapsing）
- 【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）
- 【11-2】marginの auto という値の「？」を解決しておこう
- 【11-1】marginと marginのショートハンド
- 【10】ボックスモデル（margin, padding, border を使いこなそう）
- 【9】HTML要素の インラインレベル・ブロックレベル について
- 【8】CSSの「色」と「透明度」の指定
- 【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
- 【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）
- 【6】CSSって具体的に何ができる？（プロパティについてざっくりと）
- 【5】CSSの値の継承（Inheritance）のルール
- 【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）
- 【3】id とか classって何？（セレクタの「種類」を知っておこう）
- 【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について）
- 【1】CSSってどんなもの？ カスケーディングって何？
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
コメントの投稿
No title
法人用テンプレート2というテンプレートの記事表示を
（たとえばトップに10記事表示するとすれば上の4記事だけモザイクブロックというテンプレートのような記事表示、その他の記事はそのまま）のようにしたいと思うのですがやり方をご存知でしたら教えていただけないでしょうか？
よろしくお願いします。
Re: No title
私は残念ながらライブドアブログはやったことがなくて、詳細わかりません。
で、法人用テンプレってことは有料ですよね？
ライブドアにお問い合わせください。もったいないよお金が。そして悩む時間も。
（聞く相手を間違えていますよw）