コンピュータリテラシ＃ 14 – Web と情報アーキテクチャ
久野 靖 (電気通信大学)

2017.5.19

今回の目標

1

今回の目標は次の通りです。

• 相対 URL や外部メディアの参照について学ぶ — ページに画像を使えるようになることで、見栄えのする (見てもらいやすい) サイトが作れます。
• Web サイトの構成および情報アーキテクチャの考え方について学ぶ — 定番なサイト構造を知っておくことで、労力をかけずにわかりやすいサイトが作れます。
• CSS によるページデザインについて学ぶ — CSS を用いてどのページでも統一された見え方のページ群が作れるようになり、また 1 箇所の変更で全部の表示を調整することも可能になります。

2

外部ページ/外部メディアの参照

2.1

絶対 URL と相対 URL exam

これまで、Web ページを表示させたり HTML 中で a タグに記載する URL は次のようなものでした。

http://example.com/aa/bb/mypage.html
スキーム
ホスト パス
このような (http:などの) スキームから始まる URL を絶対 URL と呼びます。すべてのサイトは絶対 URL で指定できますが、次のような場合には絶対 URL は不便です。

• 1 つのサイトが複数のページからできていて、相互にリンクで行き来するような場合。
• ページの HTML に加えて、そこで使用する画像などのファイルを参照している場合。
どのように不便かというと、(1) リンクなどで指定する URL が長くなり記述が繁雑であることと、(2)サイト内のファイルをまとめてよそのサーバに引越したときに、全部リンクを直さなければいけないことです (絶対 URL が書いてあるということは、リンクをたどると元のサーバから読みに行きます
から、引越しの意味がありません)。
そこで Web では相対 URL も使うことができます。たとえば上の URL のファイル mypage.htmlにリンクを書くとき、相対 URL ではその置いてあるディレクトリ http://example.com/aa/bb/が「起点」となります。そして、あとは Unix のパス名と同じようにそこを起点に対象とするファイルを指定します (.. も使えますが、ただしホストやスキームは変更できません)。表 1 に上の例のページを起点としたときの相対 URL とそれを解釈して絶対 URL に直したものの対照を示します。
基本的に Unix のパス名のようなものだと考えていいのですが、(1) まったく「/」がなくても相対URL であること、(2)「/」で始まるものも相対 URL であること (その Web サーバの公開用トップディレクトリからたどる意味になる)、などが違います。
なお、一番下の 2 つのようにパスが「/」で終わる場合はディレクトリを指しますが、そのときに何が表示されるかはサーバの設定次第で、多くのサーバではそこにある index.html というファイルの内容を返すように設定されています。
1

表 1: 「http://example.com/aa/bb/」を起点とする相対 URL の解釈

2.2

相対 URL絶対 URL

page2.html
fig1.png
FIGS/fig1.png../FIGS/fig1.png../../FIGS/fig1.png/aa/FIGS/fig1.png./../

http://example.com/aa/bb/page2.html
http://example.com/aa/bb/fig1.png
http://example.com/aa/bb/FIGS/fig1.png
http://example.com/aa/FIGS/fig1.png
http://example.com/FIGS/fig1.png
http://example.com/aa/FIGS/fig1.png
http://example.com/aa/bb/
http://example.com/aa/

画像の使用 exam

だいぶお待たせしましたが、ここで Web ページにおける画像の使用方法について説明します。なぜここまで待ったかというと、画像は HTML の中に直接は入れられないのでサーバ上に別のファイルとして置く必要があり、その参照はふつう相対 URL によるからです。
さて、まず画像ファイルの形式についてですが、ピクセル画像では PNG、GIF、JPEG のいず
れかの形式、ベクトル画像では SVG 形式のものを使用してください。これらは多くのブラウザで共通にサポートされています (SVG は未サポートなブラウザがまだあります)。

図 1: リンク先として画像を指定した場合

図 2: 埋め込み画像 (img 要素) として画像を指定した場合
次に、Web ページで画像を使うやり方ですが、次の 3 種類があります。

(1) リンク先として — <a href="fig1.jpg">...</a>のようにリンク先として画像を指定した場
合、リンクを選択するとブラウザ画面にその画像が単独で表示されます (図 1)。
2

(2) 埋め込み画像 — <img src="fig1.png" alt="説明"> のようにして、img 要素を使うことで、ページのその場所に画像が埋め込めます (図 2。この要素はインライン要素です)。なお、alt 属
性は画像が表示できない時に表示したり、目に障害がある人が読み上げブラウザを使っているときに読み上げたりするのに使います。
(3) 背景画像 — CSS で「background-image: url(fig1.gif)」などのように指定すると、その指定した要素の「背景模様」として指定した画像が繰り返し敷き詰められて表示されます (図3)。ページ全体の背景にしたければ、セレクタで body や html を指定してください。なお、繰
り返し敷き詰めたくなければ、同じセレクタに対して background-repeat:プロパティとしてno-repeat(繰り返さない)、repeat-x(横方向のみ繰り返す)、repeat-y(縦方向のみ繰り返す)を指定できます。通常は repeat(縦横とも繰り返す) です。

図 3: 画像を背景画像として指定した場合
演習 1 Web ページに画像を入れる演習として、次のものから 1 つ以上やってみなさい (題材の画像ファイルは各自工夫して入手のこと)。

a. 複数の画像をリンク先としたリストを含むページを作ってみる。なお、<a href="..."
target="名前">... のように a タグに target 属性を指定するとどのような効果があるか試して検討してみること。
b. 画像を img 要素を使ってページ内に埋め込んでみなさい。このとき、この要素に対してCSS で枠や空白あけを指定して見やすくしてみなさい。さらに「float: left」「float:right」を指定するとどのような効果があるか試して検討してみること。
c. 画像を適当な要素の background-image として指定して効果を観察しなさい。複数の要素(たとえば body とページの中にある h1 や p など) に別々の背景画像を指定して、見た目だけでなくページ内容の読みやすさのためにはどういう配慮が必要か検討しなさい。画像のつぎ目の柄合わせのために位置を微調整する機能が CSS にあるか探してみるとなおよい。

3情報アーキテクチャ

3.1

情報アーキテクチャとサイト構造 exam

情報アーキテクチャ(information architecture) とは、広義には情報を分かりやすく伝え、受け手が情報を探しやすくするための技術全般を指します。また狭い意味では、Web サイトの構築に先立ち、情報を分類し、意味を整理し、サイト構造やサイトの使われ方を検討する分野を指す場合もあります。
なぜこのような分野が必要になったのでしょうか。もともと WWW はハイパーテキストから生まれており、どのページのどこにでも他のページへのリンクを埋め込めることが特徴でした。これを活かして、多数のページが互いにつながり合った構造がネットワーク構造です (図 4 左)。しかし WWW

3

でこのような構造を作ると、今居る場所が分からず (迷子)、混乱が生じることが分かってきました。
そこで、ページを直線状につなげた線形構造 (図 4 中)、ページを大分類→中分類→小分類のようにテーマに従って堀り下げていく階層構造 (図 4 下) が生み出され使われるようになりました。
ネットワーク構造

線形構造

階層構造

homehomehome

図 4: Web サイトの代表的な構造
線形構造はインタビュー記事のように流れが直線的で分量がさほど多くない場合は分かりやすいのですが、分量が多くなると先の方までたどって行くのが大変です。そのために目次を用意してそこまで飛べるようにするなどの工夫がなされます。
階層構造はファイルシステムのところでも述べたように、大量の情報を整理して納めるには適しています。そのかわり、すべての情報をひととおり見るようなことはやりにくいです。この対策として、情報はすべて一番下の「葉」のところにいれて、そこを線形構造で結ぶなどの工夫もあります。しかしそうすると、中間の分類を下までたどっていくのに手間がかかります。またそもそも、何を規準に階層構造に分類するべきか、ということも自明ではないかも知れません。
このような構造の問題や、個々のページの使いやすさの問題まで含めて、どのようにしたらよいかを考えて実現するのが、情報アーキテクチャの分野であるといえるでしょう。
なおついでですが、図で home と書いてあるのは一連のページの入口となるページです。本来はこのようなページを「ホームページ」と呼ぶはずですが (またはブラウザの home ボタンを押したときに移動するページの意味もある)、日本ではなぜか WWW 自体のことを「ホームページ」と呼ぶ習慣があるので、どのような意味でこの語を使っているのか、そのつど注意が必要です。

3.2

ページナビゲーション exam

ナビゲーション (navigation、航行) とは一般には進路を制御して目的地に向かう作業をいいます
が、Web の場合は「行きたいページに行かせてくれるための機能全般」を指します。
とくに、前節で述べた「線形構造」「階層構造」の場合は、どのページにも同じような形のリンクが必要になります。具体的には、線形構造であれば各ページに「前へ」「次へ」が必要ですし、階層構想では中間のページにはそれぞれの「子供」に行くリンク、そしてトップ以外の全てのページには「上へ」行くリンクが必要です。また、パンくずリスト (crumb list) と呼ばれる、一番上から現在のページまでの経路のリストもあると位置が分かりやすくなります (図 5 の囲んだ部分)。
このような、サイトの設計に応じてどのページでも同じように使えるリンクのことをナビゲーションリンクと呼びます。ナビゲーションリンクは頻繁につかうので、ページ内でナビゲーションリンクのありかがすぐ分かることは使いやすさのために重要です。このため、ナビゲーションリンクを集めた領域である「ナビゲーションバー」を作成し、どのページでも同じ場所 (ページの先頭、末尾など)に配置するという工夫は多くのサイトでなされています。
演習 2 ページ構成に関する次のテーマから 1 つ以上やってみなさい。

a. 線形構造のサイトの例として「浦島太郎」のストーリーをもとにしたサイトを作る。入口
ページのほかに「亀を助ける」「竜宮城に連れていってもらう」「乙姫と楽しくすごす」「乙4

図 5: パンくずリストの例
姫に別れを告げる」「故郷に戻ってみると」の 5 ページを作り線形構造につなぐ。ページ
内容は自由だが「前へ」「次へ」のリンクは必須とする (最初と最後は適宜修正)。浦島太郎を知らない場合はクラスメートに説明してもらうか、別のストーリーに変えてもよい。

b. 階層構造のサイトの例として「食材」のサイトを作る。入口ページのほかに「魚介類」
「魚」
「あじ」
「しゃけ」
「貝」
「あさり」
「しじみ」
「肉」
「牛肉」
「鶏肉」
「野菜」
「キャベツ」「たまねぎ」の 13 以上を作る (個々の食材は別のものにしてもよいし、追加してもよい)。ページ内容は自由だが、すべてのページに「上へ」のリンク、そして分類のページにはその中の各種別へのリンクが必須とする。
c. この課題は a または b をやった後にそれに加えて選ぶこと。a の線形構造をやった場合は、入口ページに「目次」を追加しなさい。b の階層構造をやった場合は、個々の食材のページだけを順番に線形構造でながめて行けるようなリンクを追加するか、またはパンくずリストを追加しなさい。

4CSS と HTML によるページレイアウト

今日の Web ページ制作では CSS を使ってページ内容の配置を行います。また、CSS では (既に学んだように) 背景色、文字色の配色設定も行えます。ここではこれらを実際に (簡単なものですが) やってみましょう。
まず、CSS でレイアウトする場合、各ページの内容はいくつかの「部分」に分けて作成することになります。たとえば次のような部分が考えられます (デザインに応じて、これらのうちから 2〜3 個を用意するのが普通ですが、さらにこれら以外のものを加えることもあるかも知れません)。

• トップバナー — ページの先頭に置き、タイトルやロゴなどを目立つように配置する。
• メイン (本体) — ページの本体つまり主たる内容を入れる。
• フッター — ページの最後に置き、著作権表示やナビゲーションバーなどを入れることが多い。
• 左サイドバー — ページの左端に細長く置き、ナビゲーションバーやその他各ページで共通に使う機能、リンクを置くのに使う。
• 右サイドバー — ページの機能が多くて左サイドバーだけでは縦長になりすぎる (スクロールしないと見えなくなる) 場合に、右にもサイドバーを置くことがある。
分かりやすく無難な方法として、ページを縦/横に区切りながらこれらの要素をはめ込んで行くブロックレイアウトと呼ばれる方法があります (図 6)。これに対し、縦横の配置にこだわらずもっと自由なデザインで配置する方法もありますが、デザインの難易度は高くなります。以下ではブロックレイアウトを前提とします。

5

top

top

bottommainbottommain

rsidebar

main

main

top
sidebarsidebarbottomtop
sidebar

main

main

top
sidebartop

main

sidebarsidebarmain

topbottom

図 6: 標準的なブロックレイアウト
これまで HTML ページはいきなり見出し等から始まっていましたが、レイアウトを行う場合はその各ブロックをそれぞれ何らかの要素で囲む必要があります。
HTML 4(1 つ前のバージョンの HTML) までではそのような目的に使えるものが div しかなかったので、すべて div で囲み、id を指定してそれぞれの id を CSS のセレクタで指定しました。それでは分かりづらいので、 HTML 5 (現在のバージョン) になったときに、目的別に次のような要素が追加されています。

• <section>...</section> — 1 つの本文セクションを表す。
• <article>...</article> — 1 つの本文記事を表す。
• <aside>...</aside> — 本文とは別の内容を表す。
• <nav>...</nav> — ナビゲーション部分を表す。
• <header>...</header>、<footer>...</footer> — ヘッダ、フッタを表す。
ここでは仮に本文を 1 つのセクションだけにすることにして、次のように HTML の部分を構成しました。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>sample</title><style type="text/css">…スタイル指定…
</style></head><body><header>…top ブロック…
</header><section>…main ブロック…
</section><aside>…sidebar ブロック…
</aside>6

</body></html>それぞれのブロックの内側には、既に知っているように、見出し、段落、箇条書き、リンクなどのタグを使って、それぞれの内容を記述していきます。
配置自体は、CSS の機能を使って行います。このとき知っておく必要があるのは次のプロパティ程度です (マージンとパディングの関係は図 7 を見てください)。

• margin: 上 右 下 左 — 要素の「外側の」アキを上/右/ 下/左の順で指定。数値が 2 個の時は「上下」「左右」をそれぞれ指定、 1 個のときは 4 つとも同じ値を指定。
• padding: 上 右 下 左 — 要素の「内側の」アキを指定。指定方法は margin と同様。
• position: absolute — 絶対位置指定を行うことにより、要素を他の要素とは独立して配置できます。
• top: 長さ、left: 長さ — 絶対位置指定の要素については、top と left で位置を指定します。
• width: 長さ、height: 長さ — 絶対位置指定であってもなくても、要素の幅や高さを指定できます。
• background: 色 — 背景色の指定は必要に応じて。
要素Ａのマージン

要素Ａの境界要素Ａのパディング

要素Ａの内容の範囲
マージンは重なり合う要素Ｂの内容の範囲

要素Ｂのマージン

要素Ｂの境界要素Ｂのパディング

図 7: マージンとパディングの関係
なお、長さの指定においては単位として「em(文字 m の幅)」「ex(文字 x の高さ)」など文字サイズを基準にした指定値を使う方がよいでしょう。というのは、「px」(ピクセル数) や「cm」などの指定だとその大きさに固定されてしまうのに対し、文字サイズ指定なら読み手がブラウザのメニューで文字を大きくしたとき対応して長さが大きくなって釣合いが保てるからです。
では、これらを使って図 8 のレイアウトを作ってみましょう。 CSS の指定の部分だけを示します。

body { margin: 0; background: rgb(180,220,220); }header { height: 8ex; padding: 2ex; margin: 0;
background: rgb(200,240,180) }section { padding: 1ex; margin: 0 0 0 15ex; bottom: 100%;
background: rgb(240,255,248) }aside { position: absolute; top: 12ex; width: 15ex;background: rgb(180,220,220) }7

図 8: ブロックレイアウトの例
要点は次の通りです。

• body 要素全体について、外マージンを 0 にし (中に入れた div のみで組み立てるため)、背景色はサイドバーと同じ色にする。
• header については、高さを 8ex、外マージンは 0 とし、内マージンは要素を入れる余白を適宜つけるため 2ex を指定している。これで窓幅一杯、高さ 12ex(8ex に上下 2ex の余白が加わる)のバナーができる。
• section については、サイドバーの幅を 15ex 取るため、外マージンを左側のみ 15ex、残りは 0としている。これも見やすさのため内マージンを 1ex 取っている。
• aside については、絶対位置指定とし、上端をバナーの高さに合わせて 12ex、幅を 15ex としている。背景色は body と同じにしている。
最後に、CSS 部分を含めた HTML 全体を示します。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>sample</title><style type="text/css">
body { margin: 0; background: rgb(180,220,220); }header { height: 8ex; padding: 2ex; margin: 0;
background: rgb(200,240,180) }section { padding: 1ex; margin: 0 0 0 15ex; bottom: 100%;
background: rgb(240,255,248) }aside { position: absolute; top: 12ex; width: 15ex;background: rgb(180,220,220) }</style></head><body><header><h1>A Sample Page</h1>8

</header><section><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>F</p><p>G</p></section><aside><p>a</p><p>b</p><p>c</p></aside></body></html>
ただし、バナー、本体、サイドバーの内容は仮に入れたものであり、本来ならこれらの部分にコンテンツを入れて HTML でマークアップします。なお、HTML 4 までしか対応しないブラウザに備えるなら、先に述べたように、囲むのはすべて id つきの div にして、CSS 側は「#id 名」をセレクタとして使ってください。
演習 3 CSS によるブロックレイアウトの例をそのまま動かしてみなさい。うまく動いたら、各要素の幅や色づかいを変更してみて、自分の好みのデザインにしなさい。サイドバーを右側にしたり、フッタをつけたりしてみてもよいでしょう。

本日の課題 14A
本日の課題は「演習 1」「演習 2」に含まれる小問か「演習 3」(合計で 7 個) の中から 1 つ以上を選択し、結果を LaTeX によって整形したレポートとして報告してください。そして、整形結果を PDFファイルにして、LMS の「レポート＃ 14」の箇所からアップロードしてください。以下の内容がこの順に含まれるようにしてください。

• 題名「コンピュータリテラシレポート＃ 14」、学籍番号と氏名、提出日付を書く。(グループでやったものはグループのメンバー全員の氏名も脚注などで別途書く。 )• 課題の再掲を書く (どんな課題であるかをレポートを読む人が分かる程度に要約する)。
• レポート本体の内容 (やったこととその結果) を書く。
• 考察 (課題をやった結果自分が新たに分かったことや考えたこと) を書く。
• 以下のアンケートに対する回答。
Q1. リンクや画像の使用についてどれくらい知っていましたか。
Q2. CSS によるブロックレイアウトについてはどうでしたか。どのようなページデザインがよいデザインだと思いますか。
Q3. リフレクション (今回の課題で分かったこと) ・感想・要望をどうぞ。
なお、課題はグループでやって構いません。その場合も、(メンバー氏名を明記した上で) レポートは必ず各自で執筆してください。レポート文面が同一 (コピー) と認められた場合は同一であると認めた全員について点数にペナルティを科すことがあります。

9