1と2の間辺りからはじめるCSS講座どうやってHTMLにくっつけるの?

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

では早速、CSSをHTMLにくっつけてみようなのじゃ。

まずは、一番簡単な、HTMLの属性として
直接スタイルを指定する方法を説明しようかの。

生徒B:

style="スタイルシート"

博士H:

その通りじゃ。

で、中に何を書くか分かるかの。

生徒B:

そりゃぁ
style="body { margin: 0 }"とか・・・あれ?

博士H:

なーんかヘンじゃろ。

この方法の場合、
その要素にスタイルを指定するのじゃからして、
セレクタや{}は必要ないのじゃ。

例えば、こうじゃ。
<span style="color:#c51240;font-weight:bold">
太くて赤黒っぽい
</span>

上の例の結果:
太くて赤黒っぽい

生徒B:

あ、なーる。

博士H:

次は、CSSをHTMLファイルに
割り込ませて書く方法じゃ。
ファイルごとにスタイルを変えたい場合に
都合が良いのぅ。

使い方は、生徒Aクン、どうするか分かるかの。

生徒A:

え? えーっと、
<style>
・・・・・
</style>

かな??

博士H:

ホ、惜しいのぉ。
例えば、typeは必須じゃ。
正解は、こうじゃ。
<style type="text/css"><!--
・・・・・
--></style>

生徒A:

博士!
CSSをコメント・アウトしちゃってますよね。
これじゃ、ブラウザから見えないんじゃ・・・

博士H:

うむ、ええところに気が付いたの。
その点については心配ご無用じゃ。

これはCSS非対応ブラウザへの配慮なんじゃよ。
非対応ブラウザは、
style要素を解釈出来ずに、内容を
ただの文字列として表示してしまうかも知れぬでの。

CSS対応ブラウザでは、
style要素の内容はコメントとして扱わないように
なっておる
から大丈夫じゃ。

生徒A:

へー、よくできてますね。

で、こんな風に書いていくんですね!


<style type="text/css"><!--
body {
  margin: 2em 1em 2em 70px;
  background: white;
  background-position: top left;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-image: url("logo.gif");
}
img.sample { float: left }
--></style>

博士H:

そうじゃそうじゃ。

ただ、これじゃぁスタイルを頭にまとめるだけで、
ページは軽くならないのぉ。

生徒B:

そうだよ、前に言ってた、
無駄にタグが多くならない方法。
あれ、ページ見たけど、どこにCSS置いてあるのか
さっぱり分かんなかったんだよね。
それ教えてくれよ。

博士H:

あれはスクリプトを使って
CSSを呼び出しておるのじゃよ。

でもやってることは同じじゃ。
外部にあるCSSファイルとリンクするのじゃよ。

CSSを別のテキストファイルで作るのじゃ。
そのファイルの名前を仮に
「tekitou.css」としておこうかの。

生徒A:

.cssですか、
分かりやすい拡張子ですね。

博士H:

で、そのCSSファイルをHTMLファイルにリンクするには、
ズバリ、link要素を使うのじゃ!


<link rel="STYLESHEET" href="tekitou.css" type="text/css">

生徒B:

・・・まんまじゃん。

生徒A:

linkって事は、
ヘッダに書かないとダメなんですね。

博士H:

よう勉強しておるのー、その通りじゃ。

外部スタイルシートの中には、
スタイルシートだけを書くんじゃぞ。


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

生徒B:

さっきから思ってんだけどさー、
type="text/css"って、
CSSがスタイルシートでスタイルシートがCSSなんだろ?
なんでイチイチそんなこと書くんだ?

生徒A:

最初の授業の復習っ

で博士、HTMLのスタイルシートって
CSSが標準じゃないんですか?

博士H:

んーまぁ、初期値ではそうなのじゃが、
必ず書くように、とのW3Cのお達しなのじゃ。

生徒B:

博士ー、@マークの話、いつになるのー。

博士H:

おお、すまぬのぉ。

最初に@の付いたものは、@規則と呼ばれておる。
ここで説明するのは、@charsetだけじゃ。

@charsetには、
そのスタイルシートの文字コードを指定する
んじゃよ。

@charset "Shift_JIS";

文字コードについては、
ヘッダに書き込むものって?を見てくれい。

これを置けるのは、
外部スタイルシートの最初だけじゃから注意じゃ。

生徒A:

文字コードって何なんですか?
前から気になってたんですけど。

博士H:

ふむ、簡単に説明しておこうかの。

文字とゆうのは、例えば「ふ」なら
「ふ」の形をした、じゃな。
で、それをつなぎ合わせて文が出来上がっていくのじゃ。

が、毎回そんなことやってちゃ、
例えば2メガの手紙のやりとりをしなきゃならん。
知っての通り、画像ちうもんは
圧縮しても大きくなってしまうでの。

それで、文字コードの出番というわけじゃよ。

コンピュータのデータというのは、
ゼロと一の組み合わせじゃろ。
双方があらかじめ各々の文字に対する像を持っておき、
それに対して、一定のゼロと一の並びを
割り当てるのじゃ。

これのおかげで、普通のテキストは軽量で済んでおる。

生徒B:

普通、そんなのHTMLと一緒だろ。
なんでわざわざ指定するんだ?
もしかして必須?

博士H:

いや、必須ではないのじゃが、
書かないと文字コードを識別しない
ブラウザがあるんでの。

というより、文字コードの判別は実際難しいんじゃが。

生徒A:

文字コードって、他に種類があるんですか?

博士H:

質問続きじゃのぉ。

Shift_JISの他には、この辺りが有名かの。

  • EUC-jp
  • ISO-2022-JP
  • UTF-8

ジオシティーズなどではEUC-jpじゃったりするの。

では、今日はここまでなのじゃ。

<大体の感じを教えて[P] セレクタというもの[N]>

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