CSSとは簡単に言うと、コンテンツのレイアウトをきめ細やかに表現するための指示を専門するものです。

CSSは、Cascading Style Sheets：カスケード・スタイルシートの頭文字を取った略語で、HTML(XHTML)、およびHTML5がタグを利用して文書(情報・コンテンツ)の構造を構成し、CSSがWebページの見た目やデザインのレイアウトを定義する役割をもっています。

ここで、CSSは視覚表現［すなわち表示デバイス=画面］だけではなく、音声(マイク、スピーカー)や印刷(プリンター)などといった異なるデバイスに応じたプロパティが用意されていることも気にかけてください。

広義で「スタイルシート」と云った場合は、XMLデータを整形して表現するXSLも含まれます。

用語については右側の語句をクリックすると「IT用語辞典（e-Words）」の外部ページへジャンプします。

はじめに

(X)HTMLが構造化であるのに対して、CSSはプレゼンテーションを指定することはもう理解していただいたでしょう。つまり元々これらは分離させることを前提に策定されていることも理解する必要があるでしょう。

詳しく知りたい方は、世界標準化団体であるW3Cの勧告「Web Content Accessibility Guidelines 1.0［英語］」またはこの日本語訳：ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0を参照ください。

スタイルシートの定義は、HTMLタグ・ｉｄ属性・ｃｌａｓｓ属性のそれぞれに適応できます。

では、しばらく歴史的背景を探ってみましょう。

初期のブラウザの状況

'90年代前半、つまりMicrosoft Windows 95が発売されるまでは、Netscap Navigatorが最も使われていたブラウザであった。

しかし、Windows 95が発売され、Microsoft Internet Explorerが同梱されてからシェア獲得合戦が始まった。

  • IE vs NNの２大勢力によるシェア獲得合戦
  • ブラウザ戦争における傷跡：各社独自拡張機能を搭載
  • 本来CSSで表現するものも、HTMLの「物理マーク」の隆盛
  • ⇒ 多方面に混乱とコスト高が発生

このような状況で、Webコンテンツ作成者(あるいは技術者)は次のような問題をかかえた。

  • W3Cに準拠していない、または実装不足・バグによる問題で行き詰る
  • 「CSSは使えない技術」という誤解が蔓延した
  • いまだに残るブラウザ固有のバグ、各社による仕様の解釈の相違への嫌悪感
  • テーブルレイアウト（タグ）の乱用
  • WYSIWYGエディタへの過度の依存

以下に、HTML･CSSの誤用例を挙げる

  • font要素で体裁の変更。これを使ったとしても上位要素（パラグラフタグなど）の「意味」「構造」は変わらない。つまり、フォントの書体や色づけをしただけで、HTML的に強調などの意味はない。
  • 表以外にtable要素を用いたレイアウト手法
    　　・1ピクセル四方の透明画像(俗にスペーサーGIF)を用いたスペーシング
  • CSSの知識不足からくる限定的利用
    　　・せいぜい文字の大きさ・色、行の高さ程度

WEBコンテンツは、世界中のブラウズ機能を搭載した機器からデータを取得して読むものです。従ってよくみかける、「このサイトはIE4以上、800×600ピクセル以上で見てください」などといった制限付きのページをよくみかけますが、これはマイクロソフトの回し者と思ってしまう…。

近年の状況と変化

  • HTML + CSS（文書構造と視覚表現の分離）
  • Web標準準拠指向
    　　Web標準=W3C標準：(X)HTML, CSS, XML, P3P, SMIL, DOM, etc.
  • モダンブラウザの普及
  • HTML ⇒ XHTML, XML+XSLT
  • WEBアクセシビリティのニーズが高まり、CSSの存在が一層見直されている
  • RSSの普及(主にブログ)
    WEBサイトの更新内容を効率的に伝達するためのXML形式のデータファイル

(X)HTMLの特色

  • ハイパーリンク
  • フォームコントロールによるインタラクション(相互作用)の実現
  • アクセシビリティへの配慮
  • 過去、および将来への利用可能性

スタイルシートの種類

スタイルシートとは、情報(コンテンツ)に表現力を提供するための仕組みです。

  • CSS（Cascading Style Sheet）
  • XSL（Extensible Stylesheet Language）
  • DSSSL（Document Style Semantics and Specification Language）
  • Webコンテンツのフロントエンド実装によく利用されているのがCSS
  • CSSは視覚表現のみならず、音声やページなど、出力メディアに応じたプロパティを定義

モダンブラウザとは

モダンブラウザの定義は、これといってはっきりしていないが、「(X)HTML,CSS,ECMAScript, W3C DOMを比較的良くサポートするブラウザ」の総称です。以下に代表的なブラウザを列挙する。

  • Mozilla
  • Mozilla FireFox
  • Safari
  • Opera

一応上記定義でいうとMicrosoftのIE6以上も含まれるのですが、独自仕様が色濃いためあえて外して語ることが多いようです。

Web標準に準拠して取り組むための理由

  1. Webアクセシビリティ：社会的ニーズの高まり
  2. 検索エンジン向けの最適化（SEO）
  3. 閲覧環境の多様化。
    　　たとえばIEでいえば現在最も広く使われているのはバージョン６でしょう。現時点での最新版の７は新OS(VISTA)への移行が進まない慎重論からブラウザの移行も進んでいない、既にアメリカではバージョン８のベータ版がリリースされているというのに…。また、最近ではFirefoxが急成長しており、Netscapeが淘汰されつつある。
  4. ファイルサイズの削減
  5. 前方互換性と後方互換性の確保
  6. メンテナンス性の向上
  7. リニューアル時のコスト削減

Webアクセシビリティ

かつては、障害者や高齢者対策というのが常識でしたが、今後は利用者の年齢・国籍・障害・利用環境などの相違をクリアする必要性が問われている。

  • 対人間のみならず、対機械へのアクセシビリティの視点
  • 潜在顧客を逃さない
  • 企業の社会的責任（SCR）
  • 企業イメージの向上

クラス名付与に関する考え方

class名は、semantics（意味論、記号論）に配慮して付けるとされている。つまり、１つのコンテンツ（HTML）に対して、複数のスタイルシートを併用するような場合、“border4px”,“prettybackground”は悪い例です。

このコンテンツを作成するジェネレーターは、ez-HTMLですが、そこのサイトのトップページでは実にシンプルにHTMLが構成されており、CSSを切り替えることで様々なプレゼンテーションを実現しているので参考になると思います。

CSSの記述順とグループ化について

CSSの作成していると、機能がたくさんになって、不具合があったり微調整する際に探すのに苦労したことはないでしょうか。

そこで、こんな手法もあるよ、という程度で紹介します。

1.Universal Reset：共通のリセット
2.Layout blocks　 ：ブロックのレイアウト
　　2-1. Container　　 ：ページ本体
　　2-2. Header　　　　：ヘッダー部分(Heddingタグではありません)
　　2-3. Middle　　　　：本文
　　2-4-1. Column　　　：コラム
　　2-4. Footer　　　　：フッター
　　　　2-4-1. addressタグで記述する部分
　　　　2-4-2. copyright 著作権情報

3.Block 　　：ブロック系の指定
　　3-3. Topic Path　　：パンくずリスト
　　3-4. Menu　　　　　：メニュー
　　3-5. Sidebar　　　 ：サイドバー
　　3-7. Comments　 　：コメント（フォーム含む）
　　3-8. Contents　　　：記事関係
　　　　3-8-1. Title　　　：記事タイトル関係
　　　　3-8-2. Meta　　　 ：記事の日付などの表示
　　　　3-8-3. Article　　 ：記事本文
　　　　3-8-4. Anchor 　　 ：リンク/アンカー関係
　　3-9. Table　　　　 ：テーブル
　　3-10. Form　　　　 ：フォーム入力

4. Inline　　　　 ： インライン要素
　　4-1. Phrase　　　　：文字修飾
　　4-2. FontStyle　　 ：フォントスタイル
5. Page specific　： 表示ページで特有
6. Browser specific　：ブラウザー毎に特有

CSSファイル保存時の文字コードによる指定記述z

基本的に、というかHTMLのエンコードと同じエンコードをお勧めします。

TOPへ

IT用語辞典


 GOOGLE LOGO

inserted by FC2 system