トップページ＞タグを打ってみよう！＞スタイルシート(CSS)の基本
スタイルシート(CSS)の基本
このページでは、スタイルシートの基本を説明しています。
スタイルシートの名称は上の図の通りです。
HTMLでタグと呼んでいた部分（h1など）がCSSではセレクタと呼ばれます。
上の例では、h1（大見出し）に対し、フォントサイズ（文字の大きさ）を20px（ピクセル）にする、という指定です。
スタイルシートはCSSとも言います。CSSとはCascading Style Sheets カスケーディング・スタイル・シートの略で、Cascade は、小さな滝。波状のレースの飾り、を意味します。装飾を指定する言語といった意味でしょう。
書き方は、HTMLと同様、半角英数字で記述します。
h1 { font-size : 20px ; } のように「：」コロンの後に半角スペースを入れると読みやすくなります。この半角スペースは入れなくてもかまいません。
HTMLやCSSをブラウザが読み込むとき、半角をいくつ連ねてあっても、半角1個と認識します。
値の後の「；」セミコロンは複数の指定を区切るためにつけます。
タグとセレクタの関係
次の例でHTMLのタグとCSSのセレクタの関係をご覧ください。
HTMLのタグ
<div>
<h2>CSSの意味</h2>
<p>CSSとはカスケーディング・スタイル・シートのことで、コンピュータ言語の１つです。</p>
</div>
div { width: 400px; }
h2 { font-size: 20px; }
p { font-size: 11px; }
CSS書き方のポイント
値の後の「；」セミコロンは複数の指定を区切るためにつけます。このページの例のように、プロパティが１つのときは省略可能ですが、
h2 { font-size: 20px; font-weight: normal; } のようにプロパティが２つ以上のとき、区切りの「；」セミコロンを忘れると指定が効きません。常に「；」セミコロンは入れるよう習慣づけるといいと思います。
以下のように改行して書くこともできます。
h2{
font-size: 20px;
font-weight: normal;
}
セレクタとプロパティ、値の前後にスペースを空けることができます。半角スペースを入れると読みやすくなります。
用語：スタイルシート(CSS)/セレクタ/プロパティ
HTMLのタグとは？前のページ | 次のページスタイルシート基本の書き方