2-1. 基本書式

第2章　スタイルシートの書き方

2-1.スタイルシートの書式（基本）

説明文についてはだいぶ見直しができてきたようです。しかし、今後も初心者にもわかり易い説明を模索して修正をしていきたいと思います。

スタイルシートの基本書式

スタイルシートの基本書式はこのような書き方をします。: Selector　{　Property　： Value }

セレクタ（Selector）に対して、プロパティ（Property）と値（Value）を定義づけます。プロパティ：値を宣言（Declaration）と呼び、間に：コロンを置きます。宣言は；セミコロンで区切ることで複数定義することができます。空白（タブも含む）は無視されるので、エディタで好きなようにレイアウトすることが可能です。

｛｝中カッコや；セミコロンを使ったりと、JavaScriptやC言語と書式が似ていますね。

次の例は、P要素に対して、フォントサイズを12ポイントと定義しています。

p { font-size     : 12pt ; }

HTML文書へのスタイルシートの設定（その１）

HTML文書へのスタイルシートの設定方法を、下記の例で説明します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>STYLE SHEETS</TITLE>
    <META http-equiv="Content-Style-Type" content="text/css">
    <LINK REL="stylesheet" TYPE="text/css" HREF="./style.css" TITLE="tancro style">
    <STYLE TYPE="text/css">
       BODY     { color: green ; background-color: pink ; }
       H1       { color: red   ; }
       P        { background-color: white ;}
    </STYLE>
  </HEAD>
  <BODY>
    <H1>文字は赤、背景はピンク</H1>
    <P>文字は緑色、背景は白になります。
  </BODY>
</HTML>

(1)基準となるスタイルシートの宣言

まず、HTML文書で使用するスタイルシートがどんなものであるかを宣言します。宣言はMETA要素の内容としておこない、次の一文をHEAD要素に書いておきます。CSSでは、スタイルシートのMIMEタイプ（"text/css"）を定義しておくことを推奨していますので、この1行は必ず入れておきましょう。

<META http-equiv="Content-Style-Type" content="text/css">

(2)外部スタイルシート

HTMLファイルとは別の拡張子.cssとなるファイルでスタイルを定義しておく方法で、LINK要素で設定しています。

<LINK REL="stylesheet" TYPE="text/css" HREF="./style.css">

このように、スタイル定義をHTMLファイルと分けておくことで、同じスタイル定義を複数のHTMLファイルで共有することができ、非常に効率的となります。

外部ファイルの"style.css"の内容は次のような書き方になります。

/* 外部スタイルシート、ファイル名：style.css */
/* フォント */
body       { font-size : 15px; }
blockquote { font-size : 13px; }
/* このコメントは
複数行で使えますが、入れ子にはできません */

style.cssは、HTMLファイルではないのでは使えません。その代わりにコメントを表すのが/* この中がコメント */です。コメントのつけ方はスタイルシートがC言語、JavaScriptがC++と同じと覚えます（初心者向けじゃなかったですね^^;）。

(3)ファイル内スタイルシート

HTMLファイルの中でスタイルを定義する場合はSTYLE要素で定義します。そのHTMLファイルでだけ定義したいスタイルがある場合などでは、HTMLファイル内にスタイル定義があるのでスタイル定義の理解がしやすくなります。これを置く場所は<HEAD>～</HEAD>に記述します。

<HEAD>
<STYLE TYPE="text/css">
<!--
   BODY     { color: green ; background-color: pink ; }
   H1       { color: red   ; }
   P        { background-color: white ;}
-->
</STYLE>
</HEAD>

ここで、ブラウザによってはスタイル定義の内容が表示されることがあるので、それを防止するため、定義内容をしておくことをお薦めします。

実際の見え方の一例

実際のブラウザでの見え方を、画像に落としてありますのでご覧ください。チェックページ

Indexに戻る ==== 前のページに戻る ==== 次のページへ

第2章 スタイルシートの書き方