スタイルシートの基礎知識

ブログのデザインはスタイルシート(テンプレート)で決まります。オリジナルブログをデザインするためにはスタイルシートを編集しなければなりません。ブログカスタマイズに必要最低限知っておいた方が良いスタイルシートの基礎知識について説明します。

1. スタイルシートの基礎構文
2. スタイルシートを外部ファイルで定義する
3. 基本セレクタ
4. クラスセレクタ
5. IDセレクタ
6. セレクタ、属性の記述方法

1. スタイルシートの基礎構文

スタイルシートは<span>タグ、<div>タグを用いて次のように記述します。<span>タグはインライン要素(前後で改行されない)、<div>タグはブロック要素(前後で改行される)を囲む際に使用します。

<span style="color:red;">テキスト</span>
<div style="color:red;">テキスト</div>

<span>、<div>に限らず、<a>などのHTMLタグにもstyle属性を指定することができます。

<a style="color:red;" href="http://www.blogcustomize.com/">ブログカスタマイズ</a>

ページ内のすべての<a>タグに属性を指定するのは面倒なので、<head>〜</head>にまとめて指定を行うことができます。次のように指定するとすべての<a>タグに属性が有効になります。

<head>
<style type="text/css">
<!--
a { color:red; }
-->
</style>
</head>
<body>
<a href="http://www.blogcustomize.com/">ブログカスタマイズ</a>
<a href="http://blogcustomize.seesaa.net/">ブログカスタマイズのブログ</a>
</body>

2. スタイルシートを外部ファイルで定義する

スタイルシートを外部ファイルに定義して、複数のページで共有することができます。

<head>
<link rel="stylesheet" type="text/css" href="styles-index.css">
</head>

外部ファイルには次のように記述します。スタイルシートのコメントアウトは /* コメント */ です。

a { color:red; } /* リンクの色を赤に設定 */

Seesaaブログはこの形式を採用しています。
ユーザーはこの外部ファイルを編集することでデザインをカスタマイズすることができます。

3. 基本セレクタ

上述のように<a>などのHTMLタグに属性を与えることを、基本セレクタにスタイルシートを設定するといいます。

4. クラスセレクタ

各タグにクラスを定義することもできます。次の例は<h2>タグにredクラスとblueクラスを定義しています。

h2.red { color:red; }
h2.blue { color:blue; }

<h2 class="red">これはredクラスです。</h2>
<h2 class="blue">これはblueクラスです。</h2>

5. IDセレクタ

IDセレクタを指定することもできます。ひとつのドキュメント中に、同じIDセレクタを複数定義することはできません。IDセレクタを定義する場合はセレクタ名の前に「#」をつけます。

#content { font-size:10pt; }

<div id="content">

Seesaaブログでは、基本セレクタ、クラスセレクタ、IDセレクタを使用します。

6. セレクタ、属性の記述方法

カンマ(,)を用いることにより、複数の要素に対して同時に属性を定義することができます。

h1, h2 { color:red; }

複数の属性を定義する場合はセミコロン(;)で区切ります。

a {
color:red;
text-decoration:none;
}

ピリオド(.)で定義すると異なるタグでクラスを共有することができます。

.red { color:red; }

<h1 class="red">これはredクラスです。</h1>
<a class="red">これもredクラスです。</a>

A要素は link(通常のリンク), visited(読み込み済みのリンク), active(クリックされた瞬間のリンク), hover(マウスを重ねたときのリンク)といった定義済みのクラスを持っています。定義済みクラスのスタイルを変更する際はコロン( : )で指定します。

A:link { color:green; }
A:visited { color:blue; }
A:active { color:red; }
A:hover { color:red; }

1つのタグで複数のクラスを同時に指定することができます。

.red { color:red; }
.bold { font-weight:bold; }

<span class="red bold">赤い太字</span>

「あるタグに囲まれているときだけ」といった条件を指定することもできます。
次の例では<td>タグの中に現れる<a>タグにのみ属性を指定しています。

td a { text-decoration:none; }

<td><a href="http://www.blogcustomize.com/">ブログカスタマイズ</a></td>
トップページへ戻る

サイトマップ

Seesaaブログのカスタマイズ > スタイルシート カスタマイズ > 基礎知識
スタイルシート カスタマイズ

スタイルシート作成ツール

HTMLカスタマイズ
サイト全体

記事コンテンツ

コメント、トラックバック
新着記事

カテゴリ

最近のコメント、トラックバック

検索ページ

その他