img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

CSSの使用方法


スタイルシートとは?

  ie6 nn7 op8

CSS(Cascading Style Sheet)を使うと、htmlのレイアウトを より自由にする事ができます。
一般的にスタイルシートといえばCSSを指し、現在CSSには "CSS level1"と"CSS level2""CSS level3"のバージョンが有ります。
CSSレベル3はCSSレベル2を進化させたもので、現在も規格化が進められています。
スタイルシートを使うことで、画像や文字を重ねたり、htmlから分離して外部ファイル化し、同じスタイルを複数のpageで共有する事もできます。


htmlにスタイルシートを組みこむ

htmlの<head>の範囲内に<style></style>を記述する

CSSの最も基本的な記述方法は、<head></head>の間に<style></style>を記述してスタイルを配置する方法です。
記述したスタイルがCSSであることを示すために「type」属性の値として「text/css」を指定します。

例:
<head>
<style type="text/css">
<!--
body {
color: #000000;
background-color: #ffffff;
}
-->
</style>
</head>
上記の例では 背景色が白で文字色が黒を指定しています。


html内の要素に直接個別にstyle属性をつける
例:
<body style="color: #000000; background-color: #ffffff;">
上記の例でも同じ指定になります。


htmlから分離して スタイルを記述したファイルを読み込む

<style></style>の範囲で定義するスタイルを別ファイルに記述して、それを参照するようにします。
複数のページで同じスタイルを共有する場合や、リニューアルなど修正するのにも便利です。

1. css外部ファイルを作る

テキストエディター(メモ帳など)を開き、cssの内容を記述し、拡張子を「***.css」として保存します。(***は任意)

body {
color: #000000;
background-color: #ffffff;
}


2. cssの外部ファイルを呼び出す

呼び出したいhtmlの<head>の範囲内に、
<link type="text/css" rel="stylesheet" href="***.css">
と指定します。