2008 Information Literacy Seminar.

6月24日｜CSSによるレイアウト

CSS を使って要素をレイアウトする方法を学びます。 CSS が各要素をどのように扱っているかを理解することができれば、ページのレイアウトを自在に設定することができるようになります。

1｜レイアウトの基礎

ボックスモデル

CSS では、すべての要素はボックスと呼ばれる矩形領域を生成するものとして扱われる。個々のボックスは、テキストや画像といった要素の内容が含まれる内容領域（content area）を中心に、その周囲を空白領域（padding）、枠（border）、余白（margin）が順番に取り囲む階層構造になっている。

サンプルの構造

「ハリー・ポッター」を紹介する Web ページの各要素が、どのようなボックスとして表現されているのかを確認してみよう。

box_model.css をダウンロードし、harry_potter.html と同じ場所に保存する。

エディタで harry_potter.html を開き、head 要素内に以下のように追加する。

•••
<head>
    <title>ハリー・ポッターの世界</title>
    <link rel="stylesheet" type="text/css" href="./harry_potter.css"/>
    <link rel="stylesheet" type="text/css" href="./box_model.css"/>
</head>
•••

Web ブラウザで確認してみよう。このスタイルシートでは、上位の要素ほど暗い色で、下位の要素ほど明るい色で表示されるように指定されている。要素間の親子関係に注意して、Web ページの構造を確認すること。

ブロックレベル要素とインラインレベル要素

いくつかの例外はあるものの、文書中で使用される要素は、ブロックレベル要素かインラインレベル要素のいずれかに分類することができる。ブロックレベル要素とインラインレベル要素は次のように分けられる。

ブロックレベル要素: それ自体が文書構造上のひとつの塊として意味を持つ要素のことである。たとえば、見出し（hn）、段落（p）、表（table）、リスト（ol, ul）などがこれに含まれる。つまり、文書の骨格となる要素群のことであり、文書本体をあらわす body 要素の直接の子要素になれるものである。
インラインレベル要素: ブロックレベル要素の一部分に意味づけを行うための要素である。それ自体は文書構造上の意味を持たないため、新しいボックスは生成されず、親要素の内容領域の一部分を占有するにとどまる。たとえば、リンクアンカー（a）や強調（em, strong）などがこれに含まれる。

2｜サイドメニューの作成

ボックスモデルを利用したレイアウトの練習として、Web ページにサイドメニューを追加してみよう。

サイドメニューのある Web ページ

メニューの追加

まずは HTML ファイルを編集してメニューを追加しよう。以下の手順へ移る前に、harry_potter.html をエディタで開き、先ほど head 要素内に追加した box_model.css へのリンクを削除しておく。

見出し（h2 要素）に id 属性で名前をつける。こうすることによって個々の見出しが区別できるようになり、リンク先として指定したり、個別のスタイルを設定したりすることができるようになる。各見出しにつける名前は半角英数字ならば何でもよいが、ひとつの文書中に同じ名前のものが複数あってはならない。
```
•••
<h1>ハリー・ポッターの世界</h1>
<h2 id="intro">はじめに</h2>
<p>
    ハリー・ポッターは、イギリスの児童文学作家 J. K. ローリングによる子ども向けファンタジー小説シリーズです。
    •••
</p>
•••
```

タイトル（h1 要素）のすぐ下あたりに、ul 要素を利用して次のようなメニューを作成する。

•••
<h1>ハリー・ポッターの世界</h1>
<h2>目次</h2>
<ul>
  <li>はじめに</li>
  <li>作品紹介</li>
  <li>作品リスト</li>
  <li>リンク集</li>
</ul>
<h2 id="intro">はじめに</h2>
•••

メニューの各項目（li 要素）から対応する見出し（h2 要素）へ文書内のリンクを設定する。文書間のリンクと同じように a 要素を使い、href 属性の値を " #id " とすればよい。以下の例では、intro という id が設定された要素への文書内リンクを設定している。
```
•••
<ul>
    <li><a href="#intro">はじめに</a></li>
    •••
</ul>
•••
```
ファイルを上書き保存し、ブラウザで開いて、メニューとして機能することを確認しよう。

レイアウトの準備

レイアウト作業がしやすいように、要素のグループ化や一時的なスタイルの追加をしておこう。

メニューと本文をそれぞれグループ化しておく。 harry_potter.html をエディタで開き、以下のように div 要素を追加しよう。 div 要素は汎用のブロックレベル要素で、複数の要素をグループ化したい場合や、HTML に定義されていない構造を表現したい場合などに用いる。あとでスタイルシートから参照できるように、class 属性に menu、contents という値を指定しておくこと。

•••
<h1>ハリー・ポッターの世界</h1>
<div class="menu">
    <h2>目次</h2>
    <ul>
        <li><a href="#intro">はじめに</a></li>
        •••
    </ul>
</div>
•••

•••
<div class="contents">
    <h2 id="intro">はじめに</h2>
    <p>
        ハリー・ポッターは、イギリスの児童文学作家 J. K. ローリングによる子ども向けファンタジー小説シリーズです。
        •••
    </p>
    •••
</div>
<hr/>
<address>SENSHU Tar&ocirc; &lt;ne17XXXX＠isc.senshu-u.ac.jp&gt;</address>
•••

作業結果がわかりやすいようにメニューや本文に一時的に枠と背景色をつけておく。エディタで新規ファイルを開き、以下のスタイル定義を記述しよう。ファイルは side_menu.css という名前をつけて保存する。保存する場所は harry_potter.html と同じ場所にすること。
```
body > * {
    color: inherit;
    background-color: #eeeeff;
    border: dotted thin blue;
}
```

harry_potter.html をエディタで開き、side_menu.css を読み込むための link タグを追加しておく。

•••
<head>
    <title>ハリー・ポッターの世界</title>
    <link rel="stylesheet" type="text/css" href="./harry_potter.css"/>
    <link rel="stylesheet" type="text/css" href="./side_menu.css"/>
</head>
•••

Web ブラウザで結果を確認してみよう。 body 要素の子要素が薄い青で表示され、さらに青い細枠線が点線でついただろうか。このように、border プロパティを使うと、ボックスの枠のスタイル、太さ、色を設定することができる。

メニューを左側へ配置する

メニューを左側へ配置して、サイドメニューとして利用できるようにしよう。

メニューのサイズを変更する。 class 属性が "menu" となっている div 要素（div.menu）に対して、横幅（width プロパティ）を 200 ピクセルと指定する。 side_menu.css に以下のスタイル定義を追加しよう。
```
div.menu {
  width:  200px;
}
```
文書の左側にメニューを配置するためのスペースを空ける。 body 要素の padding プロパティを利用して、本文の左側に 200 ピクセル分のスペースを確保しよう。 padding プロパティは、ボックスの内容領域から枠（border）までの空白領域の幅を設定するプロパティである。
```
body {
    padding-left: 200px;
}
```
空いたスペースにメニューを配置する。ボックスの配置を変更するには、position プロパティと top、right、bottom、left プロパティを組み合わせて使う。 position プロパティで絶対配置を指定し、親要素のボックス内でどこに配置されるかを top、right、bottom、left プロパティで指定する。ここでは、左上隅に配置されるように top と left に 0 を指定している。
```
div.menu {
  position: absolute;
  top:      0;
  right:    auto;
  bottom:   auto;
  left:     0;
}
```

サイドメニューの微調整

ここまでの作業でメニューを左側に配置することができた。よりサイドメニューらしく見えるように、少しだけ見栄えを整えておこう。

先ほどと同じように、メニューの子要素に枠と背景色をつけて作業結果がわかりやすくしておく。 side_menu.css の先頭に次のようなスタイル定義を追加しよう。ここでは、div.menu の子要素に赤色、子孫要素である li 要素に緑色の枠と背景色を指定している。
```
div.menu > * {
    color: black;
    background-color: #ffeeee;
    border: dotted thin red;
}

div.menu li {
    color: black;
    background-color: #eeffee;
    border: dotted thin green;
}
```
サイドメニューの「目次」という見出し（h2 要素）を非表示にする。 display プロパティを用いて以下のように指定しよう。 display プロパティは、要素のボックスの種類を指定するプロパティである。その要素のボックスを表示するかどうか、表示するならばどのように表示するのかを制御する。
```
div.menu h2 {
    display: none;
}
```
サイドメニューの ul 要素が、周囲の余白なしで親ボックスいっぱいに表示されるように以下のスタイルを指定する。 margin プロパティは、ボックスの枠（border）の外側にある余白の幅を設定するプロパティである。以下の例では、上下左右をまとめてマージンなし（=0）に指定している。
```
div.menu ul {
    margin: 0;
}
```
リストの項目（li 要素）同士の間にもスペースを空けておこう。ここでもやはり margin プロパティが利用できる。以下のように記述すれば、上下に 1em のマージンを空け、左右のマージンは Web ブラウザに自動設定させていることになる。
```
div.menu li {
    margin: 1em auto;
}
```

3｜スタイルシートの使い分け

メディアタイプ

スタイルシートで指定できるスタイルは、コンピュータの画面で表示させるためのものばかりではない。スクリーン出力だけではなく、印刷出力、音声出力、点字出力など、複数の出力メディアに対するスタイルを個別に指定することができる。

印刷用スタイルの追加

「ハリー・ポッター」を紹介する Web ページに印刷用スタイルを追加してみよう。

印刷用スタイルファイル print.css をダウンロードし、harry_potter.html と同じ場所に保存する。
ヘッダ部分に以下のように追記する。 harry_potter.css と side_menu.css をコンピュータのスクリーン用スタイルに指定し、print.css を印刷および印刷プレビュー用スタイルとして指定している。どの出力メディアに対するスタイルなのかは、style 要素や link 要素の media 属性で指定することができる。
```
•••
<head>
    <title>ハリー・ポッターの世界</title>
    <link rel="stylesheet" type="text/css" href="./harry_potter.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="./side_menu.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="./print.css" media="print"/>
</head>
•••
```
Web ブラウザで確認してみよう。そのままでは変化はないが、印刷プレビューを表示してみると違いがわかるはずである。 Internet Explorer では［ファイル］→［印刷プレビュー］で印刷プレビューを確認することができる。

代替スタイルシート

Web 制作者は、複数のスタイルシートを用意して、ユーザーに好みのスタイルを選択させることができる。この仕組みを代替スタイルシートと呼び、W3C の仕様に準拠した Web ブラウザには標準で搭載されている機能となっている。

スタイルシートの切り替え

Internet Explorer 7 には代替スタイルシート機能が実装されていないため、ここでは JavaScript を用いて擬似的にスタイルシート切り替えの例を示すこととする。なお、この部分はクラスの進行度によっては飛ばしてしまっても構わない。

スタイルシート切り替えスクリプト altstyle.js をダウンロードする。保存する場所は harry_potter.html と同じ場所にすること。
harry_potter.html をエディタで開き、head タグ内にある link タグと style タグをすべて削除する。
```
•••
<head>
    <title>ハリー・ポッターの世界</title>
</head>
•••
```
かわりに以下のようにスクリプトを読み込むための script タグを追加する。開始タグと終了タグのあいだには何も書かなくてよい。
```
•••
<head>
    <title>ハリー・ポッターの世界</title>
    <script type="text/javascript" src="./altstyle.js"></script>
</head>
•••
```
ページを再読込してみよう。 Internet Explorer の［表示］メニューから［最新の情報に更新］を選択する。セキュリティの警告が表示された場合は、画面上部の警告メッセージをクリックし、［ブロックされているコンテンツを許可］を選択する。
画面上部にスタイル選択用のフォームが表示される。
- スタイルシート切り替えスクリプトの適用結果

スタイルシートの種類

スタイルシートには以下の 3 種類がある。

固定スタイルシート

文字通り固定的に読み込ませるスタイルシート。 rel 属性の値が "stylesheet" で title 属性をつけなかったものは、どの代替スタイルを選んだ場合にも必ず適用される。すべてのスタイルで適用したい共通の設定を記述しておく。

<link rel="stylesheet" type="text/css" href="persistent.css"/>

優先スタイルシート

固定スタイルシートと一緒に適用されるスタイルシートのうち、優先的に読み込まれるもの。 標準ではこのスタイルシートが適用される。 rel 属性の値を "stylesheet" とし、title 属性でスタイルの名前を指定する。この title 属性の値でグループ化して、相互に切り替えることができる。

<link rel="stylesheet" type="text/css" href="preferred.css" title="優先スタイル"/>

代替スタイルシート

固定スタイルシートと一緒に適用されるスタイルシートのうち、標準では読み込まれないもの。 閲覧者が選択してはじめて適用させることができる。 rel 属性の値を "alternate stylesheet" とし、 title 属性でスタイルの名前を指定する。優先スタイルシートと同じように、title 属性の値でグループ化することができる。

<link rel="alternate stylesheet" type="text/css" href="alternate.css" title="代替スタイル"/>

ユーザースタイルシート

Web 閲覧者は、好みのスタイルを記述したスタイルシートを用意して、閲覧するすべての Web ページに適用させることができる。この仕組みをユーザースタイルシートと呼ぶ。以下、Internet Explorer 7 でユーザースタイルシートを利用する方法について説明する。なお、この部分はクラスの進行度によっては飛ばしてしまっても構わない。

好みのスタイルを記述した CSS ファイルを１つ用意する。 Internet Explorer 7 の場合、CSS ファイルの名前は自分で決めてよい。ここでは、user.css という名前の CSS ファイルが手元にあるものとする。
メニューから［ツール］→［インターネットオプション］を選ぶ。［全般］タブの［ユーザー補助］ボタンをクリックすると、ユーザー補助ダイアログが表示される。［自分のスタイルシートでドキュメントの書式を設定する］にチェックを入れ、［スタイルシート］の欄に任意の CSS ファイルを指定する。
いろいろなページを閲覧してみよう。 Web 制作者の用意したスタイルよりもユーザースタイルシートで指定したスタイルのほうが優先されるのがわかるであろう。

4｜本日のまとめ

演習のまとめ

ボックスモデルについて理解する。
スタイルシートによるレイアウトの方法を理解する。
複数のスタイルシートを使い分ける利点について理解する。

本日のミニレポート

スタイルシートを複数用意し、ユーザーに選択させることにはどのような意味があるのでしょうか？　とくにアクセシビリティの観点から考えてみてください。

本日の課題

課題で作成した Web ページにレイアウトを設定してください。
〆切は次回（7/1）の授業開始時までとします。
データの提出は求めませんが、演習中に完成しているかをチェックします。
課題は前期末に個人で制作した Web に掲載してもらうため、完成したファイルは保管しておいてください。

▲TOPへ　 □ HOME