close

Enter

Log in using OpenID

039【PDFダウンロード】

embedDownload
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
Author
Document
Category
Uncategorized
Views
1
File Size
755 KB
Tags
1/--pages
Report inappropriate content