スタイルシートの概要

スタイルシートとは、WEBページ上の見栄えを定義する技術をいいます。本来HTMLは文書の意味だけを定義する事が目的で文書の見栄えは定義するものではないと言う考え方から開発されたものがスタイルシートです。

スタイルシートの適用方法

スタイルシートをHTML文書に適用するには、以下の方法があります。

  • スタイルを適用する要素にstyle属性の値
  • head要素にstyle要素を記述
  • 文書外にスタイルシート定義ファイル(外部スタイルシート定義ファイル / .css)を作成しlink要素で適用したいファイルへリンク

いずれの方法も、スタイルシートを適用するHTML文書にはmeta要素の<meta http-equiv="content-style-type" content="text/css">をhead要素に記述しておきます。

※HTMLドキュメントをHTML5で記述する場合は上記のmeta要素の指定は必要ありません。→詳細


style属性

スタイルを適用する要素にstyle属性の値として適用します。

例)

<p style="color: red;">テキストAAAaaa</p>
<p>テキスト<span style="color : #ff0000 ;">AAA</span>aaa</p>
<p style="color: red;font-weight: bold;">テキストAAAaaa</p>

表示)

テキストAAAaaa

テキストAAAaaa

テキストAAAaaa

テキストを赤文字で表示させるスタイルシートの記述です。インライン内容(テキストや画像)に部分的に適用したい場合はspan要素で適用したい部分にstyle属性の値として記述します。

color: red;を宣言と言い、colorをプロパティ、redをと言います。プロパティと値は、コロン(:)で区切りスタイルを複数指定する場合はセミコロン(;)で区切ります。

style要素

<head>~</head>内に記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
<!--
p{
color: red;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div style="border: 1px solid #cdcdcd;width: 450px;">
<p>テキストAAAaaa</p>
<p>テキストBBBbbb</p>
<p>テキストCCCccc</p>
</div>
</body>
</html>

p要素に囲まれたテキスト色がすべて赤色、太字になります。上記のソースでは、

  • pを「セレクタ」
  • color: red;を「宣言」
  • colorを「プロパティ」
  • redを「値」

と言い、これらの構成をルールセットと言います。また、プロパティと値はコロン(:)で区切り、スタイルを複数指定する場合はセミコロン(;)で区切ります。

宣言(プロパティ: 値)は中括弧{ }で囲み、中括弧で囲われた宣言を宣言ブロックと言います。style要素にはtype属性でMIMEタイプを指定しスタイルシート未対応のブラウザの為に<!--  -->でコメントアウトしておきます。

※MIMEタイプは、インターネット上のファイル規格です。
※HTMLドキュメントをHTML5で記述する場合は上記のmeta要素の指定は必要ありません。→詳細


スタイルシートの定義部を他のファイルから読み込む事ができ、複数の文書でスタイルシートを共有することができます。

旧バージョンのHTML)

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

link要素のrel="stylesheet"はスタイルシート定義ファイル(.css)を参照する事を示し、type属性にスタイルシートファイルのMIMEタイプを記述しhref属性でスタイルシート定義ファイル(.css)ファイルへのリンク先を指定します。また、上記ソースはhead要素内の文字コードをセットしているmeta要素より下に記述します。

スタイルシート定義ファイル(.css)は、セレクタ{プロパティ: 値;}をエディタの1行目から記述し拡張子をcssで保存します。

HTML5)

<link rel="stylesheet" href="index_style.css">

※HTMLドキュメントをHTML5で記述する場合はtype属性の指定は必要ありません。→詳細


例)example.css

body{
	width: 896px;
	height: auto;
	font-size: 100%;
	font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3' ProN W3","Meiryo","メイリオ",arial,sans-serif;
	color: #474747;
	background-color: #ffffff;

	margin-top: 10px;
	text-align: center;
}

a:link{
	text-decoration: underline;
	color: #1155cc;
}

a:visited{
	text-decoration: underline;
	color: #7aa1ed;
}

a:hover{
	text-decoration: underline;
	color: #ffd500;
}

a:active{
	text-decoration: underline;
	color: #1155cc;
}

a[target="_blank"]::after {
	content: url(new_win_icon.gif);
	margin: 0px 2px;
}

例2)

/* SNS Button */

article.sns_button{
	display: inline-block;
	width: 100%;
}
	article div.google_button{
		float: left;
		margin-right: 10px;
	}
	article div.fb-like{
		float: left;
		margin-right: 10px;
	}
	article div.hatena{
		float: left;
		margin-right: 10px;
	}
	article div.fb-tw{
		float: left;
	}
	article div.fb-share-button{
		margin: 5px 0px 10px 0px;
	}
	
/* SNS Button */

※当サイトで実際に使用しているスタイルシートの一部です。エディタ上での改行や、タブを入れて見やすくすることも可能です。

余談ですが、私は、セレクタ{ で改行し、タブをひとつ挿入し、プロパティ: 値;で改行、}をセレクタの先頭の位置に配置する形式で記述します。また、例2)のように、HTMLドキュメントの構造を表すように、タブを2つ挿入しスタイルを記述することもあります。


スタイルシートファイルへのコメントは、「/* SNS Button */」のように、「/(スラッシュ)*(アスタリスク)(半角スペース)コメント(半角スペース)*(アスタリスク)/(スラッシュ)」の形式で記述します。「/*」と「*/」で囲った文字列がコメントとして扱われるって感じで、コメント箇所は複数行、日本語でのコメントもOKです。

なお、一行のコメントアウトをスタイルシートファイルに挿入する場合、「*/」の直前に全角の文字があるとコメントとして認識されないケースがあるようなので、コメントの文字列の前後に半角スペースを入れるようにしています。

コメントアウトの例)

/* 一行コメント */
		
/* 
一行目
二行目
三行目
 */