目次を飛ばして本文へ パン屑リストへ
目次
文書の構造を示す言語、SGML
見栄えを担当するのがスタイルシート
CSSの特徴とメリット
Level2の意味
CSSの欠点

CSSってナンだろう?

概要まず最初に、CSSってナンなのか、知っておく必要があるよね。このセクションでは、それだけを解説するよ。

CSSというのは、Cascading Style Sheetsの略、つまり、カスケードするスタイルシートなんだ。これじゃぁさすがにナンの事だか分からないよね。

文書の構造を示す言語、SGML

この意味を理解するには、まずはSGMLってものを知らなくちゃいけない。SGMLって何かって? 文書の構造を示す為の言語の事だよ。HTMLは知ってるだろ。アレもSGMLを基に作られたものなんだ。じゃ、つまりHTMLも文書の構造を示すものかって? ズバリその通りなんだ。

じゃぁ文章の構造ってナンなのか。

  • コレは見出し。
  • そっちは段落。
  • ここは強調したい。
  • コッチは大きな区切りだから区切り線を引きたい。
  • これはプログラムコードね。

という具合に、文章の意味を教えるモノだって事。だから、UAはその意味に応じた表示をしてくれるし、それがどんなことを意味しているか知っている閲覧者は、素直に意味を理解できるんだ。

これはひいては、「ロボット」と呼ばれる、機械的にキーワードを漁っていくタイプの検索エンジンへの対策になるんだ。

見栄えを担当するのがスタイルシート

そう、懸命なキミは気付いたね。「文字に色をつける」事はその文字に意味を与える事になるのかってね。「文章を中央に持ってくる」事とか「ボーダーを付ける」事とか、ほかにもイロイロあるよね。例えば、スペースを使って左右へずらしたり、文字間を調整するのもそう。こういうのって、構造じゃないよね。こういうので無理して見栄えを変更して意味を伝えようとしても、UAはその通りに表示してくれないかも知れないし、見慣れた表現を期待していた閲覧者を戸惑わせるかも知れない。

そこで、スタイルシートの登場だ。文書の構造を示すものだけを残して、見栄えを定義するものはすべてこのスタイルシートに任せようって考えだ。SGMLには文書の構造だけを担当させて、見栄えの部分はスタイルシートっていう具合に、役割を分担しようってワケなんだ。スタイル(見栄え)を指定する為のシートって事だね。

現状じゃぁ、完全にスタイルが構造から分離される事は無いけどね、色んな意味で。

CSSの特徴とメリット

Cascading Style Sheetsってのは、そんなスタイルシートの一種で、今一番普及してるんじゃないかな。

このスタイルシート言語は、カスケードする事が最大の特徴なんだ。ヨク分からない? そりゃそうだよね。

HTMLが入れ子の構造になってるのは、知ってるよね。エ? 知らない? じゃ、それも説明しないとね。HTMLの基本構造は知っているカイ? こうだね。
<html>
  <head>
    headers
  <head>
  <body>
    contents
  </body>
</html>

今知ったという人、キミがもしページを作っていたとしたら、そのページはちょっと危なっかしいかもしれないね。

この状態だと、headとbodyがhtmlに囲まれてて、更にhead内の内容headersはheadに、body内の内容contentsはbodyに囲まれてるね。これをそれぞれ、headとbodyがhtmlに、headersはheadに、contentsはbodyに「入れ子」になっている、というんだ。分かってくれたかな? じゃ、話を戻すよ。

このように入れ子の構造になっていると、同じようにCSSを適用した要素も入れ子になっちゃって、複雑になっちゃう。

おっと、話が跳んじゃったね。CSSでは、基本的に各要素に対して、スタイル(見栄え)を適用する仕組みになってるんだ。要素って何かって? ウン、それはね、開始タグ(<font>なんか)から終了タグ(</font>なんか)までの事を指すんだ。だから、入れ子の構造だと、要素内に別の要素を含んでいる事になるんだ。

だから、スタイルが二重、三重に適用される事になっちゃうよね。「カスケード」ってのは、これをうまく解決したスタイルシートってイミなんだ。詳細は、ま、カスケードを見てね。

それから、CSSを使うメリットについてなんだけど、それなりにいろいろあるんだ。

  • サイトに統一感が出る。
  • サイトのリニューアル・細かなスタイルの修正がしやすい。
  • 誰でも手軽に作れる(メモ帳、SimpleTextなどでも制作出来る)。
  • 同じCSSを何度も使えるので、回線や訪問者に優しい。
  • HTMLより格段に細かなスタイル指定が出来る。
  • シンプルで見やすいHTML・XML文書を書くことが出来る。

こんなところかな。

Level2の意味

そして、このステップアップで説明するのは、その中でもCSS2と呼ばれてるものなんだ。正確には、Cascading Style Sheets, Level2だよ。CSSも、HTMLと同じように、徐々に進歩していってるんだ。今一番新しいのが、このレベル2のCSSなんだ。CSS1よりも、イロイロ拡張されてるよ。変更点なんかは、CSS1->CSS2の変更点を見てくれるといいよ。

もうそろそろ、レベル3が出るみたいなんだ。その時には、またボクに出番があるといいな。

CSSの欠点

CSSでは、特定のUAやOSに依存しない仕様にって事にしてるけど、UAのバグ 一覧を見て分かるとおり、実際にはUAごとにサポート状況がまちまちなんだ。CSSでイチバン悩まされるのが、コレ。このバグと非対応部分の嵐が、CSSをジッサイに使っていく上での最大の欠点なんだ。UAごとに別々のスタイルシートを使えるようになってればいいのにね。

取りあえず、バグを利用したり(CSSを用いたUA分岐方法)、スクリプトを利用したり、CGIなどで分岐したりする事が出来るよ。

それから、ここに挙げてあるバグのリストは、まだまだ基本的なものだけで、ほかにも状況によっていろいろなバグが出て来るんだ。見付け次第、追加していく予定だけど、キミも見付けたら、教えてくれると嬉しいな。

ボクが説明するのはここまでだよ。さびしいけど、そろそろお別れだよ。また会えるといいね。じゃね。


page top
最終更新日:2018年07月18日
Copyright © 2002-2018 ばあど All Rights Reserved.