document.write("<div style=\"padding : 1em; margin-bottom:1em; max-width:45em; border-right :3px dotted orange ;\">");
document.write("<h2 style=\"color:#008b8b; background-color:#fcfcfc none; font-size:1.7em; text-align:center; border-top:3px solid #d3d3d3; border-bottom:3px solid #d3d3d3; padding:0.3em 0; margin-top:1em; margin-bottom:1em;\">CSSとは何か・何ができるのか</h2>");
document.write("<p style=\"text-indent:1em;\">多種多様な <a href=\"../../others/data/user_agent\">User Agnet（ユーザーエージェント）</a>がアクセス（支障なく情報を取得）できる、アクセシビリティの高いサイト作りには <strong>CSS</strong>（Cascading Style Sheets：カスケーディングスタイルシート）は欠かせません。CSS を使うことで、<abbr title=\"(eXtensible) HyperText Markup Language\">(X)HTML</abbr> は本来の情報伝達のみの役割に徹することができ、さらにウェブページの見栄えを整えるのに役立ちます。Cascading Style Sheets の Cascade とは、順序立てられたリストという意味で、スタイルシートが段階的に継承していく働きを表しており、<abbr title=\"User Agent\">UA</abbr> は制作者スタイルシート、ユーザースタイルシート、デフォルトスタイルシートの3つの中から好みのスタイルを自由に選択できるのが特徴です（スタイルを選べない UA もある）。</p>");
document.write("<p style=\"text-indent:1em;\">まず、スタイルシート（Style Sheets）とは HTML や XHTML のようにウェブ上で使われている言語に限ったものではなく、<abbr title=\"Personal Computer\">PC</abbr>（<abbr title=\"パーソナルコンピュータ\">パソコン</abbr>）を利用している方であれば、普段から何気なくスタイルシートにふれていることが多いはずです。たとえば、Microsoft Word, 一太郎などのワープロソフトでフォントの種類や文字の大きさ、色、行間の幅の指定など様々な文書の見栄え（レイアウト）に関する情報を定義しているのがスタイルシートなのです。</p>");
document.write("<p style=\"text-indent:1em;\">ウェブ上で使われるスタイルシートとは、主に <em><abbr title=\"(eXtensible) HyperText Markup Language\">(X)HTML</abbr>文書に対しての見栄え（レイアウト）を定義する</em>ことを指します。スタイルシートには、いくつかのスタイル言語があり、(X)HTML文書の見栄えを指定するためのスタイル言語には、各視覚環境の UA の対応状況などから CSS が一般的に使用されています。つまり、CSS もいくつかのスタイルシートの中の一種でしかなく、他にもウェブ上で使われているスタイル言語に XSL（eXtensible Stylesheet Language）などがあります。CSS が (X)HTML文書に対しての見栄え（レイアウト）を定義するのに対し、XSL は XML文書に対しての見栄え（レイアウト）を定義します。そして、本稿（CSSガイド）で扱うのが (X)HTML文書に対しての見栄え（レイアウト）を定義するスタイルシートである CSS というわけです。</p>");
document.write("<p style=\"text-indent:1em;\">では、CSS では一体何ができるのでしょうか。(X)HTML には文章を 「見出し」「段落」「リスト」「表」のように各部分を構造化する特徴がありました。これに対して、(X)HTML文書の見栄えを定義する CSS は、これら (X)HTML によって構造付けされた「見出し」なら「見出し」の構造に対してレイアウトを定義するのが特徴です。たとえば、 (X)HTML で見出しと構造化した部分に、さらに文字の色や形などを装飾するための指定があると、見出しとして定義された部分に装飾に関する不明確な情報が余計に混じってしまうことになり、情報伝達の妨げとなります。そこで CSS は、従来の HTML が担ってきた情報伝達と見た目を整える2つの作業の内、見た目を整える作業については、CSS が分担することによって、<em>(X)HTML が効率的に情報交換を行えるように、(X)HTML文書が本来の役割とは違う見た目を達成する</em>のに役立ちます。</p>");
document.write("<p style=\"text-indent:1em;\">つまり、CSS は (X)HTML文書のコンテンツや論理構造と表現（見栄え）とを分離させることで、さまざまなメリットを生みます。(X)HTML はシンプルなまま、(X)HTML 本来の役割に徹することができ、さらに一度定義したスタイル情報は複数の (X)HTML文書で共有させることができるように設計されているので、サイト全体のデザインに一貫性を持たせるができ、メンテナンス性が大幅に向上します。CSS による文書のプレゼンテーション手法を習得すれば、あなたのウェブサイトはより鮮やかに、そしてより効率的な情報交換が行えるようになるのです。</p>");
document.write("</div>");