1と2の間辺りからはじめるCSS講座大体の感じを教えて

もくじ
目次を飛ばして本文へ
博士H:

ここからはCSSの書き方を教えていくぞい。

そうじゃの、まずは、
実物をチョイと覗いてもらう事にしようなのじゃ。

ここのサイトのCSS

生徒B:

なんでー、ただのテキストファイルじゃん。

博士H:

そうじゃ、CSSの特徴の一つに、
誰でも簡単に書けるというのがあるからの。

生徒B:

おー、なんかスゲー簡単そうだな。
何々・・・

生徒A:

博士、基本的に
要素名 { 変えたいところ : 変える値 }
なんですね!

博士H:

そうじゃの、それが基本形じゃ。
要素名の部分はセレクタ
変えたいところはプロパティ
変える値は
と言うのじゃよ。
プロパチィと値のセットを宣言と言うのじゃ。
書くと、こうなるの。
セレクタ { プロパティ : プロパティ値 }

生徒B:

・・???
前に : とか . とか付いた、妙なのがあるな・・・なんだろ。
@マークの付いた、妙なものもあるな。

で、博士、これってナンな訳?

博士H:
生徒A:

へ?

博士H:

セッカチじゃのぉ。
次の章で説明するで、もう少し待つのじゃ。

生徒B:

へーい。

博士H:

それでじゃな、
宣言部分やセレクタ部分は、
グループ化と言って、簡略化することが出来るのじゃ。
宣言をグループ化する場合は、
こんな感じじゃ。


body { margin: 2em 1em 2em 70px }
body { background : white }
body { background-position : top left }
body { background-attachment : fixed }
body { background-repeat : no-repeat }
body { background-image : url("logo.gif") } 

博士H:

これをこんな風に簡略化できるんじゃ。


body {
  margin: 2em 1em 2em 70px;
  background: white;
  background-position: top left;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-image: url("logo.gif");
}

生徒A:

じゃ、セレクタをグループ化する場合は、こうなんですか?

h1; h2; h3; h4 { text-align : left }

博士H:

いやいや、セレクタは,(カンマ)で区切るのじゃ。

h1, h2, h3, h4 { text-align : left }

生徒A:

簡単・・・

博士H:

そうじゃろ、そうじゃろ。
CSSの骨組みは、こんなモンじゃよ。
終りに、コメントの挿入のし方を書いておこうかの。
HTMLと同じく、覚え書きをしておくのに良いじゃろ。
書き方はこうじゃ。


/* コメントコメントコメントコメントコメントコメントコメント
 コメントコメントコメントコメントコメントコメントコメント */

生徒B:

なんか洗脳されそうだ・・

生徒A:

博士、書く場所は決まってないんですか?

博士H:

いやいや、もちろん決まっとるよ。
{ と } と : と ; の前後じゃ。
font-/* fontとは文字のこと */family : serif ;
なんてのはボツ
そんなところじゃな。

今日はここまで。

生徒B:

ちょ、ちょっと博士、@マークの解説ぅぅー;

<CSSってどんなもの?[P] どうやってHTMLにくっつけるの?[N]>

▲見出しへ戻る
最終更新日:2004年04月02日
Copyright © 2001-2003 ばあど All Rights Reserved.