高性能検索順位チェックツール（無料）
CSS（スタイルシート）の基礎
CSSとは「Cascading Style Sheets」の略称で、一般的に「スタイルシート」と呼ばれるものの一つです。
これは、ウェブサイトのデザインを定義する為の技術であり、文章の内容はHTMLで定義し、デザインはスタイルシートで定義しようというものです。
スタイルシートの設定
スタイルシートを記述する前に、デフォルトのスタイルシート言語を設定します。
HTMLファイルのmeta要素に次のように指定します。
<meta http-equiv="Content-Style-Type" content="text/css">
要素に直接スタイルを適用する
スタイルを適用したい要素に、直接style属性を指定することができます。
書式は次のようになります。
<p style="color: red; font-size: 90%;">
・
・
・
</p>
※XHTMLでは、style属性を使用することは非推奨とされています。
同じ要素全てにスタイルを適用する
例えば、文書中のh2要素全てにスタイルを適用することができます。
書式は次のようになります。
h2 { font-size: 150%; }
複数のプロパティを一度に指定することもできます。
h2 {
font-size: 150%;
color: red;
}
複数の要素に同じスタイルを適用する
要素（セレクタ）をカンマ（,）で区切って指定し、同じスタイルを適用することができます。
h1, h2 {
font-size: 150%;
color: red;
}
HTML文書内にスタイルシートを記述する
スタイルシートをHTML文書の中に組み込む場合は、HTML文書のhead要素の中に以下の様に記述します。
<html>
<head>
<title>CSS基礎</title>
<style type="text/css">
h2 {
font-size: 150%;
color: red;
}
</style>
</head>
<body>
・
・
・
上記のように記述すると、文書中のh2要素全てにスタイルが適用されます。
コメントの書き方
CSSでは、「/*」と「*/」で囲った部分がコメントアウトされます。
記述例は以下の様になります。
<html>
<head>
<title>CSS基礎</title>
<style type="text/css">
h2 {
/* font-size: 150%; */←この部分がコメントになります。
color: red;
}
</style>
</head>
<body>
・
・
・