どうやってHTMLにくっつけるの？

博士Ｈ：

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

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

生徒Ｂ：

style="スタイルシート"？

博士Ｈ：

その通りじゃ。

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

生徒Ｂ：

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

博士Ｈ：

なーんかヘンじゃろ。

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

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

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

生徒Ｂ：

あ、なーる。

博士Ｈ：

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

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

生徒Ａ：

え？　えーっと、
<style>
・・・・・
</style>
かな？？

博士Ｈ：

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

生徒Ａ：

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

博士Ｈ：

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

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

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

生徒Ａ：

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

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


<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>
博士Ｈ：

そうじゃそうじゃ。

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

生徒Ｂ：

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

博士Ｈ：

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

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

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

生徒Ａ：

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

博士Ｈ：

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


<link rel="STYLESHEET" href="tekitou.css" type="text/css">
生徒Ｂ：

・・・まんまじゃん。

生徒Ａ：

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

博士Ｈ：

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

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


@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 }
生徒Ｂ：

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

生徒Ａ：

最初の授業の復習っ

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

博士Ｈ：

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

生徒Ｂ：

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

博士Ｈ：

おお、すまぬのぉ。

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

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

@charset "Shift_JIS";

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

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

生徒Ａ：

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

博士Ｈ：

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

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

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

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

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

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

生徒Ｂ：

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

博士Ｈ：

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

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

生徒Ａ：

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

博士Ｈ：

質問続きじゃのぉ。

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

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

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

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