■スタイルシートの基本

スタイルシートとは、HTML文の見栄えを指定する文章のことで、HTML文内、外部ファイル両方で指定できます。

HTML文内でその都度スタイル指定をしていると、ファイルサイズが膨大になってしまいます。
それを防ぐために、各要素に名前を付けてまとめて指定、さらに外部ファイル化することで、
HTMLファイル本体のファイルサイズを抑えることができます。無駄な記述が減るので、SEO効果も高くなります。

HTML内に記述する場合

ボディ内にその都度直接指定

ヘッダー内にまとめて指定

外部ファイルから指定する場合

1.HTMLファイルのヘッダー内にスタイルシートの位置を指定

2.スタイルシートの文字コードを指定

@charset "UTF-8";

ここでは、スタイルシート(CSS)の文字コードを指定します。
HTMLファイルの文字コードに合わせて記述します。
一般的なSHIFT-JISの場合は記述する必要はありませんが、
PHPやPerl等のプログラミング言語とHTMLを混在させる
場合に、記述しておくと安全です。
@charset "SHIFT-JIS";
@charset "EUC-JP";
@charset "UTF-8";

3.拡張子(.css)で保存。

style.css

@charset "UTF-8";

body {
	color:#555;
	background-color: #3A6EA5;
	margin: 0px;
	padding: 0px;
	FONT-SIZE: 12px;
}
td {color:#482900}
a {
	FONT-SIZE:12px;
	color:#482900;
	FONT-FAMILY:Verdana;
	text-decoration: none;
	border-bottom:1px solid #cecece;
	font-weight:normal
}
a:link {
	color: #482900;
	font-weight:normal;
}
a:visited{
	color: #482900; font-weight:normal;
}
a:visited:hover{
	color: #cc0000; font-weight:normal;
}
a:hover {
	color: #cc0000;
	font-weight:normal;
	border-bottom:1px solid #F0CBCB;
	text-decoration:none;
}

名前 {項目:指定;項目:指定;項目:指定;} の順に記述します。
「；」を忘れると、エラーでそれ以降の指定が無効になってしまいます。
(最後の項目の後の；は省略可能です)
例) td {color:#482900;text-align:left}

*改行や、タブ・インデントは、コードを見やすくするためのもので、絶対に必要なものではありません。
CSSのファイルサイズを抑えたい場合は、使用しない方がいい場合もあるくらいです。

グループ化してまとめて記述する方法

style.css

.green {border:1px solid #555555;}

「ドット」+「グループ名」。このように記述すると、

としたもの全てに上記の指定がまとめて適用されます。

div class="green" → class= 何回も使用するグループ
div id="green" → id= 1回しか使用しないパーツ
*構文エラーが起こりやすいので、「id」は使用しない方がいいです。

目次にもどる