槻ノ木隆の「BBっとWORDS」

バックナンバー

■	その116「DLNAの仕組み」 [2007/03/26]
■	その115「ドメインとActive Directory」 [2007/03/19]
■	その114「ワークグループができること」 [2007/03/12]
■	その113「WPSの仕組み」 [2007/03/05]
■	その112「Gopherの生い立ちと現在」 [2007/02/26]
■	その111「Wikiの使われ方」 [2007/02/19]
■	その110「文字コードとは」 [2007/02/05]
■	その109「IISの生い立ち」 [2007/01/29]
■	その108「NASの登場と一般への普及」 [2007/01/22]
■	その107「HomePNAのいろいろ」 [2007/01/15]
■	その106「Ogg Vorbisの成り立ち」 [2006/12/25]
■	その105「MIDIの原理とSMFの構造」 [2006/12/18]
■	その104「AIFFの構造」 [2006/12/11]
■	その103「WAVの構造と現状」 [2006/12/04]
■	その102「WMAの歴史」 [2006/11/27]
■	その101「AACの特徴」 [2006/11/20]
■	その100「MP3/MPEG Audioの仕組み」 [2006/11/13]
■	その99「HSDPAの仕組み」 [2006/11/06]
■	その98「H.264・MPEG-4 AVCの特徴」 [2006/10/30]
■	その97「IEEE 802.16e（モバイルWiMAX）の特徴」 [2006/10/23]
■	その96「TIFFの特徴」 [2006/10/16]
■	その95「PNGの現状と今後」 [2006/10/02]
■	その94「GIFの構造」 [2006/09/25]
■	その93「10GBASEの種類（2）」 [2006/09/11]
■	その92「10GBASEの種類」 [2006/09/04]
■	その91「GbEのいろいろ」 [2006/08/28]
■	その90「JPEGの特徴」 [2006/08/21]
■	その89「DivXの広がり」 [2006/08/07]
■	その88「MPEGの仕組み」 [2006/07/31]
■	その87「WMVのこれまで」 [2006/07/24]
■	その86「AVIの生い立ちとそのコーデック」 [2006/07/10]
■	その85「QuickTimeの変遷」 [2006/07/03]
■	その84「Realのこれまでと今後」 [2006/06/26]
■	その83「ShareとWinny」 [2006/06/19]
■	その82「DOCSISの仕組み」 [2006/06/12]
■	その81「SQLインジェクションの流れ」 [2006/06/05]
■	その80「RSSの動作」 [2006/05/29]
■	その79「Skypeの仕組み」 [2006/05/22]
■	その78「BitTorrentの特徴と今後」 [2006/05/15]
■	その77「Winnyの仕組みと現状」 [2006/05/08]
■	その76「WinMXの特徴」 [2006/04/24]
■	その75「Gnutellaの歴史と構造」 [2006/04/17]
■	その74「Napsterの歴史」 [2006/04/10]
■	その73「P2Pのいろいろ」 [2006/04/03]
■	その72「IEEE 802.11nの動向」 [2006/03/27]
■	その71「ActiveX Scriptingの動作」 [2006/03/20]
■	その70「Ajaxの仕組み」 [2006/03/13]
■	その69「DHTMLの動作」 [2006/03/06]
■	その68「Scriptの定義」 [2006/02/27]
■	その67「JavaScriptの仕組み」 [2006/02/20]
■	その66「Javaの動作」 [2006/02/13]
■	その65「RFCのプロセス」 [2006/02/06]
■	その64「ActiveX DocumentとActiveX Controlの違いと共通点」 [2006/01/30]
■	その63「ActiveX Controlの機能」 [2006/01/23]
■	その62「ActiveXを構成するもの」 [2006/01/16]
■	その61「Cookieの仕組みと用途」 [2005/12/26]
■	その60「malwareとその分類」 [2005/12/19]
■	その59「rootkitの動作」 [2005/12/12]
■	その58「CSSの役割」 [2005/12/05]
■	その57「HTMLの変遷」 [2005/11/28]
■	その56「PONとその種類」 [2005/11/21]
■	その55「FWAの仕組み」 [2005/11/14]
■	その54「DoSとDDoS」 [2005/11/07]
■	その53「SNMPとMIBの動作」 [2005/10/03]
■	その52「Jumbo Frameとフレームサイズ」 [2005/09/12]
■	その51「WPA2の仕組み」 [2005/09/05]
■	その50「WPAとWPA-PSKの違い」 [2005/08/29]
■	その49「WPAの仕組み」 [2005/08/22]
■	その48「WebDAVの動作」 [2005/08/08]
■	その47「OFDMAの仕組みとOFDMとの違い」 [2005/08/01]
■	その46「OFDMの仕組み」 [2005/07/25]
■	その45「WiMAXの特徴」 [2005/07/11]
■	その44「Wi-Fiの役割」 [2005/07/04]
■	その43「FTPの目的と動作」 [2005/06/27]
■	その42「UPnPの動作」 [2005/06/20]
■	その41「ネットマスクの仕組み」 [2005/06/13]
■	その40「ARPの機能」 [2005/06/06]
■	その39「DNSの原理」 [2005/05/30]
■	その38「デフォルトゲートウェイの役割」 [2005/05/23]
■	その37「MACアドレスの仕組み」 [2005/05/16]
■	その36「スイッチとその進化」 [2005/05/09]
■	その35「ルータによるメリット」 [2005/04/25]
■	その34「ブリッジの原理」 [2005/04/18]
■	その33「リピータの機能」 [2005/04/11]
■	その32「IPアドレスのクラス」 [2005/04/04]
■	その31「ブロードキャスト/マルチキャスト/ユニキャスト」 [2005/03/28]
■	その30「SMTP AUTHと認証の種類」 [2005/03/14]
■	その29「Submissionポートとスパムメール対策」 [2005/03/07]
■	その28「Outbound Port25 Blockingとは」 [2005/02/28]
■	その27「PGPの仕組み」 [2005/02/21]
■	その26「PKIと認証局」 [2005/02/14]
■	その25「公開鍵暗号方式とは」 [2005/02/07]
■	その24「共通鍵暗号とは」 [2005/01/31]
■	その23「SSHの仕組みと応用」 [2005/01/24]
■	その22「SSLの役割」 [2005/01/17]
■	その21「POP3とIMAP4の違い」 [2004/12/27]
■	その20「POP3の役割と機能」 [2004/12/20]
■	その19「SMTPの機能と問題点」 [2004/12/13]
■	その18「SPIとパケットフィルタリング」 [2004/12/06]
■	その17「LANの概念とその広がり」 [2004/11/29]
■	その16「SIPの役割」 [2004/11/15]
■	その15「プロキシの利用」 [2004/11/08]
■	その14「VoIPの仕組み」 [2004/11/01]
■	その13「イーサネットとは」 [2004/10/25]
■	その12「IP/TCP/UDP/ICMPとは」 [2004/10/18]
■	その11「DHCPの役割」 [2004/10/04]
■	その10「MIMOとは」 [2004/09/27]
■	その9「DMZとその効果」 [2004/09/13]
■	その8「ファイアウォールとは」 [2004/09/06]
■	その7「NATとNAPTの違いとIPマスカレード」 [2004/08/30]
■	その6「VPNとVPNパススルーの仕組み」 [2004/08/23]
■	その5「無線LANの問題とWEP」 [2004/08/09]
■	その4「IEEE 802.11a/b/gって何を意味しているの？」 [2004/08/02]
■	その3「ダイナミックDNSって？」 [2004/07/26]
■	その2「グローバルIPアドレスとプライベートIPアドレス」 [2004/07/12]
■	その1「PPPoEって何だろう？」 [2004/07/05]

その58「CSSの役割」

■ CSSって何？

　「CSS（Cascading Style Sheet）」とは、前回説明したHTMLと密接な関係があります。前回の図を見返していただくと、1997年のHTML 3.2にCSS1が、1999年のHTML 4.0.1にCSS2がそれぞれ繋がっていることからもわかるとおり、CSSとHTMLは別のものとして管理されているものの、重要な関係があります。

　CSS自体は、Webページのレイアウト、つまり見栄えを定義するためのものです。CSSの登場により、HTMLは画面の体裁などをハンドリングする必要が大幅に減って、本来の“文章の要素”の記述に専念できるようになり、一方、CSSではHTMLでは成し遂げられなかった微妙な体裁のコントロールが可能になったわけです。

■ CSSの目的

図1：CSSを使う前

これだけでは良くわからないかもしれないので、もう少し細かく説明しましょう。CSSを導入するまで、Webで画面を記述するのはHTMLが頼りでした。ところがHTMLの場合、基本となるのが文章の内容を記述するものでしたから、端的に言えば「中身がちゃんと読めさえすれば、体裁は二の次」というポリシーであり、この結果同じHTMLでもブラウザを変えると実際の表示はまったく変わってしまう、という問題がありました（図1）。

　もちろん、内容に違いがあるわけではないので、技術文章などではこれで十分だったわけですが（HTMLが元々CERNの内部での技術文章の管理や閲覧のために開発されたものだったという経緯を考えれば、これは当然ともいえます）、Webの普及により“見栄え”が問題になってくると、いろいろと不都合が出てきます。特にデザインに凝りはじめると、ブラウザによって見え方が異なるというのは致命的な問題になってきました。

　また、そもそもHTMLの場合、装飾などが文字単位ですから、デザインに凝るためにはいろいろな制約がありました。仕方なく画像ファイルを多用することになり、むやみに処理が重いページになってしまうこともしばしばで、しかもこれを改善すべくHTMLをどんどん拡張する形になり、HTMLの互換性が取れなくなるといった話まで出てきました。前回ちょっと触れたHTML+とかHTML 3.0は、こうした拡張の例ともいえます。

　そこで考え出されたのがCSSです。スタイルシートなんて呼ぶ場合もありますが、内容は同じです。このCSSは“見え方”のみを規定するもので、HTMLと組み合わせて利用します。例えば、CSSで以下のように記述した場合を考えます。

<style type="text/css">

</style>

　するとHTMLでは、以下のような使い方でCSSを呼び出します。

<span class="verystrong">文字</span>

　この場合、“<strong>”（文字の強調で、太字にする）をもっと強めたいということで、太字＋赤色にしたものを“verystrong”という「セレクタ」に定義します。一方、HTMLは、“<span>”を使ってこのセレクタを呼び出すというわけです。

　これはほんの一例ですが、CSSでは非常に多くの装飾パラメータが定義され、また文字単位だけではなく、ピクセル/インチ/ミリ/センチなどといった単位での指定や相対指定、背景やリスト/ボックスなどさまざまな機能が提供されるようになり、しかも1回記述すると複数のブラウザで同じように見えるといった環境が提供されるようになりました。

■ CSSの問題

図2：CSSを使うと

　もっともブラウザのCSSへの対応は、“常に”遅れ気味です。1つは、要素が非常に多く、また複数の指定を組み合わせた場合の動作の解釈の違いなどもあることから、CSS1/CSS2のどちらにしても、完璧にこれをインプリメントしたブラウザというのは世の中に存在しません。その程度というのはさまざまで、例えば図2でブラウザAとBは見た目が同じように表示されますが、ブラウザCは少しだけ全体が小さく表示されるとかいう可愛いレベルから、そもそもCSSのある記述をまったく理解しない関係で、まるっきり画面に何も表示されなくなるというレベルの問題まで、いろいろなケースが存在します。

　実はこのCSSの互換性というのは、ときとしてブラウザ本体のシェアにまで影響するほどに大きな要素になりつつあります。少し古い話ですが、IE 3.0とNetscape 3.0では明らかにNetscapeの方が優位でした。ところがIE4がCSSを（完全ではないにせよ）サポートした一方、Netscape 4.xはCSSのサポートがIEよりさらに乏しかった関係で、WebデザイナーはCSSをIE用とNetscape用で分けて記述する必要が出てきてしまい、最後にはIEのみ動作サポートするページが大量に出現するに至り、Netscapeのシェアはあっという間に下落してしまいました。もちろん、Netscapeのシェアが落ちた理由はこれだけではないのですが、CSSの問題が大きな比重を占めていたことは間違いありません。

　では今ではこうした問題がだいぶ解決したか？　というとそうでもなかったりします。このCSSの非互換性を解決するための試みはいくつかありますが、こうした団体の1つに「The Web Standard Project」があります。一度は活動を休止した同プロジェクトですが、2002年には活動を再開しており、ここが提供する「Acid2」と呼ばれるブラウザテスターではCSS1やHTML 4.0.1、PNGなどのテストが行なわれます。ところが、間もなく登場するといわれるMicrosoftのIE7ではAcid2のテストを完全にパスしないという問題が未だに出ているあたり、CSSのハンドリングは相変わらず大変であることが見て取れます。

　IE7にとってせめてもの救いは、今のところこれを完全にパスしたブラウザがほとんどないことでしょうが、今しばらくはCSSの非互換性は残ったままになりますし、これによりWebデザイナーはこの非互換性と付き合っていくしかないのが目下の問題といえるでしょう。

2005/12/05 10:57

槻ノ木隆
　国内某メーカーのネットワーク関係「エンジニア」から「元エンジニア」に限りなく近いところに流れてきてしまった。ここ２年ほどは、企画とか教育、営業に近いことばかりやっており、まもなく肩書きは「退役エンジニア」になると思われる。（イラスト：Mikebow）

Broadband Watch ホームページ