XHTML + CSS
2008 Lecture Sheet
Programming I @ Sapporo City University
Sapporo City University © OHBUCHI Kazuhiro, 2004-2008
XHTML による Web ページ制作の基本手順...1
CSS によるデザイン...5
汎用ブロック要素...9
id と class... 11
ボックス... 14
表組み... 20
span（汎用インライン要素）... 29
Web 用の画像... 31
箇条書き... 33
相対パスと絶対パス... 38
フォトギャラリー... 38
リンク... 41
Appendix
XHTML+CSS XHTML による Web ページ制作の基本手順 ［DataHD］内に，［nnnnnnn］ （各自の学籍番号）というフォルダを作る． アプリケーションフォルダ内の mi を起動して，【ファイル↓新規→ XHTML】を選択． 背景が水色のウィンドウが開くので，【ツール↓文書構造・宣言→基本構造 (XHTML10)】を選択． 新規 XHTML を開始する場合には，最初に必ずこの作業を行う． ファイルを保存するダイアログが表示されるので，［DataHD ／ nnnnnnn］フォルダを選択し，ファイル名を［index. html］として保存． ファイル名は半角英数字で記述する．使用できる文字は，アルファベット，数字，ハイフン（-），アンダースコア （_），ピリオド（.）だけであり，日本語やスペースなどは使用できない．また，XHTML ファイルを保存する時は， 必ず「.html」の拡張子をつける．追加情報は Appendix 1 ページを参照のこと． 14 行目までは決まり文句のようなものなので，基本的に変更しない． <title> と </title> ではさまれた部分（16 行目）を編集． → 不等号「<」と「>」で囲まれた部分を「タグ」という．タグは必ず半角英数字の小文字で記述する． タグは通常「<xxxxxx> 〜 </xxxxxx>」の形式になっていて，囲まれた部分に特殊な意味を持たせている．これが， 「マークアップ」の意味するところである． 「<!-- 〜 -->」の部分はコメントであり，注釈などを記述できる（【ツール↓コメント】で入力可能）．
<body> の次の行（21 行目）にカーソルを移動し，【ツール↓文書構造・宣言→ <div> ブロックレベル要素（id）】 を選択．さらに，ダブルクォーテーションの間にカーソルがあるので，そのまま半角英数字で「main」と記述． ここではこの部分の説明はせずに進みます．
XHTML+CSS →
<div> と </div> ではさまれた部分にカーソルを移動して，《return》を 2 度押し，間の行に記述．
【ファイル↓保存《⌘ -S》】でデータを保存し，【ツール↓ Safari で表示《⌘ -R》】を選択．すると，ブラウザ（Safari） が起動し，ページが表示される． <title> タグにはそのページのタイトルを記述．ページの本文は必ず <body> タグ内に記述． <div> タグはブロック構造（詳細は Appendix 2 ページ）を作る．XHTML では，本文内のすべてのものをブロック 要素内に記述しなければならない（これが HTML との大きな違い）． この授業内で扱うタグの一覧は，Appendix 3 ページを参照のこと．
mi にもどり，【ツール↓ Validation → W3C Markup Validation Service を開く】を選択
「Validation」とは「確認／検証」などという意味．ここでは，記述した XHTML が正しいか，検証すること．
検証ページが開くので，「Validate by File Upload」をクリック．
XHTML+CSS 「Check」ボタンをクリックすると，検証結果が表示される．緑色の「This Page Is Valid XHTML 1.0 Strict!」が表示
されれば検証 OK．
XHTML が正しく記述されていない場合には，赤色で「This page is not Valid XHTML 1.0 Strict!」と表示される．
ページが完成したら必ず Validation チェックする．Validation 時のエラーの対応などについては Appendix 4 〜 5 ページを参照のこと．
mi に戻り，<div> と </div> ではさまれた部分（22 行目）の「Welcome to my website!」を消去．
［書類／大渕担当授業用／プログラミング１／演習用データ／サンプルテキスト／ sample1.txt］を開き，すべてを 選択して，コピーする．
index.html に戻り，<div> と </div> ではさまれた部分（22 行目）に，サンプルテキストをペースト．
XHTML+CSS プロフィールを編集する．index.html に各項目を入力していく（適当でよい）． → 空行を使って XHTML を見やすく記述するとよい． 保存《⌘ -S》して，Safari で確認《⌘ -R》． 「大学施設情報」の部分を見ると，XHTML 内では改行されていても，ブラウザでは改行されずに表示されている． 意図的に改行するには，<br /> タグを単独で使用する（このように単独で使用するタグもある）． index.html に戻り，大学施設情報の部分を編集する．キャンパス名と説明文がくっついているので，離してみる． <h3>（プロフィール部分）とは区別したいので，下位レベルの <h4> で記述する． 「芸術の森キャンパス」という文字列（46 行目）を選択して，【ツール↓見出し→ <h4> 見出し 4】を選択． → 同様に，「桑園キャンパス」の部分（48 行目）も加工する． 保存《⌘ -S》して，Safari で確認《⌘ -R》． このように，XHTML では，<div> や <h ○ > など，ブロック構造を作るタグを使いながら，ページ全体の構造（論 理的構造）を作り上げていく．
XHTML+CSS CSS によるデザイン mi で【ファイル↓新規→ CSS】を選択． 背景がクリーム色のウィンドウが開くので，【ツール↓セレクタ→本文 <body>】を選択． スタイルシートは必ず上記の形式で記述する．「body」の部分を「セレクタ」といい，セレクタに続いて，中括弧 { } を記述する． { と } の間（2 行目）にカーソルを移動し，【ツール↓文字色（color）→ color ［キーワード］】を選択．さらに【ツー ル↓色データベース→キーワード 16 色→ red】を選択． → { と } の間は，「プロパティ：値；」の形式で記述する．ここでは，「color」が「プロパティ」，「red」が「値」に対 応している． この授業内で扱うプロパティの一覧も，Appendix 3 ページを参照のこと． 【ファイル↓保存《⌘ -S》】を選択して，［DataHD ／ nnnnnnn］フォルダに，ファイル名を［style.css］として保存． ファイル名は半角英数字で記述する．使用できる文字は，アルファベット，数字，ハイフン（-），アンダースコア（_）， ピリオド（.）だけであり，日本語やスペースなどは使用できない．また，CSS ファイルを保存する時は，必ず「.css」 の拡張子をつける．
このままでは，index.html と style.css はバラバラの状態である．index.html と style.css とをつなぐために，index. html に 1 ヶ所追加する．［index.html］を開き，<title> タグの 1 行上（15 行目）の「href」部分を編集．
↓
保存《⌘ -S》して，Safari で確認《⌘ -R》．文字がすべて赤くなっていれば OK．
ページのデザイン（視覚的構造）は，スタイルシート（CSS）で記述する．いま記述したスタイルシートでは， XHTML 内で <body> タグにはさまれた部分（＝ページ全体）の文字色（color）を赤（red）に設定せよ，という
XHTML+CSS
style.css に戻り，3 行目に空行を追加して，【ツール↓背景（background）→ background-color（背景色）→ color ［キー
ワード］】を選択．さらに【ツール↓色データベース→キーワード 16 色→ yellow】を選択． 保存《⌘ -S》して，Safari に切り替え，再読み込みボタン（ ）をクリック．背景が黄色になれば OK． どのような色を使用できるか確認するには，【ツール↓色データベース→キーワード 16 色を見る】や【ツール↓ 色データベース→セーフカラー 216 色を見る】を選択． これらの色は，W3C で正式に認められている基本色である（これ以外の色も設定は可能であるが，CSS Valiadation ではエラーとなる）． セーフカラー 216 色を使用する場合には，色名に半角シャープ記号「#」をつける． 練習１：文字色と背景色を変えてみよう（以下の説明に合わせる場合には，色名をもとに戻しておく） ページの見出し「Welcome to my website!」部分のデザインを変更する．index.html を見ると，この部分は， <h1> タグで囲まれているので，このタグをセレクタとして CSS でデザインを記述する． style.css の 6 行目にカーソルを合わせて（CSS でも見やすいように空行を設けるとよい），【ツール↓セレクタ→見 出し <h> → h1】を選択． body セレクタの 2 つのスタイル（2 〜 3 行目）をコピーして，h1 セレクタの { と } の間にペーストする．さらに 色の部分（red と yellow ／練習 1 で変更していればその色名）を消去しておく． できるだけコピー＆ペーストを多用して，楽に記述していくとよい． → そして，body セレクタに設定した文字色と背景色とは異なる色を設定する． 保存《⌘ -S》して，Safari に切り替え，再読み込みボタン（ ）をクリック．ページの見出し部分の色が変われ ば OK．
XHTML+CSS 見やすいページを作成するには，文字色と背景色との色の濃度差（＝コントラスト）をつける必要がある． 次は，「プロフィール」の部分．index.html を見ると，この部分は，<h2> タグで囲まれているので，このタグを セレクタとして CSS でデザインを記述する．style.css の h1 セレクタ部分の 4 行（6 〜 9 行目）をコピーして，11 行目以降にペーストする． ペーストした方のセレクタを h1 から h2 に変更し，文字色と背景色も変更する． 保存してブラウザで確認すると，「プロフィール」の部分だけではなく，「講義内容」の部分もデザインが設定され ている． スタイルシートでデザインを設定すると，そのページ内の同じタグで記述している全ての部分に，同じデザインが 適用される． index.html には，このほかに <h3> と <h4> のタグが使用されている．この部分にもデザインを設定するので， style.css にスタイルを追加する．
XHTML+CSS この授業では，このように，まず XHTML でページの論理的構造を記述し，CSS で視覚的構造を記述して，ページ を作成する．論理的構造は，ブロック構造で構成し，XHTML だけで内容が伝わるように作成する． XHTML+CSS でサイト構築するメリットについては，Appendix 6 ページを参照のこと． この段階での index.html のブロック構造は下図の通り． h1 div id= main
h2 h3 h2 h4 h4 h3 h3 h3 h3 body
XHTML+CSS 汎用ブロック要素 続いて，その他の文章の部分をデザインする．プロフィール欄に書かれた，実際の名前，生年月日，住所，趣味の 各項目（27,30,33,36 行目）にデザインを指定したいが，これらの部分にはタグがない．CSS ではタグをセレクタ として使用するので，このままではスタイルを記述できない．このような場合，特別な意味を持たないタグ（「汎 用タグ」という）を使用する． ブロック構造を作る汎用タグは，実は一番最初の作業で使用した <div> タグである． 自分の名前（27 行目）を選択して，【ツール↓文書構造・宣言→ <div> ブロックレベル要素（class）】を選択． → 「id」，「class」については後述．また，余分な空行は削除してよい．同様にして，生年月日，住所，趣味の各項目（30,33,36 行目）にも <div> タグをつける． <div> タグは 1 行ごとにつけるというわけでもない．「講義内容」の 5 項目部分にまとめてつけてみる．コピー＆ペー ストなどを使って，以下のように，5 項目をはさむように <div> タグを記述する． → 「大学施設情報」の説明書き部分にも <div> タグを記述する． ↓
XHTML+CSS
一番下の行（57 行目）の </div> は，21 行目の <div id="main"> に対応していることに注意する．わかりにくい 場合には，【ツール↓コメント】を使用して，コメント（注釈）を入れておくとよい．
index.html を保存．<div> タグが記述されたので，style.css にデザインを記述する．
保存してブラウザで確認．
よくみると，いま <div> タグを付けた部分以外にも，このデザインが適用されている部分がある．「プロフィール」 の上下部分や「大学施設情報」の下部分の背景色が白になっている．
これは，いま <div> タグに対してデザインを指定したので，一番最初に記述した <div id="main"> 〜 </div> で囲 まれた部分にもデザインが適用されてしまったためである．
XHTML では必ずブロック構造でページを記述していく必要があるが，ブロック構造を構成できるタグが限られて いるため，同じタグを何度も使用せざるを得ない．しかしそれでは，デザインを変えたりすることができない．
XHTML+CSS id と class そこで使用するのが，「id」と「class」である．使い方はどちらも似ていて，id=" ○○○ " や class=" ○○○ " のよ うに，「＝」とダブルクォーテーションの中に id 名や class 名を記述する．<div> タグと一緒に使用することが多 いが，他のタグでも利用できる． 「id」，「class」の使い分けのコツなどは後述するが，重要なのは，１つのページ内で，同じ id 名をもつ「id」は使 用できないが，同じ class 名をもつ「class」は何度でも使用できる，ということである．
まず「プロフィール」部分の <div> タグ４つ全てに同じ class 名「profile」を設定する．これで，この部分に同一 のデザインを設定できる．
id 名や class 名は半角英字でつける．
「講義内容」部分には class 名「lecture」を設定する．これで，プロフィール部分と同じ <div> タグを使用しているが， class 名が異なるので，別のデザインを設定できる．
「大学施設情報」部分には class 名「campus」を設定する．
index.html を保存する．
<div> タグと class 名を指定したので，デザインしていく．
style.css の div セレクタ（26 行目）を以下のように，「div.profile」と修正． →
「div.profile」を記述する場合には，途中にスペースなどを入れない．
XHTML+CSS
「div.profile」と記述することで，<div> タグのうち class 名に「profile」を指定した部分だけにスタイルを適用す ることができる．
なお，タグと id 名を指定するときは「タグ # id 名」，タグと class 名を指定するときは「タグ . class 名」というセ レクタを記述する．
例えば一番最初に記述した <div id="main"> 部分のスタイルを設定したい場合には，「div#main」というセレクタ を使って記述すればよい．
style.css にその他の部分のスタイルも追加する．class 名を「lecture」とした部分は，文字の大きさと太さを変更 してみる．これは，【ツール↓フォント（font）→ font-size（文字の大きさ）→ large】，【ツール↓フォント（font） → font-weight（フォントの太さ）→ bold】で入力する．
「/* 〜 */」の部分は「コメント」であり，注釈などを記述できる（【ツール↓コメント】で入力可能）．
class 名を「campus」とした部分は，文字の大きさと行間を変更してみる．これは，【ツール↓フォント（font）
→ font-size（文字の大きさ）→ small】，【ツール↓テキスト（text）→ line-height（行間）→ height［相対数値指定］】
で入力する（なお標準の行間は 150%）．
保存してブラウザで確認．
XHTML+CSS h1
div id= main h2 h3
div class= profile h3
div class= profile h3
div class= profile h3
div class= profile h2
div class= lecture h2
h4
div class= campus h4
div class= campus body このように，ブロック構造（段落と考えてもよい）を上から順番に作成して，ページを構築していくのが XHTML の特徴である． なお，同じ id 名は１つのページに１回しか使用できないので，おもにページ内の大きなレイアウト（上中下や左右） などに使用され，class はページ内の要素のデザイン（色やボックスなど）に使用される．id の使用例については， 授業内では特に説明しないので，［書類／大渕担当授業用／プログラミング１／演習用データ／ XHTML+CSS サン プル／ CSS 応用／ 01-id_layout］内のファイルを参照のこと．
XHTML+CSS ボックス 基本的にタグでマークアップされている部分は，「ボックス」と呼ばれる領域を持っている．上図のブロック構造 の長方形もすべてボックスである． ボックスには重要な要素が 3 つあり，これらの値をうまく設定することで，ページを視覚的に見やすくデザインす ることができる．その要素とは，「マージン（margin）」，「ボーダー（border）」，「パディング（padding）」であり， 図にすると以下のような関係にある． この中が，実際に文字や画像が 表示される部分になる top margin padding border left right bottom 例えば現在作成中のページの先頭部分で見ると，青い塗り色の部分の境界線が「border」，Welcome to... という 文字列から，その境界までの距離が「padding」，青い塗り色とグレーの塗り色の間が「margin」となる． border,margin,padding に関するプロパティでは，上下左右（top/bottom/left/right）4 つの値を個別に指定したり， 一括で指定できる． 一括指定する方法は４通りある． 例として，ボーダーの太さ（px：ピクセル）を指定する場合を考えると， ・border-width : 3px ; →上下左右すべて 3px ・border-width : 3px 2px ; →上と下が 3px，左と右が 2px ・border-width : 3px 2px 5px ; →上が 3px，左と右が 2px，下が 5px ・border-width : 3px 2px 5px 7px ; →上が 3px，右が 2px，下が 5px，左が 7px（時計回り） となる． では，ボックス系のスタイルを指定して，ページのデザインをする． まず <h1> タグの「Welcome to my website!」の部分は，まず文字の大きさを変え，さらに「W」が左ボーダーにくっ ついているので，全体的に離してみる．style.css の h1 セレクタの部分に 2 行追加する．【ツール↓フォント（font）
→ font-size（文字の大きさ）→ x-large】，【ツール↓パディング（padding）→ padding（一括指定：上下左右）】の後，
数値を「10px」にする．
→ 保存してブラウザで確認．
XHTML+CSS →
次に <h2>．文字の大きさ（【ツール↓フォント（font）→ font-size（文字の大きさ）→ large】）を変更，「プロフィー
ル」の「プ」を左ボーダーから離す（【ツール↓パディング（padding）→ left（左パディング）】を 5px），また，ペー ジの左端から左ボーダーまでを少し広げる（【ツール↓マージン（margin）→ left（左マージン）】を 15px），の 3 行を追加する． → 保存してブラウザで確認． → 当然，「講義内容」や「大学施設情報」の部分も変更になっている． 練習２：h1,h2 のスタイルを変えてみよう（以下の説明に合わせる場合には，設定をもとに戻しておく） 次に <h3>．文字の大きさ（medium），左パディング（5px），左マージン（25px）を上記と同じ方法で記述．さらに， 背景色を変更（yellow）し，枠線を【ツール↓ボーダー（border）→ border（一括指定）→ border（一括指定）】 で入力して，色を「red」に変更． → 保存してブラウザで確認． → 練習３：h3 のボーダーを変えてみよう（以下の説明に合わせる場合には，設定をもとに戻しておく） 次に実際のプロフィールの項目（実際の氏名や生年月日など）部分（<div class="profile"> の部分）．文字の大きさ （small），左マージン（40px）を上記と同じ方法で記述．さらに，背景色を変更（yellow）する． →
XHTML+CSS
また，<h3> の部分（「名前」，「生年月日」など）と <div class="profile"> との間隔をつめる．そのためには， <h3> の下マージンと <div class="profile"> の上マージンの両方を設定する必要がある．
そこで，h3 セレクタの部分では，【ツール↓マージン（margin）→ bottom（下マージン）】を 5px，div.profile セ レクタの部分では，【ツール↓マージン（margin）→ top（上マージン）】を 5px に設定する． → → 保存してブラウザで確認． → <h3> の下マージンと <div class="profile"> の上マージンの値を異なる値に設定した場合には，大きい値の方が採 用される． 「講義内容」の箇条書き（<div class="lecture">）部分．文字色（black），背景色（yellow）を設定．文字の大きさ 変更（small），左マージン（40px）を設定し，【ツール↓フォント（font）→ font-family（フォント指定）→ serif】 で文字の書体を明朝体系に設定． → 保存してブラウザで確認． → フォントを具体的なフォント名で指定することもできるが，ページを見ているコンピュータの環境に依存するので， 避けた方がよい． 次は <h4> のキャンパス名の部分．左マージン（25px）を設定し，【ツール↓ボーダー（border）→ border-color（枠
線の色）→ color（一括指定：上下左右）】でボーターの色を teal，【ツール↓ボーダー（border）→ border-width（枠
線の太さ）→ width（一括指定：上／右／下／左）】でボーダーの太さを上 0px ／右 0px ／下 1px ／左 5px，【ツー ル↓ボーダー（border）→ border-style（枠線の種類）→ style（一括指定：上下左右）】でボーターの種類を solid に設定．
XHTML+CSS → 保存してブラウザで確認． → キャンパス名と左側の罫線がくっつきすぎているので，左パディング（5px）を追加． → 保存してブラウザで確認． → 最後のキャンパスの説明文（<div class="campus">）部分．文字色（black），背景色（yellow），左マージン（40px） を設定． → 保存してブラウザで確認． → 最後にキャンパス名と説明文の間隔を少しつめる．プロフィールの部分と同様に設定する． h4 セレクタの部分では下マージンを 5px，div.campus セレクタの部分では，上マージンを 5px に設定する．
XHTML+CSS ， 保存してブラウザで確認． → 若干調整する．div.xxxxxx セレクタを見ると，文字色（black）と背景色（yellow）がすべて共通している．これら の部分はこのページの本文といえる部分なので，本来は body セレクタ部分で指定するものである．実際，body セレクタで指定している文字色（red）は，このページ内でまったく使用されていない．
そこで，div.xxxxxx セレクタ部分の文字色と背景色の指定を削除し，body セレクタで文字色（black）を設定する．
→
→ 保存してブラウザで確認．
XHTML+CSS
XHTML+CSS 表組み 「表」の構成要素は以下の図の通り． 見出し データ データ データ ： ↑ １列目 ２列目↑ ３列目↑ ４列目↑ ←１行目 ←２行目 ←３行目 ←４行目 見出し データ データ データ ： 見出し データ データ データ ： 見出し データ データ データ ： 横方向を「行」，縦方向を「列」という．マス目１つ１つを「セル」という． 見出しのセルはなくてもかまわない． 使用するタグは４種類． <table> タグ：表全体の範囲を指定． <tr> タグ：表の 1 行分の範囲を指定． <th> タグ：表の見出し 1 セル分を指定． <td> タグ：表のデータ 1 セル分を指定． つまり，行の数だけ，<tr> 〜 </tr> のセットを作り，そのセットの中に列の数だけ <th> 〜 </th> または <td> 〜 </td> セットを作り，全体を <table> 〜 </table> で囲む． <th> を使用すると，文字が自動的に太字になり，セルの中央に揃えられる．また，<td> を使用すると，文字は標準で， セルの左に揃えらる．もちろんこれらはスタイルシートで変更できる． <table> はあくまでも「表」を作るためのものである．従来の HTML などで使われているテクニックでは，ページ のレイアウトに <table> を使うことが多い．しかし，今回の授業では，レイアウトには極力使わない方針で進め ることにする． ただし，ページのレイアウトに <table> を使用することは，ルール違反ではなく，Validation エラーにもならない． 最初に作成した［DataHD ／ nnnnnnn］ フォルダ内に，［table］フォルダを作成． mi で【ファイル↓新規→ XHTML】を選択．【ツール↓文書構造・宣言→基本構造 (XHTML10)】を選択し，ファイ ルを保存するダイアログが表示されるので，［DataHD ／ nnnnnnn ／ table］フォルダを選択し，ファイル名を［table. html］として保存．
XHTML+CSS ページのタイトル部分（<title> タグの部分）を編集．
［書類／大渕担当授業用／プログラミング１／演習用データ／サンプルテキスト／ sample2.txt］を開き，すべてを 選択して，コピーする．
table.html に戻り，<body> と </body> ではさまれた部分に，サンプルテキストをペースト．
保存《⌘ -S》して，Safari で確認《⌘ -R》． table.html にもどり，曜日と日付部分の６行を選択して，【ツール↓テーブル→テーブルに変換［カンマ区切り］】 を選択． → <tr> と <td> が自動的に挿入されて，テーブルの形になる． 最後に，全体をはさむように <table> タグを手動で，先頭行の上と最終行の下に入れる． ， タグは必ず半角英数字で記述する． 保存《⌘ -S》して，Safari で確認《⌘ -R》．
XHTML+CSS ［書類／大渕担当授業用／プログラミング１／演習用データ／サンプルテキスト／ sample3.txt］を開き，「→」の 右側にある文字列を選択して，コピー． table.html にもどり，上図の「→」の左側にある文字列を探して選択し，ペーストして文字列を置き換える． → この作業をあと 10 回繰り返し，カレンダーの中にスケジュールを記述していく． 保存してブラウザで確認．
XHTML+CSS
これにスタイルを設定していく．まず，最初に作成した style.css で記述したデザインをこのページにも適用する． table.html と style.css とをつなぐために，table.html 内にスタイルシートのファイルを指定する．
↓ 「../」については後述するので，とりあえずこのまま記述． 保存してブラウザで確認． <body>，<h1>，<h2> のタグ部分はすでに style.css の中でスタイルが設定されているので，そのデザインが適用 される．このように異なるページで共通のスタイルシートを使用することで，デザインを統一させることが可能と なる． 次に <table> 関連のスタイルを設定する．この部分はこのページ特有のデザインなので（すなわち他のページと 共通したデザインにする必要はないということ），このページ専用のスタイルシートを別に作る． mi で【ファイル↓新規→ CSS】を選択し，【ツール↓セレクタ→テーブル（table）→テーブル［一括指定］】を選択．
XHTML+CSS
td セレクタの部分に，【ツール↓ボーダー（border）→ border（一括指定）→ border（一括指定）】を入力して， 色を「gray」に変更．
→
【ファイル↓保存《⌘ -S》】を選択して，［DataHD ／ nnnnnnn ／ table］フォルダに，ファイル名を［table.css］ として保存．
table.html と table.css とをつなぐために，table.html 内にスタイルシートのファイルを指定する．table.html に切 り替えて，さきほど指定したスタイルシートの設定行をコピー＆ペーストしてもう 1 行追加． ↓ 追加した 2 行目のファイル名を「table.css」に変更． ↓ 「../」を削除すること． 保存してブラウザで確認．カレンダー部分に枠線が表示されていれば OK． 練習４：10 月 1 日セルで「１」と「プロ１」の間に「授業開始」という行を挿入してみよう（もとに戻す）
XHTML+CSS 次に，曜日の部分とその他の部分でデザインをわけるため，タグを書き直す．table.html で，曜日の部分の 1 行を 選択し，【検索↓検索・置換】で，検索文字列と置換文字列にそれぞれ，td，th と入れ，「選択範囲内」にチェッ クされていることを確認して，「選択範囲内を置換」をクリックすると，<td> タグが <th> タグに置き換わる． ↓ table.css で <th> タグ用のスタイルを記述する．td セレクタに記述した枠線（border）の指定を，th セレクタにコピー ＆ペーストする． → 保存してブラウザで確認．曜日部分の文字が太字になり，セルの中央に寄っていれば OK． カレンダー全体を右側に寄せる．table セレクタに左マージン（40px）を指定すればよい． → 保存してブラウザで確認．
XHTML+CSS セルの大きさがバラバラなので，統一する．要素の大きさは，幅（width）と高さ（height）のプロパティで指定できる． まず <th> タグ（曜日部分）の幅を指定する．表の 1 行目の幅さえ指定すれば，残りの行の幅も自動的に設定される． また，<td> タグ（日付部分）の高さも指定する．幅や高さは，【ツール↓幅・高さ→ width ／ height】を使用する． → 保存してブラウザで確認（ウィンドウのサイズを横に広げておく）． ウィンドウサイズを小さくすると，表の大きさが変わり，レイアウトが崩れるので，表の大きさを固定するように する．table セレクタで，表全体の幅（630px ＝ 7 × 90px）を指定する．また，曜日と日付の枠線が離れているので， くっつけて表示させるために，【ツール↓テーブル→ collapse（セルボーダー表示方式）→ collapse】を指定する． → 保存してブラウザで確認．今度はウィンドウサイズを変えても，表のレイアウトは崩れないことを確認． 平日，土曜日，日曜日，祝日の部分でセルの背景色を変えてみる．セルの背景色は，th や td セレクタで，背景色 （background-color）を指定するが，現状ではいずれも th や td タグだけで指定されているので，曜日の区別がで きない．このような場合は，トップページの <div> タグのところで説明したように，id や class を使ってタグを区
XHTML+CSS 別する方法を使う．ここでは，例えば日曜日が複数回現れるので，class を使用する．
table.html で，日曜日（ここでは祝日も）に該当する <th> や <td> タグの部分に，【ツール↓汎用属性→ class（分類名）】
で class を挿入し，class 名に「sun」と入力する．また，土曜日に該当する部分には，同様にして class 名には「sat」 と入力する． → → なお変更箇所が多いので，<table> 〜 </table> 部分を［書類／大渕担当授業用／プログラミング１／演習用デー タ／サンプルテキスト／ sample4.txt］で置き換える． table.html を保存しておく． 次にスタイルを指定する．table.css に戻り，まず，th と td セレクタで背景色（#cccccc）を指定する（最終的に これが平日の部分になる）． → 保存してブラウザで確認． table.html での「class="sun"」という記述は，<th> タグでも <td> タグでも使用されている．そのため，これま での説明だと，CSS では，「th.sun」や「td.sun」と記述しなければならない．しかし，同じスタイルを指定するの に，セレクタを 2 度書くのは面倒である．実は，id や class に関するスタイルを記述する場合には，タグ名を省略 することができる．つまり，「th.sun」や「td.sun」ではなく，「.sun」だけでよいことになる．これで，どのよう なタグを使っていても，「class="sun"」が記述されているタグには同じデザインを適用することができる．
XHTML+CSS
→ →
同様に「class="sat"」に対応するスタイル（背景色は #ccccff）も指定する．
保存してブラウザで確認．
文字サイズと文字の配置を調整する．表の中の文字の大きさを一括して指定するには，table セレクタで font-size を指定する（small）．文字の配置を指定するには，横方向は【ツール↓ テキスト（text）→ text-align（行揃え）】， 縦方向は【ツール↓ テキスト（text）→ vertical-align（縦方向位置揃え）】を使用する．何も指定しない場合には， 横方向が左（left），縦方向が中央（middle）になっているので，セル内の左上に配置したい場合には，td セレクタで， 縦方向を上（top）に指定すればよい． → → 保存してブラウザで確認． top middle center left right bottom
XHTML+CSS span（汎用インライン要素） 次にセル内の文字のデザインを行う．日曜・祝日は日付の色を赤，土曜は青にしたいとする．例えば，10 月 7 日（大学祭の日）のセルで，日付の「7」だけを赤くしたいということである．この場合，タグを見ると，「<td class="sun">7<br /> 大学祭 </td>」となっているが，「7」だけの部分にタグは設定されていない（つまりこのま まではスタイルが指定できない）． <td> タグに「class="sun"」が設定されているので，これが使えそうだが，ここに文字色を指定すると，「大学祭」 という文字も赤くなってしまう． タグがない部分にスタイルを指定する方法として，<div>（汎用ブロック要素）を説明したが，これはブロック要 素を作るので，今回のようにブロック要素（<table> 〜 </table> 部分）内の一部のみにスタイルを適用したい場 合には使うことができない． そこで登場するのが <span> タグである．このタグはブロック要素に含まれる一部分（これを「インライン要素」 という）だけに自由にスタイルを指定したい場合に使用できる．<span> タグは通常，class と一緒に使用される． 実際にタグを記述する．「<td class="sun">7<br /> 大学祭 </td>」の「7」の部分だけを選択して，【ツール↓文書構造・
宣言→ <span>（インライン）】を選択，さらに class 名に「sunday」と記述． → → なお変更箇所が多いので，<table> 〜 </table> 部分を［書類／大渕担当授業用／プログラミング１／演習用デー タ／サンプルテキスト／ sample5.txt］で置き換える． table.html を保存しておく． 次 に ス タ イ ル を 指 定 す る．table.css に 戻 り， セ ル の 背 景 色 の 指 定 の 場 合 と 同 様 に，「class="sunday"」 と 「class="saturday"」に対するスタイルを追加する． 保存してブラウザで確認．
XHTML+CSS
<span> タグを使用するのは，文章中の一部の文字列など，ブロック要素の中の一部分（インライン要素）にスタ イルを指定したいときである．
XHTML+CSS
Web 用の画像
画像データの作成方法は Appendix 7 〜 10 ページを参照．
［書類／大渕担当授業用／プログラミング１／演習用データ／大学ロゴ .psd］を開き，Photoshop の【ファイル↓ Web 用に保存 ...】を選択．
GIF,JPEG,PNG のファイル形式をそれぞれ試してみると，やはり GIF がよさそうなので，GIF 形式で保存．「scu.gif」 というファイル名で［DataHD ／ nnnnnnn］内に保存
この画像を以前作成したトップページ（index.html）に表示させてみる．なお，パスの方法は Appendix を参照． 「桑園キャンパス」の説明文の下に，まず <h2> タグを挿入し，見出しを「大学ロゴ」とする．さらに，【ツール↓
<img> イメージ】として，「src」に「scu.gif」，「alt」と「title」に「SCU ロゴ」と記述．また，「width」と「height」
ここでは指定しないので，削除しておく
→ →
<img> タグは <br> と同じ単独タグなので，<img /> と記述する．<img> タグはインライン要素である．「src」 に画像ファイル名（正式には画像ファイルのパス→パスについては後述），「alt」には代替文字列（画像が表示で きない場合に代わりに表示される文字列），「title」にはポップアップ文字列（画像にマウスを合わせた時に表示さ れる説明用文字列）を記述する．
XHTML+CSS
→
style.css でスタイルも設定しておく．最後の行に，「<div class="logo">」に関するセレクタを記述し，左マージン （40px）を指定する． また，ついでに「div.profile」，「div.lecture」，「div.campus」の部分の「div」を省略できるので，消去する． → 画像に関するスタイルも最終行に追加する．【ツール↓セレクタ→イメージ <img>】でセレクタを記述し，幅 （135px），高さ（135px），背景色（白），パディング（5px），ボーダー（灰色／ 1px ／点線）を設定．なお，幅と 高さは実際の寸法を設定しているが，それ以外の値を設定すると自動的に拡大／縮小される． style.css を保存して，ブラウザで確認． 練習５：img セレクタ内のスタイルを変更してみよう（もとに戻す）
XHTML+CSS 箇条書き 最初に作成した［DataHD ／ nnnnnnn］フォルダ内に，［list］フォルダを作成． mi で【ファイル↓新規→ XHTML】を選択．【ツール↓文書構造・宣言→基本構造 (XHTML10)】を選択し，ファイ ルを保存するダイアログが表示されるので，［DataHD ／ nnnnnnn ／ list］フォルダを選択し，ファイル名を［list. html］として保存． ページのタイトル部分（<title> タグの部分）を編集． ［書類／大渕担当授業用／プログラミング１／演習用データ／サンプルテキスト／ sample6.txt］を開き，すべてを 選択して，コピーする．
list.html に戻り，<body> と </body> ではさまれた部分に，サンプルテキストをペースト．
XHTML+CSS
→
この 10 項目が選択されたままの状態で，【ツール↓箇条書き→ <ul> 箇条書きリスト［<li> なし］】を選択
<ul> タグは，単純な箇条書き（un-ordered list ＝番号順のない箇条書き）を表すタグで，ブロック要素を構成する． <li> は実際の箇条書き項目になる．
同様に，「CD シングル売り上げランキング」の 10 項目を選択して，【ツール↓箇条書き→ <li> 複数行をリスト項 目にする】を選択し，さらにこの 10 項目が選択されたままの状態で，【ツール↓箇条書き→ <ol> 番号付きリスト ［<li> なし］】を選択
→
<ol> タグは，順序付きの箇条書き（ordered list ＝番号順のある箇条書き）を表すタグで，ブロック要素を構成する． 保存《⌘ -S》して，Safari で確認《⌘ -R》．
これにスタイルを設定していく．まず，最初に作成した style.css で記述したデザインをこのページにも適用する． list.html と style.css とをつなぐために，list.html 内にスタイルシートのファイルを指定する．
XHTML+CSS ↓ 「../」については後述するので，とりあえずこのまま記述． 保存してブラウザで確認． <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 行追加．
↓
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
保存してブラウザで確認する．
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 を指定するが，このページでは画像が９つ もあり，指定が面倒になる．このような場合，次のように指定することができる．
XHTML+CSS →
これで gallery.html を保存する．
mi で【ファイル↓新規→ CSS】を選択し，【ツール↓セレクタ→ class セレクタ】，【ツール↓幅・高さ→ width】 などを使用し，幅を 240px，高さを 160px（実際の画像の幅と高さ）に設定．
「.gallery」と「img」は半角スペースで区切って記述し，『class 名に「gallery」をつけた <table> タグのブロック に含まれる，<img> タグ』に対するスタイルを指定できる．このような指定方法を「状況依存セレクタ」という． 例えば，同じページ内に「<div class="aaa"><img src="a.gif" alt=" 画像 A"></div>」と「<div class="bbb"><img src="b.gif" alt=" 画像 B"></div>」というタグがあった時に，「img { border-width : 1px; }」というスタイルを記述 すれば，画像 A も画像 B も枠線が表示されるのに対して，「.aaa img { border-width : 1px; }」と書けば，画像 A の みに枠線が表示されることになる． 【ファイル↓保存《⌘ -S》】を選択して，［DataHD ／ nnnnnnn ／ gallery］フォルダに，ファイル名を［gallery.css］ として保存． gallery.html に戻って，スタイルシートを設定． 保存してブラウザで確認． まだ共通スタイルシートの img セレクタの影響が残っているので，パディング（0px）とボーダー（幅 0px）を設 定する．
XHTML+CSS 次に，表全体（<table> タグ）に左マージン（30px）を設定するので，【ツール↓セレクタ→テーブル <table> → 表全体 <table>】で記述． また，セル（<td> タグ）のパディングを 3px に設定するので，【ツール↓セレクタ→テーブル <table> →データ １セル <td>】で記述． 保存してブラウザで確認． よくみると画像の左右のすき間より上下のすき間が若干広い．これは，XHTML の仕様によるものなので，気にな る場合には，回避策として，table セレクタに行間（line-height）を 0pt に指定しておく． 保存してブラウザで確認．画像間のスペースがそろっていれば OK． これで（ギャラリーページの）index.html は終了．Validation しておくとよい．
XHTML+CSS リンク これまで計４ページ（トップページ，カレンダーページ，ランキングページ，フォトギャラリーページ）作成した． トップページから他の３ページにジャンプできるようにリンク（hyperlink）を設定する． ［DataHD ／ nnnnnnn］フォルダの index.html を開き，「講義内容」の部分の「テーブル練習」部分を選択し，【ツー ル↓ <a> ハイパーリンク】を選択．さらに，カーソル部分に，「table/table.html」と記述． → → これで，ブラウザで「テーブル練習」部分をクリックすると，「href」で指定した「table/table.html」というファイル（す なわち，table フォルダ内の table.html というファイル）にジャンプするように設定されたことになる． 以下同様に，「リスト練習」部分には「list/list.html」へのリンク，「フォトギャラリー練習」部分には「gallery/ index.html」へのリンクを記述する． 保存してブラウザで確認． それぞれのリンクをクリックして，各ページが表示されれば OK．なお，トップページに戻るには，ブラウザの戻 るボタンを使用する． リンクは文字部分だけではなく，画像に対しても設定できる．ここでは，大学ロゴをクリックすると，札幌市立 大学の公式 Web サイトにジャンプするように設定してみる．ロゴ画像を表す <img> タグを選択して，【ツール↓ <a> ハイパーリンク】を選択．さらに，カーソル部分に，「http://www.scu.ac.jp/」と記述．なお，title 部分に余 計な記述が入るので削除する． → 保存してブラウザで確認．なお，画像にリンクを設定する場合，画像にボーダーが設定されていなければ，ブラウ
XHTML+CSS
る場合には，ボーダーを設定しておく（今回のスタイルシートでは設定済み）のがよい．
← Safari ← Firefox
最後にリンク部分のスタイルを記述する．style.css を開き，body セレクタと h1 セレクタの間にカーソルを移動し， 【ツール↓セレクタ→リンク <a> →リンク［一括指定］】を選択．
a:link はリンク部分で未訪問のもの，a:visited はリンク部分で訪問済のもの，a:hover はリンク部分にマウスを合せ たときのもの，a:active はリンク部分でマウスを押しているときのもの，のスタイルを設定できる．このような指 定方法を「疑似クラス」という．
ここでは，a:link の文字色を #cc0000，a:visited の文字色を #999900，a:hover のときに背景色を #ffffcc，a:active の文字色を #ff3333 としておく． 保存してブラウザで確認．この段階では，３ページともすでに訪問済なので，文字色が #999900（茶色）となっている． そこで，Safari の【履歴↓履歴の消去】を行って，再読み込みするとリンクが未訪問状態になる．この状態で，マ ウスをリンク部分に合せたり，プレスしたり，実際にリンクをたどったりしてみて，どのように色が変わるか確認 する． 以上で基本演習は終了．Validation しておくとよい．
Appendix ファイルやフォルダ名の付け方 ○使用できる文字 ・アルファベット：大文字（A 〜 Z）・小文字（a 〜 z）／数字：0 〜 9 ・記号：「.」（ドット／ピリオド），「-」（ハイフン／マイナス），「_ 」（アンダースコア／下線） ※アルファベットの大文字はできるだけ使用しない方がよい． ※日本語，スペース（半角，全角とも）は使用できません． ○対象 ・XHTML（HTML）ファイル：必ず拡張子「.html」をつける（小文字でつける）． ・CSS ファイル：必ず拡張子「.css」をつける（小文字でつける）． ・画像ファイル：ファイル形式に応じて拡張子「.gif」「.jpg」「.png」をつける（小文字でつける）． ・フォルダ：使用できる文字であれば自由につけることができる． ○付け方のコツ ・ページの内容を表すようにする…OK：schedule.html ／ NG：aaa.html ・できるだけ短く…OK：prog.html ／ NG：programming kadai1.html ・できるだけ英語で…OK：design.html ／ NG：dezain.html ○ index.html とは 札幌市立大学のトップページのアドレス（URI）は，http://www.scu.ac.jp/ である． このトップページの HTML ファイルのファイル名は index.html である． 本来ならば札幌市立大学のトップページの URI は，http://www.scu.ac.jp/index.html と記述する必要があるが， 「index.html」に限り省略することができる．
つまり，index.html というファイル名を付けると，URI を短く表記することが可能となり，URI を公開する際に都 合が良い．実際トップページには index.html というファイル名が付けられていることが多く，実際の URI 表記で は省略して短く見せている． ○ URI の表記 通常は，http://www.hogehoge.com/fugafuga/aaa.html と，XHTML ファイル名を最後に記述する（すなわち，〜 .html で終わる）． XHTML ファイル名が index.html の場合には省略できるので，http://www.hogehoge.com/fugafuga/ となる．この 場合，必ず「/」（スラッシュ）で終わることになる．
Appendix ブロック要素とインライン要素 ○ブロック要素とインライン要素 ・XHTML で使用されるタグは，すべてどちらかの要素に分類される（中には両方の性質をもつものもある）． ・XHTML はすべてブロック要素で構成される．ページは「ブロック（block）」に分けて記述される． ・ブロック要素内には，別なブロック要素やインライン要素を含むことができる． ・インライン要素はまさに「インライン（in-line）」すなわち行の中で使用されるタグである． ○各要素のイメージ ページ全体 ブロック要素 インライン要素 ○ブロック要素の例 文書構造の枠組みを指定するもの．
<h1> , <h2> , … , <h6> , <p> , <div> , <hr /> , <ul> , <ol> , <table> などのタグがある． <body>（ページ本文）内に直接記述できるのは，ブロック要素だけである．
○インライン要素の例
文章中の一部の文字列などに指定するもの．
一般のテキスト , <span> , <a> , <img /> , <br /> などのタグがある．
Appendix
○講義内で登場する主なXHTMLタグ一覧（登場順）
ページ タグ 説明 ツールメニュー 教科書
1 <html> ∼ </html> HTML文書の開始と終了 31
1 <head> ∼ </head> 文書情報を記述（TITLEなど） 34
1 <title> ∼ </title> ウィンドウのタイトルバーに表示されるタイトル 39
1 <body> ∼ </body> ブラウザに表示される本文を記述 36
1 <div> ∼ </div> ブロック要素を作るための汎用タグ 文書構造・宣言→<div>ブロックレベル要素 43 1 <div id="○"> ∼ </div> 他のブロック要素と区別．ページ内で1度しか使えない 文書構造・宣言→<div>ブロックレベル要素 43
1 <!-- ∼ --> コメント（注釈） コメント 13
3 <h1> ∼ </h1>，… 見出しを付ける（サイズは1∼6．1が最大，6が最小） 見出し→h1 見出し1，… 46
4 <br /> テキストを強制的に改行させる 本文→<br> 強制改行 50
9 <div class="○"> ∼ </div> 他のブロック要素と区別．ページ内で何ヶ所も使える 文書構造・宣言→<div>ブロックレベル要素 43
20 <table> ∼ </table> 表を作成 テーブル→2行2列 133
20 <tr> ∼ </tr> 表の1列分を定義 テーブル→<tr> 1行 138
20 <td> ∼ </td> 表データの1セル分を定義 テーブル→<td> データ1セル分 141
20 <th> ∼ </th> 表見出しの1セル分を定義 テーブル→<th> 見出し1セル分 141
29 <span> ∼ </span> インライン要素を作るための汎用タグ 文書構造・宣言→<span> インライン要素 45
31 <img src="○" /> 画像を表示．○の部分にファイル名を入れる <img> イメージ 96
33 <li> ∼ </li> 箇条書きの各項目 箇条書き→<li> 126
34 <ul> ∼ </ul> 単純なリスト（箇条書き） 箇条書き→<ul> 箇条書きリスト 122
34 <ol> ∼ </ol> 番号付きリスト 箇条書き→<ol> 番号付きリスト 124
41 <a href="○"> ∼ </a> リンク．○の部分にリンク先のアドレスを入れる <a> ハイパーリンク 114
○講義内で登場するスタイル一覧（登場順） ページ スタイル 説明 ツールメニュー 教科書 5 color 文字色（前景色）を指定する 文字色（color） 344 5 background-color 背景色を指定する 背景色（background-color） 346 12 font-size 文字の大きさを指定する フォント（font）→font-size（文字の大きさ） 361 12 font-weight 文字の太さを指定する フォント（font）→font-weight（文字の太さ） 364 12 line-height 行の高さ（行間）を指定する テキスト（text）→line-height（行間） 375 14 padding パディングに関する指定をまとめて行う パディング（padding）→padding（一括指定） 402 15 padding-left 左パディングを指定する パディング（padding）→left（左パディング） 400 15 margin-left 左マージンを指定する マージン（margin）→left（左マージン） 395 15 border ボーダーに関する指定をまとめて行う ボーダー（border）→border（一括指定） 419 15 margin-bottom 下マージンを指定する マージン（margin）→bottom（下マージン） 395 16 margin-top 上マージンを指定する マージン（margin）→top（上マージン） 395 16 font-family 文字の字体を指定する フォント（font）→font-family 359 16 border-color ボーダーの色を指定する ボーダー（border）→border-color（枠線の色） 406 16 border-style ボーダーのスタイルを指定する ボーダー（border）→border-style（枠線の種類） 414 16 border-width ボーダーの太さを指定する ボーダー（border）→border-width（枠線の太さ） 410 26 width 幅を指定する 幅・高さ→width（領域の幅） 420 26 height 高さを指定する 幅・高さ→height（領域の高さ） 424 26 border-collapse セルのボーダーの表示の仕方を指定する テーブル→border-collapse（セルボーダー表示方式） 460 28 vertical-align 縦方向の揃え位置を指定する テキスト（text）→vertical-align（縦方向位置揃え） 379 36 list-style-type マーカー文字の種類を指定する リストマーカー→type（マーカーの種類） 449 文書構造・宣言→基本構造(XHTML10) 授業テキストに登場する XHTML タグ・CSS スタイル一覧
Appendix Validation ○ Validation とは テキスト２ページで説明しているように，「Validation」とは「確認／検証」などという意味．ここでは，記述した XHTML や CSS が正しいか．検証すること． ○ XHTML の Validation
・mi で XHTML ファイルを開いている時に，【ツール↓ Validation → W3C Markup Validation Service を開く】を 選択する．
・「Validate by File Upload」欄の「ファイルを選択」ボタンをクリックし，検証したいXHTMLファイルを選択したら，
「Check」ボタンをクリック．
・結果が表示される．緑色で「This Page Is Valid XHTML 1.0 Strict!」と表示されれば問題なし．
・XHTML が正しく記述されていない場合には，赤色で「This page is not Valid XHTML 1.0 Strict!」と表示されるので， エラーを修正する．
○ XHTML Valiadation エラーの修正
エラーの内容については，mi で XHTML ファイルを開いている時に，【ツール↓ Validation → Validation エラーに ついて】を選択すると，エラーメッセージの内容と簡単な対処方法が書かれている文書が開くので，参考にする． なお，エラーについて多くの項目が表示されても原因はごく少ない場合が多い．まずは先頭のエラーの解決を目指 すこと．エラー項目には行番号が表示されるので参考にし，その行だけではなく，その行より上の部分に問題があ る場合が多い．問題の原因がわかったらまず 1 ヶ所だけでも修正して，再度 Validation すること． ○ CSS の Validation ・mi で CSS ファイルを開いている時に，【ツール↓ Validation → CSS 検証サービスを開く】を選択する． ・「アップロード」欄の「ファイルを選択」ボタンをクリックし，検証したい CSS ファイルを選択したら，「検証 する」ボタンをクリック． ・結果が表示される．「エラー及び警告は見つかりませんでした。」と表示されれば問題なし． ・CSS が正しく記述されていない場合には，赤色で「エラー」と表示されるので，エラーを修正する．
Appendix ○ CSS Valiadation エラーの修正
エラーの内容については，mi で CSS ファイルを開いている時に，【ツール↓ Validation → Validation エラーについて】
を選択すると，エラーメッセージの内容と簡単な対処方法が書かれている文書が開くので，参考にする．CSS のエ ラーについては，Validation ページで表示された部分に誤りがあることが多いので，行番号などを参考にしてエラー を修正する．なお，CSS Validation では，エラーのほかに警告が表示される場合がある．警告はエラーほど重大で はないが，修正する方が望ましい． ○「正しい」ページを示すアイコン XHTML Valiadation や CSS Validation に問題がない場合，W3C 公式のアイコンによって，作成した XHTML ページ や CSS が（文法的に）正当であることを対外的にアピールすることができる．このアイコンを自分のページ内に 表示させたい場合には，その XHTML ファイルを開き，表示させたい位置（一般的にはページの一番下）で，【ツー ル↓ Validation → XHTML Validator ロゴを挿入／ CSS Validator ロゴを挿入】を選択する．ブラウザで確認すると， 以下のようなアイコンが表示される（これらのイメージには，class="validation" が設定されているので，スタイル シートで適当なデザインを設定する（幅は 88px，高さは 31px とすること）．
Appendix XHTML+CSS によるページ構築がなぜよいのか？ ○ HTML（XHTML）のみでのページ構築 ［書類／大渕担当授業用／プログラミング１／演習用データ／ XHTML+CSS のメリット／ XHTML のみ］フォルダ のファイルで説明する．ここには，page1.html，page2.html，page3.html の 3 つのファイルがある．３ページと もブラウザで確認すると，すべて同じようなページ構成である．
ページ本文先頭の見出し部分のタグ「<h1><font color="red">XHTML に関する用語集 </font></h1>」を見ると， 文字色を赤に設定していることがわかる．この記述が各ページに存在している．つまりページのデザインを，それ ぞれのファイル内で指定していることになる． この見出し部分の色をすべて黒に変更するとしたらどうだろうか．３つのファイルの「red」を「black」に変更す ればよい．が，これが 100 個のファイルがあるとしたら…．手間がかかるのは明らかである． ○外部ファイル CSS を使用するメリット 次に［書類／大渕担当授業用／プログラミング１／演習用データ／ XHTML+CSS のメリット／ XHTML+CSS］フォ ルダのファイルを見る．ここにも page1.html，page2.html，page3.html の 3 つのファイルがあり，ブラウザで見 ると，前述のものとまったく同じ表示になる．XHTML ファイルを見ると，ページ本文先頭の見出し部分のタグは 「<h1>XHTML に関する用語集 </h1>」となっており，この部分ではデザインが指定されていない．そのかわり， スタイルシート（style.css）が指定されていることがわかる． つまりすべてのページのデザインを，１つのスタイルシートだけで指定している．この見出し部分の色をすべて黒 に変更したいと思えば，スタイルシート内のたった 1 ヶ所を変更するだけである．ファイルが 100 個でも 1000 個 でも一瞬で変更可能である． ○もう１つのメリット 従来は HTML でページの論理的構造と視覚的構造をすべて記述していた．そのため，上記のようにデザインの汎 用性が失われていた．また，HTML でダイナミックな表現をするために，ブラウザ独自のタグ（例えば，Netscape Navigator の <blink> タグ／文字の点滅，Internet Explorer の <marquee> タグ／文字のスクロールなど）が登場し， ページの統一性が失われることになった．同様にブラウザ独自の裏技も数多く登場した．
CSS は古くから存在していたが，ブラウザの対応がバラバラで，使い物にならなかった．しかし，XHTML というしっ かりとした規格が制定され，大手のサイトが XHTML+CSS でのページデザインを採用したことで，どんなブラウザ でも同じように見えるページを作る，という機運が高まった．また，多くのブログが XHTML+CSS でのサイト構築 を採用している．
現在ではモダンブラウザと呼ばれる，Firefox [Mac/Win]，Safari [Mac]，Opera [Mac/Win] であれば，ほぼページ表 示は同一になる（フォントを除く／ Safari では一部異なる場合あり）．特別なことをせず，基準通りにページを制 作するだけでよい．しかも XHTML+CSS で制作したページは，検索エンジン（Google，Yahoo など）で上位にラ ンキングされることが知られている．これに対し，従来主流であった，Netscape Navigator や Internet Explorer は レガシーブラウザと呼ばれる．CSS でも多くの裏技があるがその多くは，圧倒的シェアをほこる Internet Explorer 対策のためのものである．なお，Internet Explorer はバージョン 7 になって，ほぼ XHTML+CSS に対応するようになっ た．
Appendix 一般的な Web 画像の作成方法 ○準備（以下，Photoshop で作業する） ・【イメージ↓モード→ RGB カラー】で，画像を RGB モー ドにしておく ・【イメージ↓画像解像度 ...】で，画像を 72 [pixel/inch] にし，幅と高さを適当な値に設定しておく．画像の幅 は 700pixel 程度を目安にするとよい． ○ファイル形式 ・写真のように色数が多い場合は「JジェイペグPEG 形式」 ・ロゴマークのように色数が少ない場合は「Gジ フIF 形式」 ・携帯端末などでは「Pピ ン グNG 形式」も使用されることがある ○保存方法 ・【ファイル↓ Web 用に保存 ...】を選択し，「4 アップ」タブを クリックする ※これで元画像＋ 3 つのケースの比較を同時に表示できる ・右側の「プリセット」ポップアップで，保存形式を選択する． このとき，各画像の画質と，左下に表示されるファイルサイ ズとのバランスに注意し，表示に耐えうる画質でファイルサイズが小さくなる設定を選ぶ． ・微調整はウィンドウの右側部分で設定する． ・JPEG では，「画質」の値を小さくすると画質は落ちるが，ファイルサイズは小さくなる． ・GIF では，「カラー」の値を小さくすると画質は落ちるが，ファイルサイズは小さくなる． ・設定が決まったら，右上の「保存」ボタンをクリックします．
