ほんっとにはじめてのHTML5とCSS3：【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について）

【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について）

最終更新日：2022年11月10日　（初回投稿日：2015年07月27日）

今回は、CSSの基本の「書き方」や「HTML上に置く場所」を見てみよう。

本日のINDEX

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*/
  }

上の書き方は、読みやすいように改行していますが、改行やスペースはあっても無くても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つの方法があります。
それぞれの方法に利点がありますので、臨機応変に使い分けよう。

<style>要素でHTMLの<head>内に直接CSSを書く

HTMLの<head>部分で、<style>〜</style>の中に直接CSSを書く方法です。

この方法で書いたCSSは、そのHTMLファイルだけに有効。
すべてのHTMLファイルに同じスタイルを適用したい場合は、全部のHTMLファイルに同じコトを書かなきゃなりません。これじゃ編集作業も大変ですね。

ですので、この方法はあまりお勧めしません。外部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内に書いてみよう」をご覧ください。

外部CSSファイルにして<head>内に<link>要素で読み込む

これが最もスタンダードな方法です。
「○○○.css」と拡張子をつけてCSSを別ファイルにし、<link>要素でHTMLに読み込ませる方法。
編集するときは、たくさんのHTMLファイルを修正するのではなく、外部CSSファイルを直すだけで済むので効率的なんです。

<head>
  <link rel="stylesheet" href="style.css"> 
</head>

・外部CSSファイルの作り方は [12-1] CSSを外部ファイルにしよう をご覧ください。
　文字エンコードの宣言（@charset使用）についてもこちらで触れています。
・<link>要素については [42-1] link で外部CSSファイルの読み込み、グループ化をしよう をご覧ください。

複数の外部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
という流れで、サイトのスタイルを整えています。
これを逆に書いちゃったら、せっかく指定したスタイルをリセットしちゃうことに。

ここでは相対URLを使っていますが、絶対URLでもOK。ほかのサーバに上げたCSSも持って来れます。
相対URL、絶対URLについては[10] 絶対URL と相対URL（絶対パスと相対パス）をご覧ください。

外部CSSファイル内で @import を使って複数のCSSを指定することも

外部CSSファイル内で @import を使っても、複数のCSSファイルを読み込めます。
これはWordPressを使う時にも便利です。

style.css に全部書いてもいいんですが、分けたほうが編集しやすいので。
また、WordPress の style.css はテーマのルートに置く必要がありますが、style.css に読み込むほかのCSSは「CSS」ディレクトリにまとめることができて便利です。

外部CSSファイルの中で、複数の他のCSSファイルを指定します。

@charset "UTF-8";
@import url(css/reset.css);      /*ブラウザのデフォルトスタイルをリセットするCSS*/
@import url(css/layout.css);     /*全体のフォーマット*/
@import url(css/others.css);     /*個別のエレメント用*/
@import url(css/responsive.css); /*レスポンシブ用*/

HTMLのhead部分には、1つだけ外部CSSファイルを指定します。

<head>
  <link rel="stylesheet" href="style.css" >
</head>

@import を使えば、それぞれのCSSファイルを「ディスプレイ用」「印刷用」などと切り替えることもできます。
詳しくは（ちょっとメモ）link よりスマートな CSSの @import と @media で。

この場合も、書く順番（外部CSSファイルを読み込む順番）が大事です。
CSSは「前に読み込まれたものを、後で読み込んだものが上書きする」というルールがあるので。

各要素にインラインで書く

要素に「style属性」を使って、直接その要素だけのスタイルを書くこともできます。
ページ内のある要素だけに特にスタイルを与えたい時に、使います。
ただし、W3Cで「HTML文書とCSSを分離する」ことが推奨されているので、この方法は多用せず、ここぞという時にだけ使おう。
あんまりコレを使うと、あとで編集したい時にメッチャ大変だから。
（後で修正しそうだとか、他のページでも同じスタイルを使う場合は、キチンと外部ファイルに書いたほうが無難です）

<p style="margin-bottom:0; font-size=85%"> </p>

このインラインで書く方法はCSSの優先度的に最強。
他のどんなスタイル指定よりも、インラインスタイルが最優先で適用されます。

<style>要素で<body>内に書く（5.1仕様外）

HTML5.0の策定中に「scoped属性」が仕様にありましたが、勧告で削除されました。
「scoped属性」を付けた<style>要素は <head>でなく <body>内に置けるという仕様で、その親要素の範囲内にのみスタイルが適用されるというものでした。

これを勧告前に一旦は実装した Chrome firefox も勧告後にサポートしなくなり、Safari、Opera、IE は一度もサポートしていません。

ただ、どのブラウザでも <body>内に書かれた <style>要素はエラーにならず、「scoped属性」は無視し、<style scoped> 〜 </style> 内のスタイルは、HTML全体に適用する機能は残しています。
W3C の HTML5.1 仕様で「<style>要素は <head>内に制限」とされてはいますが。

これは、ブログシステムや、WordPress などの CMS では、記事ごとに <head>内を編集できないため、本文（<body>内）に <style>要素を書くのが便利だったため、勧告前の各ブラウザの実装で、多くのユーザーが使用したためではないかと思います。
勧告後に文法違反となったわけですが、急に実装を止められても困るユーザーが多いのではないでしょうか。

ですので、このような書き方をしても、たいていは意図通りに表示されます。

<body>
  <p class="sample">
  この段落のborderは赤。
  </p>

  <style>
  .sample {border:solid 3px red; padding:1em}
  </style>
</body>

そして、W3C の HTML 5.2 は今「勧告案（Proposed Recommendation）」になっています（次の段階で「勧告」）が、そこに下記の記述があります。

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.
（文書の <head> に <style>要素を使用することをお勧めします。
ドキュメントの <body> に <style> を使用すると、スタイルの変更や上書きが起こりますので注意して使用すべきです。）

HTML 5.2 では <style>を <body>内で使えるかも。
勧告時にこの部分が削除される可能性もありますけど、期待したいところです。（2017年11月記）

追記です（2022年11月）
上記の直後（2017年12月）に W3C の HTML 5.2 が勧告され、<style>は <body>内で使えることになっていましたが、なんと！この HTML 5.2 は 2021年1月に廃止されました。

2021年1月以降の HTMLの正式仕様は、WHATWG - HTML Living Standard となり、 <style>要素は <head>内に限定される仕様になりました。残念。
<body>内で使っていてもエラーになるブラウザはまだ無いようですが、今後は <style>要素は <head>内でのみ使うということです。

ちなみに、W3C のときは HTML にバージョン（4とか5とか）を付けていましたが、WHATWG に管轄が移ったら、バージョンなど無く単に Living Standard となりました。（生の、ほんとに使える、生きている標準といった意味でしょうかね？）
あらやだっ、このサイトのタイトルどうしよう？（たぶんこのまましばらくは放置ですww）

WHATWG（Web Hypertext Application Technology Working Group）（ワットダブリュージー）は2004年に、実際にブラウザを作る側（Apple、Mozilla、Opera）の有志が集まって作った団体。HTML5の仕様も WHATWG がもともと検討してきたものを W3C が採用したんだそうです。
W3C と WHATWG で仕様が違うものが多々あって（ルビとかさ）迷惑だったけど（笑）、とうとう W3C が折れたんですね。なんか長いことお疲れ様でしたというかんじです。

HTMLに関しては WHATWG の管轄になったけど、CSS については変わらず W3C が仕様を決定していくようですよ。

次回予告

次回は「セレクタ」の種類についてざっくり見てみましょう。
セレクタの種類によって「CSSの優先度のルール」が決まるので、どんな種類があるかだけ、ざっと紹介します。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2022-11-10（Thu）│
投稿日：2015-07-27（Mon）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿

No title

ライブドアブログのカスタマイズについて質問です。

法人用テンプレート2というテンプレートの記事表示を
（たとえばトップに10記事表示するとすれば上の4記事だけモザイクブロックというテンプレートのような記事表示、その他の記事はそのまま）のようにしたいと思うのですがやり方をご存知でしたら教えていただけないでしょうか？

よろしくお願いします。

2015-07-27 19:05 :
ポテト

Re: No title

ポテトさん、
私は残念ながらライブドアブログはやったことがなくて、詳細わかりません。

で、法人用テンプレってことは有料ですよね？
ライブドアにお問い合わせください。もったいないよお金が。そして悩む時間も。
（聞く相手を間違えていますよw）

2015-07-28 20:31 :
yuki★hata