CSSの使い方

今回はCSSを使って、タグの属性を一括で指定する方法を説明します。
まず、CSSの書き方から説明します。
基本的には以下のように書きます。

div{
	color:#ffffff;
	background:#555555;
}
a{
	display:block;
	font-size:16px;
}

上記のようにタグ名を書いて、括弧でくくり、
その中に属性を書いてコロン:を書いた後、値を設定してセミコロン;を書きます。
CSSの設定ファイルは別ファイルに保存して取り込むのが普通ですが、
直接対象のページ内に書くことも出来ます。
その場合はstyleタグを使います。

<style type="text/css">
div{
	color:#ffffff;
}
</style>

このstyleタグはhead部に書かなければならないので注意して下さい。
別ファイルにCSSを記述して取り込む場合は、
linkタグを使います。

<link rel="stylesheet" type="text/css" href="../main.css">

hrefの属性の値に該当のCSSファイルを指定すれば、その内容が取り込まれます。
これもhead部に書きます。
私はこちらの方法をオススメします。

CSSではまずタグによる一括指定が可能です。
下記のコードを見てください。

div{
	/*文字色*/
	color:#222222;
	/*枠線（線の太さ、色、線の種類)*/
	border:2px #ffffff solid
	/*テキストの横方向の位置*/
	text-align:left;
	/*文字のサイズ*/
	font-size:16px;
	/*背景色*/
	background:#333333;
	/*フォント*/
	font-family:"MS Goshic"
	/*余白*/
	margin:0px;
	/*要素内の余白*/
	padding:0px;
}

もしこのように書けば、
このCSSを取り込んだ全てのdiv要素にこの設定が適用されます。
各属性の書き方については、ネット上にあるリファレンスを見て書き方を覚えてください。
css内でコメントを書く際には、/**/でコメントを囲みます。

これだとdiv要素全てに影響が出てしまうので、
対象範囲を限定したいときがあります。
そういうときはクラスやIDを指定して設定します。
例えば、
<div class="test">
あいうえお
</div>
このようなdivタグがあり、class属性にtestという名前を設定しています。
このtestクラスが設定されているdiv要素に対してだけ、
設定を適用するにはこう書きます。

div.test{
～属性～
～属性～
}

divの後にドット(.)を書いて、クラス名を書くだけです。
その後に書いた属性の内容が、divタグのtestクラスを持つ要素のみに適用されます。
また、タグ内に、ID="test"とIDを指定していた場合は、

div#test{
～属性～
～属性～
}

と、divの後ろにシャープ(#)を書いてID名を書き、属性の設定を書きます。

他にも色々な書き方があります。
タグ名の後ろにスペースを空けて、またタグ名を書きます。

div　a{
～属性～
～属性～
}

この場合はdiv要素内の、a要素全てに対してこのCSSが適用されます。
div要素の中にないaタグについてはこの設定は適用されません。

次に、カンマで区切った書き方です。

div,a,p{
～属性～
～属性～
}

この書き方はdiv,a,p要素にまとめてCSSを適用する書き方です。

大体このようにしてCSSを書き、設定することができます。
理解できましたでしょうか？
属性の説明を色々省略しましたが、リファレンスを見ながら色々いじっていれば、
簡単に覚えますので、是非チャレンジして下さい。

次回はマウスカーソルを乗せたときなどのイベントの設定にについて説明します。

>> 【イベントの設定について】に進む
>> HTML入門トップに戻る

おすすめ参考書