CSS（スタイルシート）の使い方についての説明と例文

スタイルシートを使うためには、HTMLとCSSの両方の記述を関連付ける必要があります。これは、divタグやpタグhタグなどのHTMLタグにid属性やclass属性などを指定してスタイルシートを呼び出すというHTMLの記述と外部ファイル化されているCSSにスタイルを書き加えることにより実現できます。

これについては必要最低限のHTML属性辞典でも説明していますが、もう一度、divタグにid属性を指定してスタイルシートを呼び出す方法を例に挙げて簡単に説明させて頂きます。

<div id="スタイル名">～</div>

というようにHTMLタグのdivの開始タグにid="スタイル名"を記述すると、指定したスタイルを呼び出すことができます。

例えばheaderという名前のスタイルを呼び出す場合はこんな感じです。

<div id="header">～</div>

しかし、このHTMLの記述だけではスタイルが指定されていないので、記述してもしなくても変わりがありません。そこでCSS（スタイルシート）にこのように記述してあげます。

#header {
width: 800px;
text-align: left;
background-color : #ffffff;
}

そうするとdivタグの幅を800pxにして、中に書いた文字を左寄せにし、尚且つ、背景の色を白にするというスタイルシートの命令が呼び出されページを表示する際にそのようなデザインで表示してくれるようになります。

これはHTMLとCSSを関連付けた使い方の例の一部です。

私がスタイルシートを呼び出す際に使うHTML属性は、id属性の他にclass属性がありますが、使い方が少しだけ異なりますので、それについての説明やその他の詳しい情報を知るために必ず、必要最低限のHTML属性辞典というページもこのページと合わせて読んで下さい。また、HTMLの記述については、HTMLリファレンスをご覧下さい。