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属性を指定することは非推奨とされています。
HTML文書内にスタイルシートを記述する
スタイルシートをHTML文書の中に組み込む場合は、HTML文書のhead要素の中に以下の様に記述します。
<html>
<head>
<title>CSS基礎</title>
<style type=”text/css”>
h2 { font-size: 150%; }
</style>
</head>
<body>
・
・
・上記のように記述すると、文書中のh2要素全てにスタイルが適用されます。
複数のスタイル（プロパティ）を一度に指定する場合は次のように記述します。
h2 {
font-size: 150%;
color: red;
}CSSを外部ファイルにする
CSS（スタイルシート）をHTML文書内に直接記述せず、外部ファイルとして読み込む方法です。通常はこの方法でスタイルシートを読み込みます。
外部ファイルとして読み込めば、複数のHTML文書で同じスタイルを適用できるので便利です。デザインを変更したい場合も、一つの外部ファイルを編集するだけで済むので管理・更新がラクになります。
CSS（スタイルシート）の作成
まずは読み込むスタイルシートのファイルを作成します。
テキストファイルにCSS（スタイルシート）の部分のみを記述します。
h2 {
font-size: 150%;
color: red;
}
p { color: blue; }記述したら、拡張子「.css」として保存します。ここでは「style.css」とします。
HTMLにCSS（スタイルシート）を読み込む
次に、HTML文書に作成したCSS（スタイルシート）を読み込みます。
HTML文書のhead要素の中に以下の記述をします。
<link rel=”stylesheet” href=”style.css” type=”text/css” />複数の要素に同じスタイルを適用する
要素（セレクタ）をカンマ（,）で区切って指定し、同じスタイルを適用することができます。
h2, h3 {
font-size: 150%;
color: red;
}この記述でh2とh3に同じスタイルが適用されます。
コメントの書き方
CSSでは、「/*」と「*/」で囲った部分がコメントアウトされます。
記述例は以下の様になります。
<html>
<head>
<title>CSS基礎</title>
<style type=”text/css”>
h2 {
/* font-size: 150%; */ ←この部分がコメントになります。
color: red;
}
</style>
</head>
<body>
・
・
・
コメント