CSSの基本的な構造とは
CSS(スタイルシート)の最も基本的な構造は、「セレクタ」・「プロパティ」・「値」という3つの用語を使って、以下のように説明できます。セレクタ { プロパティ : 値; }
CSSソースは上記のように、3種類の用語に対する文字を、
- 波括弧(カーリーブラケット) 「 { 」～「 } 」
- コロン記号 「 : 」
- セミコロン記号 「 ; 」
上記の3用語の意味を日本語で記すと、以下のようになります。
装飾対象 { 装飾の種類 : 装飾内容; }
これは、以下のように言い換えても良いでしょう。どこの { 何を : どうする; }
とても簡単です。具体的には、以下のように記述します。■CSSで装飾する記述例
h1 { color: red; }
上記のCSSソースの意味は、次のようになります。見出しの { 色を : 赤色にする; }
※「h1」は、装飾対象となるHTMLの要素名です。h1要素は「見出し」を表します。
※「color」プロパティは、文字色を指定するプロパティです。
※「red」は、赤色を表す値です。
複数の装飾をまとめて記述できる
ある箇所に加えたい装飾が1種類だけだとは限りません。CSSでは「プロパティ」＋「値」の組み合わせを必要なだけ列挙することで、いくつでも装飾を加えられます。
strong {
color: red;
background-color: #ffcccc;
font-weight: bold;
border-bottom: 3px double red;
}
上記では、強調箇所(strong要素)に対して4つの装飾を加えています。これらの指定の意味を文字で表すと、以下のようになります。強調要素の {
文字色を : 赤色(red)にして、
背景色を : 淡い赤色(#ffcccc)にして、
文字の太さを : 太字(bold)にして、
下線を : 太さ3ピクセル・二重線・赤色にする。
}
このように、複数の装飾を一度に記述できます。プロパティ名は、「background-color」が背景色、「font-weight」が文字の太さを表すなど、ほぼ英語通りの意味になっていて分かりやすいでしょう。どんなプロパティを使えばどんな装飾ができるようになるのかは、当ガイドサイト内でも多数の記事で紹介しています。
【関連記事】
・簡単に段組が作れる！CSS3、columnsプロパティ
・CSS3のtransformで、文字を長体や平体で表示する方法
・CSS3のborder-imageで、しましまの目立つ枠線を作る
・画像を使わずにCSSだけで角を丸くする方法
・文字間隔を空白で調節してはダメ！ CSSで調節する方法
・スタイルシートで文章の行間を調節する方法
・押しやすいチェックボックスやラジオボタンを作るCSS
・CSS flexの簡単な書き方 BOX表示順を自由に変更しよう
・ノートのように罫線(下線)を引くデザインの作り方
・文字に影を付け、画像に重ねた文字を見やすくするCSS3
スタイルの適用箇所をもっと限定できるセレクタの書き方
「どこを対象にして装飾するのか？」という装飾対象を指定するのが「セレクタ」です。例えば、下記ソースのようにセレクタに「strong」を指定すると、そのページ内にあるすべてのstrong要素の文字色が緑色になります。strong { color: green }
しかし、装飾したい対象が「ページ内のすべてのstrong要素」ではなく、「一部のstrong要素」だけである場合も多々あります。そのような、ある特定のstrong要素だけに装飾を適用したい場合には、以下のような限定方法があります。
■1. 親要素をセレクタに加える
h1 strong { color: green }
上記のCSSソースだと、「h1要素に含まれているstrong要素」だけに限定して装飾を適用できます(「h1」と「strong」との間は空白文字で区切ります)。■2. class名を指定する
strong.mytarget { color: red; }
上記CSSソースのように、要素名「strong」の直後に「.mytarget」と記述すると、『「mytarget」クラスの付加されたstrong要素』だけに限定して装飾を適用できます。ここでは、HTMLで以下のように記述されたstrong要素だけが装飾対象になります。<strong class="mytarget">特定の強調箇所</strong>このようにclass属性を使って特定の要素にclass名を付加する方法は、CSSを適用する手段として頻繁に使われています。
3. id名を指定する
strong#pinpoint { color: purple }
上記CSSソースのように、要素名「strong」の直後に「#pinpoint」と記述すると、『id「pinpoint」が付加されたstrong要素』ただ1つを対象にして装飾を適用できます。ここでは、HTMLで以下のように記述されたstrong要素だけが装飾対象です。<strong id="pinpoint">ピンポイントの強調</strong>同一のHTMLソース内で同じid名は1回しか使えない規則ですから、この場合の装飾対象は必ず1カ所だけになります。そのため、要素名を省略して下記のようにセレクタを記述することが多いでしょう。
#pinpoint { color: purple }
なお、id属性とclass属性のどちらを使えば良いかについては、記事「スタイルシートの class と id の使い分け」をご参照下さい。また、上記で紹介した3種類以外にも、さまざまな指定方法があります。詳しくは、下記に挙げるセレクタに関連する記事をご参照下さい。
【関連記事】
・CSSの「セレクタ」の書き方 再入門（CSS3対応版）
・CSS3で偶数行・奇数行など「n番目」を限定装飾する
・CSSだけで表(テーブル)の列(縦方向)を一括装飾する
・条件に外れた場合だけ装飾するCSS3「:not()」の使い方
・CSSの「疑似クラス」の書き方 再入門（CSS3対応版）
CSS(＝Cascading Style Sheets)の「C(＝Cascading)」の意味
CSSは「スタイルシート」とも呼ばれますが、CSSという英字は「Cascading Style Sheets」の略です。このCascading(カスケーディング)は「段々になっている／段階的に連なっている」という意味の英単語です。これは、CSSが下記で説明するような仕組みになっているからです。例えば、以下のようなHTMLソースがある場合を考えます。
<div>
<ul>
<li>
<span>中身の文章</span>
</li>
</ul>
</div>
div要素の中にul要素が含まれており、ul要素の中にli要素が含まれており、li要素の中にspan要素が含まれており、span要素の中に「中身の文章」という文字があります。ここで、以下のようなCSSソースを適用した場合を考えます。
div { color: blue; } /* 文字色を青色に */
ul { font-size: 1.2em; } /* 文字サイズを1.2倍に */
li { font-family: sans-serif; } /* フォントをゴシック系に */
span { font-weight: bold; } /* 文字を太字に */
上記の4行はそれぞれ装飾対象である要素名が異なります。しかし、先程のHTMLソース内にある「中身の文章」という文字は、上記の4つの条件すべてに当てはまっています。このとき、先程の「中身の文章」という文字は、
- まず1行目のCSSが適用されて文字色が青色になり、
- 2行目のCSSも適用されて文字サイズが1.2倍になり、
- 3行目のCSSも適用されてフォントがゴシック系になり、
- 4行目のCSSも適用されて文字が太字になる
このように段階的に複数のスタイルが適用される仕様なので、「Cascading＝段階的に連なっている」スタイルシートであるという意味で、Cascading Style Sheetsと名付けられているのです。
HTMLからCSSを読み込む方法3通り
CSSソース(またはCSSファイル)は、HTMLから以下の3通りの方法で読み込めます。- CSSソースを独立したファイルに記述しておき、link要素を使って読み込む。
- HTMLファイルのhead要素内に、style要素を使って記述する。
- HTMLタグの中に、style属性を使って記述する。
最も望ましいのは、1の「CSSソースを独立したファイルに記述しておき、link要素を使って読み込む」方法です。以下にそれぞれの書き方と特徴を簡単に紹介しておきます。
■1. 独立したCSSファイルを、link要素で読み込む方法
HTMLソースのhead要素内に、以下の1行を記述します。
<link type="text/css" rel="stylesheet" href="mystyle.css">上記では、link要素を使ってCSSファイル「mystyle.css」を読み込んでいます。このようにCSSソースをファイルに独立させておけば、同じスタイルを複数のHTMLから呼び出せるため、複数ページで同じデザインを使い回せて便利です。特に問題がなければ、この方法を使いましょう。
■2. style要素の中にCSSソースを記述する方法
HTMLソースのhead要素内に、以下のようにCSSソースを直接記述します。
<style type="text/css">
strong { color: red; }
em { color: maroon; font-weight: bold; }
</style>
そのHTML内だけでしか使わない装飾なら、style要素を使ってHTMLソース内にCSSソースを書いてしまう方が手っ取り早いでしょう。他のページでは共有しない「そのページ専用のスタイル」なのであれば、この方法で記述するのが楽です。■3. style属性を使ってHTMLタグにCSSソースを追記する方法
HTMLタグそのものにCSSソースを書くこともできます。下記は、HTMLのstrong要素に直接CSSソースを付加した例です。
<strong style="color: red;">強調</strong>この装飾は、このstrong要素1つだけに対して適用されます。分かりやすいですが、スタイルを直接HTMLに加える方法なので望ましくはありません。同じスタイルを別の場所にも適用したい場合には、別の場所にもまったく同じ内容を書かなければならないからです。しかし、一時的に装飾を適用してみたいだけの場合など、テスト用途であればこの方法も便利です。
最後に、代表的な各ブラウザがどのCSSプロパティをサポートしているのかを調べる方法をご紹介いたします。
