オリジナルテンプレートへの道のり

■ CSSの基本ルール
あの人気ブログ「動画の桜」の運営者エロ流さんによる、デザイン講座第二回目です。

【今回のお題】 前回はCSSの基本的説明をして頂きましたが、二回目ということで実践編。CSSを使う際の法則を教えて頂きます。

■ CSSを記述する前に
CSSの記述の仕方はHTMLと非常に良く似ていますが、細かいルールがたくさんあり少しでも記述の仕方を間違えると、意図した通りの表示にならないことが良くあります。全てのルールを覚える必要はありませんが、今回紹介する基本的なルールは、しっかりと頭に入れておいてください。DTIブログのテンプレートの編集画面には、「HTMLの編集」と「スタイルシートの編集」という 二箇所の編集エリアがあると思います。 これは、HTMLとCSSが別々のファイルになっていることを現しています。この講座は、DTIブログユーザー向けの講座ですので、ブログシステムと同じ形で、CSSファイルにCSSスタイルを記述する形で話を進めさせて頂きますが、HTMLファイルに直接CSSスタイルを記述することも可能です。また、当講座では、「HTMLの編集」エリアを「HTMLファイル」と表示し、「スタイルシートの編集」エリアを「CSSファイル」と表示します。

CSS記述のための第一歩

■ セレクタ 属性と値
CSSの基本形はセレクタに属性と値を指定する形になります。と言われても、ピンと来ないかも知れませんので具体的に示してみましょう。 例えば、CSSで<body>タグの装飾(テキストをグレーに)を行う場合は以下のように記述します。

CSSファイル -----------------------------------------
body {
color: #cccccc;
}
-------------------------------------------------------

各部の名称と記述の仕方は、以下のようになります。

-------------------------------------------------------
セレクタ {
属性: 値;
}

body・・・・セレクタ
color・・・・属性
#cccccc・・・・・
-------------------------------------------------------

セレクタは{ }で囲み{ }の中に属性と値を指定します。属性の後には「:(コロン)」をつけ続けて値を指定し最後に「;(セミコロン)」で閉じます。 一つのセレクタに対して属性と値はいくつでも指定することができます。以下のように三つでも四つでも指定することができます。

セレクタ {
属性: 値;
属性: 値;
属性: 値;
属性: 値;
}

それでもまだピンと来ない方のために、今回のテキスト装飾の例を質問形式に当てはめて簡単に説明してみましょう。

-------------------------------------------------------
セレクタ
質問 : 「何を装飾するのですか?」
答え : 「bodyタグを装飾します」

属性
質問 : 「bodyタグのどこを装飾するのですか?」
答え : 「テキスト色を装飾します」


質問 : 「テキストを何色に装飾するのですか?」
答え : 「グレーに装飾します」
-------------------------------------------------------

このようになるわけです。

セレクタや属性の種類はたくさんありますので、詳しく知りたい方は専門書や専門サイトなどをご覧ください。

次回予告

ということで、次回はここまでの基礎を踏まえて記述に入っていきます。HTMLタグをCSSタグで実際に装飾する方法から始めます。

エロ流さんプロフィール

名前: HARU(ハル)
職業: ITベンチャー勤務、3流フォトグラファー
趣味: 写真、読書、3流映画鑑賞、一人温泉旅
夢: フォトグラファー