CSS の書き方

CSS とは

CSS (Cascading Style Sheets) とは、HTML と組み合わせて使用する言語で、HTML をどのように表示（装飾）するかを指示するために使われます。

HTML は、ページのコンテンツを記述するためのマークアップ言語であり、デザインを整えるための機能はありません。そのため、HTML をデザインするためには CSS を使用します。

CSS を HTML に反映させる

CSS を HTML に反映させる方法は、以下の３パターンあります。

  • CSS ファイルを作って HTML ファイル側から読み込む方法
  • CSS を HTML に直接書く方法
  • CSS をタグに直接書く方法

CSS ファイルを読み込むには、link 要素の rel="stylesheet" 属性で設定します。CSS ファイルのパスは href 属性に記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    ...
    <link rel="stylesheet" href="style.css">
    ...
  </head>
  ...
</html>
CSS ファイルを読み込む

CSS を HTML に直接書くには、style 要素の中にスタイルシートを設定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    ...
    <style>
      p{ color:blue; }
    </style>
    ...
  </head>
  ...
</html>
CSS を HTML に直接書く

CSS をタグに直接書くには、要素の style 属性の中にスタイルシートを設定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    ...
  </head>
  
  <body>
    ...
    <p style="color:blue;"> ... </p>
    ...
  </body>
  ...
</html>
CSS をタグに直接書く

CSS の書き方

CSS の基本的な書き方は、以下のようになります。

p {
    color: red;
}
CSS の基本的な書き方

上記の CSS は、p 要素のテキスト色を赤色に変更するルールです。ルールは、いくつかの要素で構成されます。

セレクタ
HTML ドキュメントから特定の要素を選択するのがセレクタです。上記の CSS では p の部分が該当します。そのため、上記の CSS は HTML ドキュメントに含まれるすべての p 要素のテキスト色が赤色になります。セレクタには様々なバリエーションがあります。詳細は、CSS セレクタの種類と書き方を参照してください。
宣言ブロック
宣言ブロックは、{ から } まで囲まれた範囲のことです。この宣言ブロックの中には、プロパティと値（後述）のセットを必要な数だけ追加することができます。
プロパティ
プロパティは、要素の表示をコントロールする部分で、上記の CSS では color が該当します。CSS にはあらかじめ定義されているプロパティが何百種類もあり、color もそのうちの１つです。また、プロパティの後ろには必ずコロン : が付きます。
値
プロパティには必ず値がセットで必要になります。上記の CSS では red が該当します。プロパティによって、指定できる値は異なります。また、値の後ろには必ずセミコロン ; が付きます。

プロパティと値

CSS ではさまざまなデザインやレイアウトを実装できるために多数のプロパティが用意されています。それらのプロパティを機能別に分類すると、大きく６種類に分けることができます。

フォントやテキストを調整するプロパティ
フォントの種類やサイズを調整したり、テキストの行揃えを切り替えたりする機能です。代表的なプロパティとして font-family, font-size, text-align などがあります。
コンテンツの色やボックスの背景色を調整するプロパティ
テキスト色、ボックスの背景色・背景画像、ボックスの枠線などの色や太さを指定するプロパティです。代表的なプロパティとして color, background, border などがあります。
ボックスのサイズや周囲のスペースを調整するプロパティ
ボックスの幅、高さ、周囲のスペースを調整するプロパティです。代表的なプロパティとして width, height, padding, margin などがあります。
ボックスの配置を制御するプロパティ
ボックスの配置を制御し、コンテンツのレイアウトを調整するためのプロパティです。代表的なプロパティとして float, position, flex などがあります。
HTML には含まれないコンテンツを表示するプロパティ
HTML には含まれないコンテンツとは、箇条書きの各項目の先頭に表示されるマークなどです。代表的なプロパティとして list-style, content などがあります。
その他
上記の分類は、CSS の中でも特によく使われるプロパティです。しかし、CSS には他にも多くのプロパティや機能が用意されています。その他のプロパティとして cursor, transform, @media などがあります。

プロパティに指定する値

CSS のすべてのプロパティには値を設定する必要があります。設定すべき値はプロパティによって異なりますが、値は大きく３種類に分けることができます。

サイズ
フォントサイズ、ボックスの幅・高さ、周囲のスペースのサイズなどです。サイズには長さの単位を付与する必要があります。（後述）
色
テキスト色や背景色などです。色を指定する方法の詳細は、HTML & CSS - テキストの文字色を変更するを参照してください。
キーワードや固有名詞
あらかじめ決められたキーワードや、固有名詞を指定するプロパティもあります。例えば、ボックスの配置を決めるための position プロパティでは、値に absolute, fixed, relative などのキーワードを指定します。

値の単位

プロパティに値を設定するとき、単位が必要になる場合があります。特にフォントサイズやボックスのサイズなどを調整するプロパティには、数値に単位がついた値を指定します。CSS で定義されている主な単位は、下表のとおりです。

長さの単位
単位説明
em1em : 親要素に設定されているフォントサイズ。
rem1rem : html 要素に設定されているフォントサイズ。標準では 16 ピクセル。
vw1vw : ビューポートの幅の 1/100。
vh1vh : ビューポートの高さの 1/100。
vmin1vmin : ビューポートの幅か高さ、どちらか短い方の 1/100。
vmax1vmax : ビューポートの幅か高さ、どちらか長い方の 1/100。
px1px : 1 ピクセルの大きさ。
pt1pt : 1 ポイント (1/72 インチ、約 0.035 cm)
% 基準となる長さや大きさに対するパーセンテージ。
角度の単位
単位説明
deg1deg : 1°
rad1rad : 1 ラジアン
秒の単位
単位説明
s1s : 1 秒
ms1ms : 1 ミリ秒 (1/1000 秒)

ボックスモデル

HTML の各要素はブラウザの画面に表示される際、その要素のコンテンツを表示するために表示領域を確保します。その表示領域がボックスと呼ばれるコンテンツ領域です。コンテンツ領域を中心として、その周囲には padding 領域、border 領域、margin 領域があります。それらの領域を CSS のプロパティを使って調整することができます。

CSS のプロパティを使ってボックスの幅や高さを設定できますが、設定できるのはコンテンツ領域の幅と高さです。その外側にある padding 領域、border 領域、margin 領域は、それぞれ専用のプロパティがあるため、それらのサイズを指定する場合は専用のプロパティを使用する必要があります。

標準のボックスモデル
標準のボックスモデル

ボックスには、大きく分けてインラインボックスとブロックボックスの２種類があります。

インラインボックスとは、テキストの行に含めることができるボックスです。インラインボックスには、img, input 要素などを除いて、コンテンツ領域の width と height、そして上下の margin を設定することはできません。インラインボックスで表示される代表的な要素は span, em, strong, br などです。

ブロックボックスは、CSS で幅を指定しない限り、親要素のコンテンツ領域いっぱいに広がるタイプのボックスです。width と height、padding、border、margin、すべての領域のサイズを CSS で設定することができます。ブロックボックスで表示される代表的な要素は div, section, header, footer, p などです。

CSS が適用される順序とルール

CSS は、一度設定されたプロパティの値が後から定義された、または詳細度の高いプロパティの値に上書きされる特徴があります。この特徴は、CSS のメンテナンスが難しくなる要因にもなります。詳細は、破綻しにくい CSS 設計手法と命名規則、およびCSS 最適化によるパフォーマンス改善を参照してください。

セレクタの詳細度

CSS には 詳細度 (優先順位) が存在するため、詳細度がもっとも高いスタイルが優先されます。

/* CSS側 */
#foo{ color: red; }
.bar{ color: blue; }

<!-- HTML側 -->
<p id="foo" class="bar">
ここの文字は何色でしょう？
</p>
セレクタの詳細度

上記の例では、#foo が優先されるため文字は赤色になります。各セレクタの詳細度が整理されていない場合、より詳細度の高い定義が優先され、詳細度の低い定義が上書きされます。

詳細度は、a, b, c の 3 つの数値の大きさによって決まります。以下はセレクタを詳細度の小さい順に並べています。

  1. *a=0, b=0, c=0
  2. lia=0, b=0, c=1
  3. ul lia=0, b=0, c=2
  4. ul ol+lia=0, b=0, c=3
  5. h1 + *[rel=up]a=0, b=1, c=1
  6. ul ol li.reda=0, b=1, c=3
  7. li.red.levela=0, b=2, c=1
  8. #foobara=1, b=0, c=0
  9. #foobar:not(li)a=1, b=0, c=1

a, b, c は桁数のようなもので、a > b > c の関係になります。詳細度が同じ場合は、後から宣言されたルールセットが優先されます。

スタイルが子要素に継承される

スタイルには HTML 側の子要素にまで継承するため、DOM (Document Object Model) ツリーの上位の要素にスタイルを適用すると、下位の要素で上書きされます。

/* CSS側 */
body{ font-size: 16px; }
section p{ font-size: 12px; }

<!-- HTML側 -->
<section>
  <p>すべての文字サイズは16pxだけど、ここだけは12pxで上書き...</p>
</section>
スタイルが子要素まで適用される

同じセレクタを多重定義できる

CSS の仕様では、同じセレクタを多重定義してもエラーになりません。

/* CSS側 */
.bkcolor{ background-color: black; }
.bkcolor{ background-color: white; }
同じセレクタの多重定義

スタイルが複合的に適用される

HTML の各要素はスタイルを複合的に受け入れます。

/* CSS側 */
.cls1{ font-size: 16px; }
.cls2{ font-color: red; }
.cls3{ font-weight: bold; }

<!-- HTML側 -->
<p class="cls1 cls2 cls3">スタイルが合成された文字</p>
スタイルが複合的に適用される

ショートハンドプロパティ

CSS には複数のプロパティをまとめて指定できるショートハンドプロパティという方法があります。ショートハンドで表現できるプロパティの種類が多いため本ページでは割愛しますが、ショートハンドを利用することでファイルサイズを削減できます。以下はショートハンドプロパティで表現した例になります。

/* 最適化前 */
div {
    background-color: #000;
    background-image: url(images/bg.gif);
    background-repeat: no-repeat;
    background-position: left top;
}

/* 最適化後 */
div {
    background: #000 url(images/bg.gif) no-repeat left top;
}
ショートハンドプロパティの例

ショートハンドプロパティは複数のプロパティを指定できますが、省略したプロパティには初期値が設定されます。そのため、設定済みのプロパティを初期値で上書きするため、使用には注意が必要です。

関連記事