RULE. Chapter 05 デザインの実装 ─基本編 CSS（カスケーディング・スタイル・シート）を使った視覚表現 RULE. 039 を書くことは可能ですが、それでは従来の方法と大差ありません。詳しいことは後述しますが、CSS は外部の別ファイルにまとめてスタイルを記述することができ、それを XHTML 側から参照するという使い方が可能なのです。仮に大量の XHTML に一部分の修正があったとしても、その XHTML が同じ CSS ファイルを参照していれば、そのファイルの該当するスタイルの修正だけですべての XHTML に変更が適用 XHTML のタグや属性を使った Web ページの装飾表現は、生産性やメンテナンス性が飾に関するすべてを任せることで生まれる利点もあるのです。シブルでなくなる可能性もあります。そこで、Web 標準に準拠して XHTML には文書としての情報構造を記述し、デザインやレイアウトといった見た目の装飾にかかわる部分は CSS を用いて表現する、ということが最良の選択肢となるのです。ここからは、 CSS に関する基礎知識を解説しましょう。まずは CSS にできることを理解しよう 05 039 このように XHTML 文書から装飾に関するタグや属性を取り除いて、CSS にその装 Chapter 極端に落ちたり、デバイスが多様化する現在ではその装飾があることによってアクセできるというわけです（ 02 ）。前述したように CSS は、XHTML 文書の見た目のコントロールを一手に引き受けることができるため、その適用範囲は多岐に渡ります。一例をあげると、文字色（前景色） Chapter や背景色の変更、フォントの指定、罫線の種類や太さ、ブロックの幅や高さといっ見た目をコントロールするために用意された CSS たサイズ指定やレイアウトに関わる部分など、Web ページに含まれる要素に対してさまざまな表現が可能となります（ 03 ）。 CSS の記述方法は、従来 XHTML で装飾目的に使っていたタグや属性の指定と大き ※1 ※1　CSS くはかわりませんし、日常的に利用する CSS ぐらいであれば習得にはさほど多くのアップされた文書に視覚的な表現を与えるために存在しています。Web 標準に準拠 CSS は「Cascading Style Sheets（カスケーディ時間はかからないでしょう。し、アクセシビリティの向上や再利用性を確保するためには、XHTML 文書には装飾目的のタグや属性を取り除く必要があります。XHTML 文書に情報構造だけを記述しング・スタイル・シート）」が正式名称だが、日常的にはスタイルシートと呼ばれることが多い。 02 CSS （カスケーディング・スタイル・シート）とは、HTML や XHTML でマークこれから CSS を始めようという方は、まず CSS を使った装飾やレイアウトの基本を押さえましょう。CSS を使った Web ページデザインは決して難しいものではありません。基本ができてしまえば、あとはスタイルの組み合わせといった応用だけが用してブラウザ内に表示され、なんだか見た目的に物足りない Web ページとなってすべてなのです。 Chapter ただけでも十分な価値があるものですが、そのままではブラウザの初期設定値を利しまいます。そこで、その見た目のデザインやレイアウトをコントロールするための言語として、このスタイルシートが用意されているのです。 02 03 XHTMLは文書構造、CSSで装飾の場合 CSS で見た目をコントロールする利点従来のように XHTML 文書中にタグや属性を使って直接装飾指示を行うやり方では、 Chapter デザインの修正時には XHTML を 1 枚 1 枚開いて該当箇所を修正する手間がありました（ 01 ）。それが単独のページであればまだしも数百ページにわたる大規模なものとなると大変です。リンクもしくは読み込んだCSSを修正しかし、CSS を利用すればその状況は一変します。XHTML 内部にもスタイル指定 CSSファイルデザインを外部 CSSファイルで管理しておくことで、 01 見た目の変更はCSSファイルの修正だけで済む装飾的なタグや属性が入ったXHTML デザイン変更は各XHTMLを開いて修正従来のようにHTML中に装飾指示を与えてしまうと、修正時には該当するすべてのファイルの修正が必要になる 098 98-99 04 CSSファイル 03 ■ XHTML での指定 ■ CSS での指定 color="#ffffff" color: #fffffff bgcolor="#000000" background-color: #000000 border="1" border: 1px solid #000000 font size="3" font-size: 100% ← 「1em」などこのようにXHTMLで指定していた装飾的な属性などは、 CSSに置き換えるといっても記述的に大きな違いはない 099 08.03.07 6:04:02 PM