2005年6月 9日

CSSとは

今回は、「CSS（スタイルシート）」についてです。
では、早速、講義を始めたいと思います。

CSSとは

CSSとは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、HTML文書の装飾部分を一括管理できる機能です。

もう少し分かりやすく言いますと、HTMLでは、文字の大きさや色、背景色などを個別に指定していましたが、CSSでは、一括で指定することができます。

もしHTMLのみでWEBページを作成していれば、文章構造が細かくなったり、ページ数が増えてくると、それぞれのページを修正することは大変な作業になりますが、CSSを活用することによって簡単に修正することができます。

ブログテンプレートとCSS

では、ブログの場合、CSSはどのように使用されているのか見てみましょう。

■ ブログテンプレートのファイル構成

ほとんどのブログテンプレートでは、CSSを外部ファイル化していて、HTMLとCSSを別ファイルで管理しています。

HTMLではテンプレートの基本構造（レイアウト）を、CSSでは文字や背景の装飾部分を定義しています。

ブログテンプレートのファイル構成
HTMLファイル	・メインページ（トップページ）・カテゴリー・アーカイブ・個別エントリーアーカイブ（個別記事）・日付アーカイブ（月別アーカイブ）
CSSファイル	・スタイルシート

■ CSSの外部ファイル化

ブログのトップページなどのHTMLソースを見ていただくと、<head> タグの範囲内に、下記のような記述があります。

<< HTMLファイル >>

この記述で、 CSSを別のファイルから読み込むことができます。
HTML に CSS を記述することもできますが、CSSを外部ファイル化することで、同一のスタイルを複数のページで共有できます。

この外部ファイル化されたCSSを編集することで、トップページや個別記事などのデザイン部分（文字の色・サイズ、背景色、背景画像など）を、一括で変更することができます。

CSSの記述方法

次に、CSSの記述方法について説明します。
CSSの書式は下記のようになります。

<< CSSの書式 >>

セレクタ { プロパティ：値； }

セレクタ（selector）とは、スタイルを適用する対象のことで、HTML の要素（element）、例えば、 body や p などが該当します。

プロパティ（property）とは、セレクタにどのような効果を付与するかを指定するものです。プロパティごとに指定できる値が決まっています。

;（セミコロン）は、2つ以上のプロパティを設定するときに「値」の後ろに入れます。ただし、プロパティが1つしかない場合に記述しても、特に表示に支障はありません。

<< CSSの記述例 >>

body{
background-color: #ffffcc;
}

この例では、「BODY」がセレクタ、「background-color」がプロパティ、「#FFFFCC」が値となります。

プロパティが多い場合は、上記のように改行を入れて見やすくしましょう。

クラス

また、ブログのテンプレートでは、クラスが頻繁に使用されていますので、説明します。

クラスを定義することにより、特定の要素（タグなど）にスタイルを指定することができます。記述方法は、下記のようなパターンがあります。

■ セレクタ名　．クラス名（任意の名前）

セレクタにピリオド（.）とクラス名（任意の名前）をつけて記述します。
一つの要素に複数のスタイルも指定できます。

<< スタイルシート >>

p.menu　　 {　color: red;　}
p.submenu {　color: green;　}

<< HTML >>

<p class="menu">メニュー</p>
<p class="submenu">サブメニュー</p>

■ ．クラス名（任意の名前）

セレクタ名を指定せず、ピリオド（.）とクラス名だけを記述した場合は、すべての要素でそのスタイルを指定することができます。つまり、そのクラスはタグに依存することなく、複数のタグにスタイルを指定できます。

<< スタイルシート >>

.menu {　color: #666666;　}

<< HTML >>

以上、CSS（スタイルシート）について簡単に説明しました。
今回の内容は少し分かりにくかったかもしれませんね。
CSSは、実際にカスタマイズしていくと理解できるようになりますので、今回は軽く流し読みする程度で結構です＾＾

スタイルシートの詳しい記述方法は、下記の記事を参考にしてくださいね。
[関連記事] → スタイルシート記述方法

それでは、次回からいよいよ実践編です。長い間お待たせしました＾＾
ブログ別にカスタマイズ方法を詳しく説明していきます。

[次の講義へ] → 望ましい文字サイズの指定方法とは

1クリックの応援で更新が早くなります＾＾　