↓
「../」については後述するので，とりあえずこのまま記述．
保存してブラウザで確認．
<body>，<h1>，<h2> のタグ部分はすでに style.css の中でスタイルが設定されているので，そのデザインが適用 される．このように異なるページで共通のスタイルシートを使用することで，デザインを統一させることが可能と なる．
次に <ul> や <ol> などリスト関連のスタイルを設定する．この部分はこのページ特有のデザインなので（すなわ ち他のページと共通したデザインにする必要はないということ），このページ専用のスタイルシートを別に作る．
mi で【ファイル↓新規→ CSS】を選択し，【ツール↓セレクタ→箇条書き <ul,ol,li> →リスト <ul> ／リスト <ol>】
を順に選択．さらに，ul と ol セレクタに左マージン（20px）を指定．
→
【ファイル↓保存《⌘-S》】を選択して，［DataHD ／ nnnnnnn ／ list］フォルダに，ファイル名を［list.css］として保存．
list.html と list.css とをつなぐために，list.html 内にスタイルシートのファイルを指定する．list.html に切り替えて，
さきほど指定したスタイルシートの設定行をコピー＆ペーストしてもう 1 行追加．
↓
追加した 2 行目のファイル名を「list.css」に変更．
XHTML+CSS
「../」を削除すること．
保存してブラウザで確認．箇条書き部分が右に寄れば OK．
次に「最近見た映画」のリストのマークを変更してみる．list.css の ul セレクタに，【ツール↓リストマーカー→
type（マーカーの種類）→ circle】を指定．
また，「CD シングル売り上げランキング」のリストの番号数字を変更してみる．list.css の ol セレクタに，【ツール
↓リストマーカー→ type（マーカーの種類）→ lower-roman】を指定．
list.css を保存してブラウザで確認する．映画リストに白丸，CD ランキングにローマ数字が表示されていれば OK．
練習６：箇条書きのマーカー変更してみよう（以下の説明に合わせる場合には，もとに戻しておく）
ol セレクタのリスト番号を decimal に修正する（もとの算用数字にもどす）．
最後にテキスト関係のスタイルを指定する．ul セレクタに文字色（maroon），フォントサイズ（small），行間（120%）
を指定し，そのまま ol セレクタにもコピーする．
XHTML+CSS
保存してブラウザで確認する．
これで list.html は終了．Validation しておくとよい．
XHTML+CSS
相対パスと絶対パス
パスの指定方法については Appendix 11 ページを参照．
index.html でスタイルシートをリンクする際に記述した，「<link rel="stylesheet" type="text/css" media="all"
href="style.css" />」は，index.html と style.css が同じ階層にあるので，そのまま「style.css」と記述している．
table.html や list.html で ス タ イ ル シ ー ト を リ ン ク す る 際 に 記 述 し た，「<link rel="stylesheet" type="text/css"
media="all" href="../style.css" />」では，table.html や list.html の存在する階層より１つ上の階層に style.css がある ので，１階層上がる「../」が必要となる．
フォトギャラリー
ここでは，テーブルを使って画像一覧のページを作る．
［書類／大渕担当授業用／プログラミング１／演習用データ／ gallery］フォルダを［DataHD ／ nnnnnnn］フォル ダにコピーする．
［DataHD ／ nnnnnnn ／ gallery ／ index.html］を開き，共通スタイルシート（../style.css）とページタイトル（フォ トギャラリー）を記述する．
保存してブラウザで確認．
画像を見ると，本来横長であるはずの写真が正方形に表示されている．これは，共通スタイルシート（style.css）
での img セレクタ（width : 135px ; height : 135px ; ）のためである．
そこで，このページの画像用に別のスタイルを設定する．このままだと style.css での img と区別できないので，
class を使用して区別する．これまでの説明だと，<img> タグに class を指定するが，このページでは画像が９つ もあり，指定が面倒になる．このような場合，次のように指定することができる．
まず，gallery.html の <table> タグに【ツール↓汎用属性→ class（分類名）】で class を指定する．