先日、CSSについて調べごとをした際に残したメモ。最近、こんなことばっか調べてます。勉強にはなります。ええ、知らないことがいっぱいあります。
で、CSSとは何なのかというと、W3Cのサイトに書いてあるには、こんな感じ。
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
適当に訳すと、CSSは色、レイアウト、フォントなどのWeb ページのプレゼンテーションを表現する言語です。大きな画面、小さな画面、プリンタといった違ったタイプのデバイスに対して表示を調整することも許可されています。CSSはHTMLから独立しており、XMLベースのマークアップ言語に対して使用することもできます。HTMLをCSSから分離することは、サイトのメンテナンスを簡単にし、スタイルシートをページ間で共有し、違った環境に対してページを適応させることができます。これはプレゼンテーションからの構造(もしくはコンテンツ)の分離によるものです。
文中の「大きな画面、小さな画面、プリンタといった違ったタイプのデバイスに云々」の部分はメディアタイプを指す。
メディアタイプはヘッダでCSSファイルを呼び出す時に、media="all"とか書くアレである。
http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html
主なメディアタイプには、all(全部)、handheld(携帯用端末的なもの)、tty(固定文字数的なもの)、print(印刷系)、screen(一般的なPCのディスプレイ)などがある。
ちなみにhandheldもttyも携帯デバイス向けっぽいメディアタイプになる。ので、携帯向けのCSSは両方指定しとくのが吉らしい。
全く同じHTMLなのに、メディアタイプの違いだけで端末の差を乗り越えられたら、コード的には美しいですね。そういうデザインのパターンとかあったりするのかな。