untitled

MoogaOne

目次 <1. はじめに> 1. MoogaOne とは... 1 2. MoogaOne に含まれるファイル... 1 3. バックアップ ... 1 4. 漢字コードと拡張子の設定... 1 5. 免責事項 ... 2 6. 著作権 ... 2 <2. 基本ページの編集> 1. 必要ファイルをダウンロードする... 2 2. バナー画像を用意する... 2 3. Template.htm（ひな型）を編集する ... 2 4. トップページ（index.htm）を編集する... 4 [トップページのレイアウト] ... 4 5. トップページのメニュー名を決める... 4 6. トップページのメニューを作成する... 6 7. トップページのサブメニューを作成する... 6 8. サブメニューに対応したフォルダを作成する... 6 [Template.htm、Template-e.htm の内容の再確認]... 7 <3. 新規ページの作成> 1. 新規ページ作成の準備... 7 2. Template.htm を別名で保存する... 7 [2 階層またはそれより下にページを作る場合] ... 8 3. ページにタイトルをつける... 8 [新規ページのレイアウト] ... 9 4. 新規ページの内容を作成する... 9 [使わないタグ]... 10 <4.リンクの設定> 1. トップページからのリンクを設定する... 10 [相対リンクと絶対リンク] ... 10 [サイト機能について]... 11 <5. css によるデザイン> 1. Template.css とローカル css ... 11 2. ローカル css を作成する... 12 3. HTML からローカル css を参照させる ... 12 [css 参照自動訂正機能] ... 12 4. MoogaOne に利用される代表的スタイルたち ... 13 <6. 付録> 1. ワードの置換機能の活用... 15 2. change_text の活用 ... 16 3. MoogaOne に使われている色... 16 4. ID と CLASS ... 17 5. 視覚・色覚障害者への配慮... 17 6. ウェブページユーザビリティ雑考... 18 7. 参考文献 ... 20 MoogaOne マニュアル改訂履歴... 23

<1. はじめに> このマニュアルは MoogaOne を使ってウェブページを作成するためのものです。MoogaOne は 国際基督教大学図書館 松山龍彦によって作成・提供されています。MoogaOne は以下の URL か らダウンロードできます。 MoogaOne ウェブサイト http://mook.mook.to/MoogaOne/index.htm 1. MoogaOne とは MoogaOne は css を使ったウェブサイトのデザインテンプレート（ひながた）です。HTML と css の基礎知識さえあれば、MoogaOne を使うことですぐれたユーザビリティを持つウェ ブサイトを作ることができます。MoogaOne を使ってウェブサイトを作成するには HTML と css の基礎知識が必要です。別添の『HTML と css』をお読みください。また、MoogaOne ウ ェ ブ ペ ー ジ の 『 css と は ？ 』 を ご 覧 く だ さ い 。 巻 末 に 参 考 文 献 も 添 付 し ま し た 。 MoogaOne の使用例は MoogaOne ウェブサイト『MoogaOne 使用ウェブサイト』をご覧くだ さい。 2. MoogaOne に含まれるファイル MoogaOne ウェブページ『ダウンロード』に含まれるファイルとフォルダは以下の通りです。 3. バックアップ 既存のウェブページに MoogaOne を適用する場合は、事前に必ずバックアップをとってく ださい。 4. 漢字コードと拡張子の設定

MoogaOne は言語コード（漢字コード）の設定を UNICODE (UTF-8)に統一する事を前提と しています。UNICODE は世界の各言語表記に対応しているので、例えば外国から（日本語 環境のインストールされていない PC で）アクセスした場合にも日本語文字が正しく表示さ れます。複数のスタッフが作成・編集に携わる可能性がある場合は、全員がウェブページ 作成ソフトで下記の設定をすることをお薦めします。誤って他のコードで開いたり保存し たりした場合、オリジナルのテキストが取り戻せなくなる（文字化けが直せなくなる）可 ReadMeFirst.txt：ごあいさつ文です。 MoogaOneManual.doc：このマニュアルです。 HTMLAndCSS.doc：HTML と css についての基本を説明した文書です。 index.htm：トップページのひな型（日本語版）です。 index-e.htm：トップページのひな型（英語版）です。 index.css：トップページ専用の css スタイルのファイルです。 Template.htm：トップページ以外のページのひな型ページ（日本語版）です。 Template-e.htm：トップページ以外のページのひな型ページ（英語版）です。 Template.css：サイト内全ページに共通する css スタイルのファイルです。 TwoColumns.htm：2 段組ページのひな型（日本語版）です。 TwoColumns-e.htm：2 段組ページのひな型（英語版）です。 TwoColumns.css：2 段組ページの css スタイルのファイルです。 MoogaOneLibrary.png：バナーのサンプル画像（png 版）です。 MoogaOneLibrary.gif：バナーのサンプル画像（gif 版）です。 Triangle.png：箇条書きの三角形の記号の画像（png 版）です。 Triangle.gif：箇条書きの三角形の記号の画像（gif 版）です。 spacer.gif：レイアウトほかに使う空白画像です。

能性があります。また、MoogaOne では、HTML ファイルの拡張子に html ではなく htm を 使うことを前提としています。 5. 免責事項 MoogaOne のダウンロード・利用により生じた損害・経費・損失または責務について、国際 基督教大学、国際基督教大学図書館、および松山龍彦はいかなる責任も負いかねますので ご了承ください。MoogaOne に含まれる情報・資料の正確さは保証されていません。ご了承 ください。 6. 著作権 MoogaOne に関する著作権は松山龍彦に帰属します。MoogaOne の使用にあたって、使用許 諾は不要です。ダウンロード、カスタマイズは自由です。ただ、MoogaOne を使用したウェ ブページを公開または実際運用する場合は、松山までご一報願います。今後 MoogaOne の 変更が加えられた場合にメールをお送りさせていただくためです。また、MoogaOne ウェブ ページからリンクを張らせていただくようお願いします。また、トップページの Design Concept by MoogaOne の表記は削除しないでください。 <2. 基本ページの編集> 1. 必要ファイルをダウンロードする お使いの PC の任意の場所に新しいフォルダを作ります。その中に MoogaOne ウェブサイト の『ダウンロード』に含まれる各ファイルを [右クリック]→[対象をファイルに保存] で、 一つずつ、全て保存（ダウンロード）してください。これ以降、画像以外の基本的編集は 全て NotePad、WordPad などのテキストエディタで可能です。もちろん、HomepageBuilder や DreamWeaver などのウェブページ作成ソフトがあれば、より便利です。 2. バナー画像を用意する すべてのページの左上に表示されるバナーの画像を Illustrator や FireWorks などのグラフィ ックソフトを使って作成し、.jpg または .gif または .png フォーマットで保存します。サイ ズは 60×300（高さ×幅）ピクセル程度にしましょう。あまり大きいと他の情報の表示を 邪魔します。Illustrator, FireWorks などをお持ちの場合、あらかじめ MoogaOne に入ってい る MoogaOneLibrary.png を編集して保存すれば、簡単に作れます。保存場所はトップペー ジ（index.htm）と同じ階層にしてください。 3. Template.htm（ひな型）を編集する トップページ以外のページのひな型にあたる Template.htm の内容をご自分のサイト用に変 更します。Template.htm を開いたら、ソースを表示して以下の点を変更・保存してくださ い。他に気がついたことがあっても、それ以外は、この時点では変更しないでください。 (a) <META NAME="Author" CONTENT="アルファベットで作成者の名前"> の中の、「ア ルファベットで作成者の名前」の部分をご自分の名前にしてください。

（例）<META NAME="Author" CONTENT="Taro YAMADA "> HTML ファイルの拡張子：htm

出力漢字コード：UTF-8 入力漢字コード：自動判別

(b) <TITLE>ここにタイトル ご自分のサイト名</TITLE> の中の「ご自分のサイト名」を 変更します。「ここにタイトル」の部分はそのままにしておいてください。

(c) <IMG CLASS="TopBanner" SRC="../ご自分で用意したバナー画像の名前"> の中の「ご自 分で用意したバナー画像の名前」を変更します。名前の前の ../ は残しておいてください。 名前は .gif、.png、.jpg などの拡張子まで入力してください。

(d) <A HREF="組織のトップページの URL">組織トップ</A><SPAN>|</SPAN> の中の、 「組織トップ」をご自分の組織のトップページの名前に変更します。また、「組織のトッ プページの URL」を組織のトップページの URL に変更します。

(e) <A HREF="組織のサブトップページの URL">組織サブトップ</A><SPAN>|</SPAN> の 行は、組織のトップページと自館のトップページの間のサブトップへのリンクがあれば便 利と思われる場合は(d)にならって、変更してください。なければ、この行は削除してくだ さい。 (f) <A HREF="../SiteMap/index.htm">サイトマップ</A><SPAN>|</SPAN> <A HREF="../Contact/index.htm">ご意見・お問い合せ</A><SPAN>|</SPAN>は、サイトマッ プやお問い合わせのページを作る予定がないのであれば、これらの行は削除してください。 (g) <A HREF="../index-e.htm">English</A>の行は、英語版のトップページへのリンクです。 英語版トップページを作る予定がない場合は、この行は削除して下さい。

(h) <DIV CLASS="Bottom"> <P>あなたのサイト名 〒郵便-番号 住所 TEL: 電話番号

FAX: FAX 番号 email: <A HREF="mailto:e メールのアドレス">e メールのアドレス</A></P> <ADDRESS>Copyright (C) ア ル フ ァ ベ ッ ト で あ な た の サ イ ト 名 . All rights reserved.</ADDRESS></DIV> の中の該当する部分をあなたのサイトの該当情報で埋めてい ってください。 英語版ウェブページを作る予定があれば、ファイル Template-e.htm も同様に変更・保存し ます。すべてアルファベットを使用してください。 （例）<TITLE>ここにタイトル 無我壱図書館</TITLE> （例）<A HREF="http://www.donzoko.ac.jp/">無我大学トップ</A><SPAN>|</SPAN> （例） <DIV CLASS="Bottom"> <P>無我壱図書館 〒123-4567 東京都府中市多磨町 4-26-1-17-6 TEL: 0422-00-0000 FAX: 0422-00-0001

email: <A HREF="mailto: [email protected]">[email protected]</A></P> <ADDRESS>Copyright (C) MoogaOne Library. All rights reserved.</ADDRESS>

</DIV>

4. トップページ（index.htm）を編集する 次に、トップページ（index.htm）のソースをご自分のサイト用に変更・保存します。変更 点は 2.-2.「Template.htm（ひな型）の編集」の(a)∼(h)と同じです。英語版トップページを 作る予定の方は、英語版トップページ（index-e.htm）も同様に変更・保存します。 5. トップページのメニュー名を決める まず、トップページの各メニューの名前を考えます。鶴見大学図書館の長谷川豊祐氏ほか に よ る 「 大 学 図 書 館 ト ッ プ ペ ー ジ の ガ イ ド ラ イ ン 」 http://www.slis.keio.ac.jp/~ueda/univlibguide/toppageguideline.html は大変合理的なメニューの トップページのレイアウト MoogaOne のトップページは、トップページとしてもっとも標準的な三段カラムレイアウ トを採用しています。トップページの HTML ソースをご覧ください。バナーセクション （<DIV CLASS="Banner">∼</DIV>）とボトムセクション（<DIV CLASS="Bottom">∼ </DIV>）の間にカラムセクションが挟まれています。カラムセクションは左カラム（<DIV CLASS="Alpha">∼</DIV>）、中央カラム（<DIV CLASS="Beta">∼</DIV>）、右カラム （<DIV CLASS="Gamma">∼</DIV>）の 3 つから成ります。各カラムの中にブロックセク ション（<DIV CLASS="Block">∼</DIV>）が必要に応じた数だけ入ります。 以下はブロックセクションの HTML ソースです。<H2>∼</H2>にはメニューの名が入りま す。<LI>にはサブメニュー名が入ります。（</LI>は省略可能なので記述していません） <DIV CLASS="Block"> <H2>メニュー名</H2> <UL CLASS="Menu"> <LI>サブメニュー名 1 <LI>サブメニュー名 2 <LI>サブメニュー名 3 </UL> </DIV>

構成を提示しており、参考になります。ご自分のサイトの業務やサービス内容に合わせて ベストと思われるメニュー構成を考えてください。一度メニュー構成を決定してサイトを 作り始めると、後から変更する時に大変な労力を要します。ユーザにとっての使いやすさ と、理論的枠組みの両面から熟考して、決定してください。参考までに国際基督教大学図 書館トップページ http://www-lib.icu.ac.jp/ のメニューは以下のとおりです。「最新情報」 「コラム」「資料の検索」「リンク集」「図書館オリジナル情報」「図書館を使いこな す」「総合案内」「サービス一覧」「館内施設・機器」メニューの名前は、以下の点に注 意してよく考えて決定してください。 (a) 短いほうが良い (b) 内容が分かる表現が良い (c) 日本語が良い (d) 造語は避ける (e) 専門用語・組織内用語は避ける (f) 他のメニューと明らかに異なる名前にする (g) 表現に統一性があったほうが良い (h)「∼について」という表現はできるだけやめましょう 6. トップページのメニューを作成する （例）× 図書および一部の雑誌のカウンタでの貸出手続 → ○ 本の貸出 （例）× 重要なお知らせ → ○ リコール情報 （例）× サーチ → ○ 検索 （例）× アンファンマン → ○ お子様向けサービス （例）× ジェネエドのレジについて → ○ 一般教育科目の登録 （例） ×「企業情報」「ニュースリリース」「おしらせ」 ○「経営情報」「報道発表」「お知らせ」 （例） × コンピュータのログインとプリントアウト グループ学習室の予約について 博士論 文の検索と閲覧 ○ パソコンの利用 グループ学習室の利用 博士論文の利用 （例） × オンライン見積もりについて カタログ請求について ○ オンライン見積もり カタログ請求

メニューの構成と名前が確定したら、実際にメニューを作っていきます。メニューのタイ トル部分（<H2>∼</H2>）にメニューの名前を入れていきます。（「最新情報」のタイト ル部分だけは<H2>∼</H2>ではなく<H1>∼</H1>タグになっています） 7. トップページのサブメニューを作成する メニューの構成を決定したら、メニューの中に入る各項目（サブメニュー）の名前につい ても、2.-5.「トップページのメニューの作成」の(a)∼(h)にしたがって、注意深く決定して ください。サブメニューの名前が確定したら、実際に作っていきます。トップページのソ ース中、以下のようなリスト部分の中の<LI>タグに続く部分にサブメニュー名を入れてい きます。 トップページのメニューおよびサブメニューの作成が終わったら、上記 4. から 6. をトップ ページ英語用（index.-e.htm）に対しても行ってください。 8. サブメニューに対応したフォルダを作成する サブメニューに対し、対応する新規フォルダをトップページと同じ階層に作成します。サ ブメニュー1 つに対しフォルダを 1 つ作成することが基本ですが、後で編集しやすいように 構成してくださって結構です。フォルダの名前はアルファベットでなるべく内容が推測し やすいようなものにしてください。 （例） <DIV CLASS="Block"> <H2>総合案内</H2> <UL CLASS="Menu"> <LI>サブメニュー名 1 <LI>サブメニュー名 2 <LI>サブメニュー名 3 </UL> </DIV> （例） <DIV CLASS="Block"> <H2>総合案内</H2> <UL CLASS="Menu"> <LI>館内マップ・交通案内 <LI>カレンダ・開館サービス時間 <LI>本の貸出 </UL> </DIV> （例） サブメニュー名 フォルダ名 館内マップ・交通案内 → Map カレンダ・開館サービス時間 → Calendar 本の貸出 → CheckOut

<3. 新規ページの作成> 1. 新規ページ作成の準備 Template.htm（英語版は Template-e.htm）はトップページ以外の全ての新規作成ページのひ な型になります。ひな型に変更を加えたものを間違って同じ名前で上書き保存してしまう と、ひな型として使えなくなりますのであらかじめパソコン内の別の場所にバックアップ を取っておく事をお薦めします。 2. Template.htm を別名で保存する Template.htm を開いて、最初に「別名で保存」をします。今から作ろうとしている該当す るサブメニューのフォルダを選択し、名前を index.htm（英語版は index-e.htm）にして保存 します。保存したら、作成ソフトでプレビューしてみてください。左上のバナー画像がち ゃんと見えていれば、正しい階層に置かれた事になります。 Template.htm、Template-e.htm の内容の再確認 いよいよ新規ページを作成していきますが、その前に、もう一度 Template.htm と Template-e.htm の内容を確認します。 Template.htm から作成した全てのページのデザインは、後から Template.css ファイルの内容 を書きかえることで、一度に変更できます。しかし、HTML で書かれた部分、例えばペー ジ右上のトップリンクや住所・連絡先フッターを、後から訂正するには、やはり一つ一つ の HTML を書きかえる必要があります。したがって、大量生産で言うところの金型にあた るこのページの内容が、本当にこれでよいのか、ミススペル・誤字脱字はないか・リンク 先に間違いがないかをよく確認してから各ページを作り始めましょう。

2 階層またはそれより下にページを作る場合

Template.htm から作られた index.htm はトップページである index.htm の 1 階層下に置かれ る事を想定して作られています。したがてって 2 階層またはそれより下に置く場合は下記 の部分を訂正する必要があります。

(a) バナー画像への参照

<IMG CLASS="TopBanner" SRC="../MoogaOneLibrary.gif"> の中の../MoogaOneLibrary.gif の前 に階層に従って ../ を追加する。

(b) パンくずリンク

<A HREF="../index.htm">図書館トップ</A> &gt; の中の ../index.htm の前に階層にしたがっ て ../ を追加する。 2 階層またはそれより下の場合はこの「パンくずリンク」にさらに変更が必要です。 2 階層上のトップページだけではなく、1 階層上のページにもリンクを作らねばなりませ ん。例えばトップページの「カレンダ・開館サービス時間」のメニューの中の「図書館カ レンダテキスト版」のページのパンくずリンクは以下のようになります。 (c) トップリンク 同様にトップリンクの部分も下記のように訂正してください。 3. ページにタイトルをつける 新規ページを該当するフォルダに保存したら、このページにタイトルをつけます。タイト ルはブラウザで見るときにはあまり意識されない部分ですが、大変重要な役割を果たしま す。タイトルはできるだけメニューの名前に合わせてください。下記の「ここにタイト ル」の部分を書きかえます。 <TITLE>ここにタイトル 無我壱図書館</TITLE> （例）トップから 2 階層下の場合 SRC="../../ DonzokoUnivLibrary.gif" （例）トップから 2 階層下の場合 HREF="../../index.htm" <DIV CLASS="BreadCrumb">

<A HREF="../../index.htm">図書館トップ</A> &gt;

<A HREF="../index.htm">カレンダ・開館サービス時間</A> &gt; このページ </DIV> <A HREF="../../SiteMap/index.htm">サイトマップ</A><SPAN>|</SPAN> <A HREF="../../index-e.htm">English</A><SPAN>|</SPAN> <A HREF="../../Contact/index.htm">ご意見・お問い合せ</A> （例） <TITLE>カレンダ・開館サービス時間 無我壱図書館</TITLE>

4. 新規ページの内容を作成する (a) Lead ボックスの編集 Lead ボックスの<H1>ここにタイトル</H1>部分には、3.-3.「ページにタイトルをつける」 で書いたページのタイトルを入れます。<P>ここに本文</P>部分には、そのページの概要を 記述します。 (b) Block ボックスの編集 Block ボックスの名前、使い方、内容については作成者のセンスにゆだねられます。ご自分 のこだわりは捨てて、ユーザビリティ最優先でデザインしてください。 （例） <DIV CLASS="Lead"> <H1>カレンダ・開館サービス時間</H1> <P>学期中・試験期・学期外・夏期の 4 つの開館・サービス時間タイプがあります。 </P> </DIV> 新規ページのレイアウト ト ッ プ ペ ー ジ 以 外 の MoogaOne の ペ ー ジ 構 成 は 、 1 段 カ ラ ム レ イ ア ウ ト で 、 <DIV CLASS="Lead">∼</DIV>と<DIV CLASS="Block">∼</DIV>の 2 種類のメニューがバナーセ ク シ ョ ン （ <DIV CLASS="Banner"> ∼ </DIV> ） と フ ッ タ ー セ ク シ ョ ン （ <DIV CLASS="Bottom">∼</DIV>）にはさまれた形をとっています。

Lead セクションは、そのページの概要を説明するためのものです。ページの冒頭に 1 つだ け置かれます。Block ボックスは、ページの内容を書くためのものです。必要に応じて複 数作られます。

使わないタグ 以下のタグの使用は極力避けましょう。これらを使ってデザインするよりも、ローカル css （後述）でデザインしましょう。 <4.リンクの設定> 1. トップページからのリンクを設定する トップページの各メニュー内のサブメニューに、該当ページへのリンクを設定していきます。 ウェブページ作成ソフトでは、「ソース編集モード」より「ページ編集モード」を使ったほう が間違いなく、簡単にリンクを張れます。（css を利用したページでは「ページ編集モードでレ イアウトが崩れて表示されることがありますが、機能には問題ありません」）ソフトによって 方法は多少異なりますが、リンクを設定したい文字列を選択しておいて、右クリックか該当す るプルダウンメニューを選ぶことでリンク先の URL の入力またはファイルの指定ができるよう になっていると思います。 <FONT> <B> <BR>（css で指定する方が手間がかかる場合には可） <CENTER> <BLOCKQUOTE> （本来の役割である引用には可） <TABLE> <TR> <TD>（本来の役割である表には可） 相対リンクと絶対リンク リンクを設定するには相対リンクと絶対リンクという 2 種類の方法があります。（ウェブ ページ作成ソフトによっては「ファイルを指定」「URL を指定」という表記になっていま す）相対リンクはリンクをするページからリンクをされるページへ「階層の移動の仕方」 を指定する方法です。絶対リンクは、リンクをされるページの URL（世界中で唯一つしか ないそのページのアドレス）を指定する方法です。 例えば自宅の 1 階から 2 階の子供部屋にいる息子にメッセージを届けるのに、「2 階に上 って子供部屋のドアを開けて中にいる息子にメッセージを届ける」と指定するのが相対リ ンクです。これに対し「都道府県から始まる自宅の住所と息子の姓名を書いた封筒にメッ セージを入れて切手を貼ってポストに投函する」事で指定するのが絶対リンクです。（た だし、リンクの場合は実際のように到着に要する時間の差はほとんどありません。） ウェブサイトの外部へのリンクは絶対リンクしか方法がありませんが、ある一つのウェブ サイト内のファイル同士にリンクを張る場合には、基本的に相対リンクを使います。これ によりウェブページ作成ソフトの「サイト機能」をフルに活用することができるようにな ります。 前述の「2 階層またはそれより下にページを作る場合」でも説明したとおり、相対リンク の階層記述のルールは以下の二つだけです。 ../ 1 階層上り、続いて記述されるフォルダまたはファイルを参照する / 1 階層下り、続いて記述されるフォルダまたはファイルを参照する

<5. css によるデザイン> 1. Template.css とローカル css MoogaOne のデザインスタイルのほとんどは Template.css に入っています。ひな型である Template.htm から作られたページは Template.css を参照するようになっていますので、全て のページに Template.css のスタイルが適用される仕組みになっています。 しかし、Template.css にはない、個々のページに固有のスタイルが必要になるケースがまま あります。その場合は、Template.css に書き加えるのではなく、そのページに固有の css （ローカル css）を作成して該当フォルダ内に置き、このローカル css を参照するための行 を HTML 内に追加します。 特に必要のない場合にはローカル css は作らなくてもかまいません。しかし、実際にはほと んどのページがローカル css を必要としますので、ほとんどの HTML ページのデザインは、 Template.css とローカル css の 2 つの css ファイルで制御される事になります。 サイト機能について ウェブページ作成ソフトには、作成したウェブサイトに含まれるページ間のリンク情報の 一括管理を可能にするサイト機能があります。サイト機能を使うには、まずサイト（作成 しているウェブサイト内に含まれる全ページのリンク相関関係図）を作成する必要があり ます。通常、「サイトの作成」を選んだ後、ウェブサイトのトップページを指定して作成 ボタンを押し、適当な名前をつけるだけでサイトが作成されます。あとは「サイトを開 く」メニューで今作成したサイトの名前を選んで開くだけで、サイトの管理画面が開きま す。この画面上で、あるファイルの名前を変更したり、あるファイルを別のフォルダに移 動したりすると、そのページにリンクしていた他のページのリンク先が自動的に書き替え られる仕組みになっています。この機能を使えば一つずつリンクを訂正していく手間が省 けると同時に、リンクの変更漏れが起こりません。 また、css 参照にも対応しているソフトであれば、css の名前や階層の変更を行っても、同 様に自動修正してくれます。

Template.css とローカル css、両方の中に「同じタグに対して別のスタイル指定がされてい る」場合は、HTML の、より下の行に書いた方の css ファイルに記述されているスタイルが 優先的に実行されます。MoogaOne ではローカル css を下に書きますので、ローカル css の 内容が優先します。Template.css で指定されている基本的なスタイルを変更したり無効にし たい場合はローカル css に記述します。たとえば Template.css で、 P{ font-size:85%; line-height:150%; } のように記述されているスタイルを変更したい場合、ローカル css の中に P{ font-size:80%; } と書くことで、このローカル css を参照するページに関してのみ、サイズを 80%に変更で きます。なお、指定しないスタイル（ここでは line-height:150%;）に関しては Template.css の line-height:150%;が有効のままとなります。つまりローカル css には純粋に変更が必要な 部分だけを書けばよい事になります。 2. ローカル css を作成する ローカル css が必要な場合には、Notepad などのエディタを開いて、必要なスタイルを書い て、テキスト文書として該当フォルダの中に保存します。拡張子は必ず.css にしてください。 ローカル css の名前はそれが入るフォルダの名前に合わせるのが無難です。 3. HTML からローカル css を参照させる HTML 内の Template.css への参照部分の次の行に、ローカル css への参照を書き加えます。 これにより、この HTML ページは、同じフォルダの中にあるローカル css をも参照するこ とになります。

<LINK REL="stylesheet" HREF="このページ固有の css ファイル名.css" TYPE="text/css">

（例）<LINK REL="stylesheet" HREF="Calendar.css" TYPE="text/css">

css 参照自動訂正機能

ホームページ作成ソフトの中には自動的に css への参照先を訂正してくれるものがありま す。たとえばページを新規フォルダ内に保存した場合に、参照先に ../ を付けてくれるなどで す。お使いのソフトの機能を確認して Template.htm の css 参照部分を調整してください。 IBM HomepageBuilder の場合、

<LINK REL="stylesheet" HREF="Template.css" TYPE="text/css">

<LINK REL="stylesheet" HREF="このページ固有の css ファイル名.css" TYPE="text/css"> というソースが、1 階層下に保存すると、

<LINK REL="stylesheet" HREF="../Template.css" TYPE="text/css">

4. MoogaOne に使用される代表的スタイルたち MoogaOne では文章以外のリストや表などにも、一定のスタイルを適用しています。代表的 なスタイルの HTML と実際の表示をごらんください。 (a) リスト 最もよく使われるスタイルです。Template.css 内の Menu というスタイルを適用しています。 このスタイルにより青い三角形を表示させています。 [HTML] [実際の表示] <UL CLASS="Menu"> <LI>館内マップ・交通案内 <LI>カレンダ・開館サービス時間 <LI>本の貸出 </UL> ヒント：文章内の文字にリンクを設定すると目立ちにくいですね。そんな場合には要素が 1 つしかないリストを使うと意図がはっきりしてよいようです。 [HTML] <P>何か分からないことがある場合は以下のサイトをご覧ください。</P> <UL CLASS="Menu"> <LI><A HREF="http://www.moogaone.com">MoogaOne.com</A> </UL> [実際の表示] (b) テーブル（表組み） MoogaOne では、レイアウトのために<TABLE><TR><TD>ほかのタグは使用しませんが、 これらのタグの本来の役割である表組みに使用します。デザインは Template.css の中で指定 しています。 [HTML] <TABLE> <CAPTION>＜開館日数＞</CAPTION> <THEAD> <TR> <TH></TH> <TH>1999 年度</TH> <TH>2000 年度</TH> <TH>2001 年度</TH> <TH>2002 年度</TH> <TH>2003 年度</TH>

</TR> </THEAD> <TBODY> <TR> <TD>年間開館日数</TD> <TD>250</TD> <TD>254</TD> <TD>256</TD> <TD>259</TD> <TD>259</TD> </TR> </TBODY> </TABLE> [実際の表示] 罫線がすべて 1 ピクセルのすっきりした見栄えにしました。テーブル全体の上と左の罫線 を<TABLE>タグで 1 ピクセルに指定し、各セルの右と下の罫線を<TD>タグで 1 ピクセルに 指定することで全ての罫線を 1 ピクセルにしました。また<TH>タグは紺色に白抜きの文字 にしました。<CAPTION>タグはえび茶色にしています。

<CAPTION> <THEAD> <TBODY> <TH> タグはできるだけ使いましょう。視覚障害者らが 使用するウェブページ読み上げソフトでの読み上げ時にコントロールしやすくなります。 (c) <H1><H2><H3><H4>… （項目タグ） MoogaOne では Template.css で<H1> <H2> <H3> タグまで、項目タグにスタイルを指定して います。<H4>タグは必要に応じて各ページで使用し、ローカル css でスタイルを指定する という想定です。<H1> <H2> タグはそれぞれ、Lead セクション、Block セクションのタイ トル用に使っているので、ローカルで変更を加えることはほとんどないと思いますが、 <H3>についてはかなりのページにおいて、ローカル css で指定を変更していく事になると 思います。Template.css で指定している<H3>の色は黒い文字列の中にあって違いが分かる 程度の茶色（color:#633;）になっています。青系にするとリンクと間違えられて紛らわしい と思い、この色にしました。 [HTML] <H1>Lead セクションのタイトル</H1> <H2>Block セクションのタイトル</H2> <H3>さらに下層のタイトル</H3> <H4>必要に応じて使うタイトル</H4> [実際の表示]

<6. 付録> 1. ワードの置換機能の活用 マイクロソフト社のワードとその置換機能を HTML 編集に役立てる方法を紹介します。 HTML を編集していると、ソフトの自動機能によってタグの左側にスペースが生成された りして必ずしも万人に見やすいソースになりません。せっかくユーザビリティに富んだペ ージを作るのですから、自分以外のページ作成者や、ページ作成を引き継ぐ担当者に、少 しでも分かりやすいソースの記述を心がけたいものです。また、ページ内の特定のタグや 単語を一度に変更したい場合などにもワードの置換機能が大変役に立ちます。 [ワードによるソース編集の手順] 1. 編集したいページの編集したい部分のソースをコピーする。 2. ワードの新規文書を開き、[編集]メニューから[形式を選択して貼り付け]を選ぶ。[テキス ト]を選んで OK する。 3. [編集]メニューから[置換]を選択する。置換ウィンドウの左下[オプション]を開いて、[あ いまい検索]のチェックボックスについているチェックを取る。 4. [検索する文字列]に換えてしまいたい文字列、[置換後の文字列]にそれに代わって挿入す る文字列を入力して[すべて置換]をクリックする 5. 訂正が終わったソースを、ウェブページ作成ソフトの該当箇所にコピーペーストして戻 す。 [置換のコツ] (a) [置換後の文字列]に何も入れなければ、ソースから、[検索する文字列]に入力した文字列 がすべて削除されます。 (b) [検索する文字列]に入力した文字列のうちの一部分を削除したものや変更したものを[置 換後の文字列]に入れれば、繰り返し登場する文字列の一部分を訂正できます。 (c) あるタグを他の種類のタグに一度に置き換えられます。 活用例： [検索する文字列] </LI> [置換後の文字列] ↓ </LI>がすべて消去されます 活用例： [検索する文字列] <DIV （←左側に半角スペースが 3 つ入っています） [置換後の文字列] <DIV ↓ <DIV>タグの左側に入っていたスペース 3 つがすべて消えて、<DIV>タグは左寄せに なります。

(d) ワードで改行を意味する ^p という文字列を使って、ソース内に改行を挿入したり削除 したりできます。 2. change_text の活用 石高 幸一郎さん作のフリーソフト、chenge_text を使うと、複数のファイル内の特定のテキ ストの置き換えが可能です。UFT-8 にも対応しており、大変便利です。このソフトを使え ば、MoogaOne の全ファイルに共通する部分（例えば、組織トップへのリンクやページ最下 段の連絡先など）を一発で変更できます。ただ、使い方を誤ると自分の意図する部分以外 も知らずに変更してしまったりするので、事前にバックアップをとるなど慎重な準備が必 要です。 3. MoogaOne に使われている色 MoogaOne に使われている主な色は下記のとおりです。作者の所属する国際基督教大学図書 館のスクールカラーに合わせたものです。ご自分のサイトのトレードカラーに合わせてご 使用ください。色の使いすぎはユーザビリティを低下させます。「色を使えば目立たせる ことができる」「色分けすれば分かりやすくなる」と安易に多くの色を使わないようにし ましょう。 ウェブカラーナンバー 使用箇所 #003399（ネイビーブルー 紺色） <H2> Block セクション・リストの三角アイコ ン #6666ff（スカイブルー 濃い水色） <H1> Lead セクション #ccccff（スカイブルー薄い水色） トップページ News セクション背景 #666633（赤茶色） <H3> #000000（黒） 文字の標準色 #ffffff（白） 背景の標準色 #0000ff（青） リンク（未訪） #800080（紫） リンク（既訪） #cccccc（ライトグレー 薄い灰色） フォームの一部の背景 #666666（ダークグレー 濃い灰色） テーブルやフォームの罫線 活用例： [検索する文字列] </DIV>^p<DIV [置換後の文字列] </DIV>^p^p<DIV ↓ </DIV>タグと次の行の行頭にある<DIV>タグを、すべて１行空けにすることができます。 活用例： [検索する文字列] <DIV CLASS=”Service”> [置換後の文字列] <UL CLASS=”Menu”> ↓

4. ID と CLASS css ではスタイルを記述するために HTML のタグ内に、ID（css の # に対応）と CLASS （css の . に対応）の 2 種類の指定方法が利用できます。MoogaOne ではすべて CLASS と . に統一する方法をとりました。 5. 視覚・色覚障害者への配慮 画像・フレーム・表・色の使用の使用を最低限に抑えた MoogaOne は、視覚・色覚障害者 にも使いやすいものになっています。ただ、改善の余地はあります。以下は松山がウェブ サイト内に適用している、視覚障害を持つユーザへの対策です。これらは MoogaOne には 反映しておりませんので、必要な方のみ、国際基督教大学図書館ウェブページをご参照い ただき、カスタマイズしていただければ幸いです。 (a) 読み上げソフトでウェブページを読み上げると、ページの終わりに近いところにある部 分に到達するまでに相当の時間を要します。読み上げのより早い時点でページ全体の構成 が分かり、ページの各セクションへジャンプできるリンクがあれば、便利です。ただしそ れらのリンクが見えてしまうと、通常のユーザが却って混乱するので Spacer.gif （空白画 像）を使います。以下はトップページに採用した方法です。 設定する箇所のバックグラウンドカラーに合わせた Spacer.gif （空白画像）を用意しておき、 その画像を挿入するときに指定する ALT 属性内に読み上げて欲しいテキストを書きます。 トップページの<BODY>タグの直後に以下の例のようなソースを書きます。

<IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" CLASS="Jump" ALT="このページの各セクションへのリンクです ">

<A HREF="#1"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT="メインリンクのセクション"></A> <A HREF="#2"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT="最新情報のセクション"></A> <A HREF="#3"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT="コラムのセクション"></A>

それに対応して各ブロックには下記の例のようなソースを書き込みます

<DIV CLASS="Block"> <H2>

<A NAME="3"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT="コラムのセクション開始"></A> コラム</H2>

<P>ここがコラムの本文。<IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT="セクション終了"></P> </DIV>

(b) トップページ以外の各ページにも同様の配慮をします。<BODY> の直後に以下のソース を書きます。

<A HREF="#0"><IMG SRC="../Spacer.gif" WIDTH="1" HEIGHT="1" CLASS="Jump" ALT="内容へジャンプ"></A>

そのページの内容が始まるブロックに下記の例のようなソースを書きます。 <DIV CLASS="Lead"> <H1><A NAME="0">このサイトについて</A></H1> <P>このサイトについて、以下の「免責事項」「著作権」「MoogaOne について」「推奨環境」「リンク」をご参 照ください。</P> </DIV>

Jump というスタイルは、<A>∼</A>のソースを追加することで該当箇所の表示にスペース が開いてしまうのを打ち消すためのものです。 .Jump{ display:block; margin:0; padding:0; } (c) カレンダにはテキスト版を用意します。画像を使ったカレンダは視覚障害者には使えま せん。テーブルを使っても良いのですが、ソースが複雑になる上、開館日と閉館日・通常 開館と短縮開館などの情報を効率よく表現できません。国際基督教大学図書館では以下の ようなテキスト版ページを作っています。ご参照願います。 http://w3.icu.ac.jp/Lib/Calendar/Text/2006/index.htm (d) 日 本 の 視 覚 障 害 者 に も っ と も 利 用 さ れ て い る 読 み 上 げ ソ フ ト は 、 IBM 社 の HomepageReader のようです。IBM のホームページから購入が可能です。 (e) MoogaOne では情報を色分けする事は推奨していませんが、カレンダの開館スケジュー ルなどは色分けで表現するのが最も効率的です。その場合は色覚障害者に配慮が必要です。 使 用 し た 色 が 色 覚 障 害 者 に ど の よ う に 認 知 さ れ る か を チ ェ ッ ク す る フ リ ー ソ フ ト ColorAccess は以下のサイトでダウンロードできますので、使ってみてください。 http://suginy.no-ip.com/labo/labo.html 6. ウェブページユーザビリティ雑考 このマニュアルの最後に、僭越ながら、著者が MoogaOne を作成する中でウェブユーザビ リティに関して学んだ事・感じた事をいくつか述べたいと思います。 (a) 文字こそ大切 ウェブページは視覚的要素の強いメディアです。そのため多くのデザイナは画像を多 用します。それも背景や装飾にとどまらず、タイトルやリンクボタンにもバナー画像 やアイコン画像を多用します。リンクを文字ではなくアイコン画像にすれば、一目見 ただけでそのリンクの意味が分かる。本当にそうでしょうか？ それは普段私たちが「非常口」「男女トイレ」「道路標識」などをアイコンで認識し ているため、なんでもアイコンの方が分かりやすいと錯覚しているだけではないでし ょうか？ 非常口やトイレのアイコンは一つの国または世界中で統一使用を前提に作ら れ、実際そのように利用されるものです。その結果、多くの人が繰り返し目にするた め、分かりやすく「なる」のです。 あなたが作っているホームページはどのくらいの人が見ますか？ あなたが作っている ホームページにしか使われていない、あなたの思いついたデザインのアイコンが本当 にユーザに分かりやすいと思いますか？ マイクロソフト社のエクセルの[表示]-[ツール バー]-[ユーザー設定]で、全てのツールバーにチェックをして表示してみてください。 あなたがしようとしていることは、ここで確認できます。 リンクを文字ではなく画像にしてしまうことは、「リンクの文字は青」「既読リンク の文字は紫」というウェブページの常識に従わないことを意味します。「それがリン クであるかどうか」「そのリンクを既にクリックしたかどうか」が分からなくなるこ

とを意味します。せっかく万人に受け入れられている最も分かりやすいルールがそこ にあるのに、使わない手はないでしょう。 またボタンのように見えるバナーほかの画像も問題です。クリックできるものとそう でないものは、その違いが「露骨に」分かるようにしておかなければなりません。 文字は画像に比べての解釈の幅が狭い。つまり、適切な表現さえすれば、意味伝達の 誤差が画像よりも少ないのです。ウェブページユーザビリティにおいては、文字こそ が大切です。 (b) 伝えたい vs. 知りたい ウェブページはポスターではありません。また、パンフレットほか印刷物でもありま せん。ポスターの出来栄えはポスター自体を見て評価すれば事足ります。では、ウェ ブページのトップページの画像をプリントしたものを見て、ウェブページの評価が出 来るでしょうか？ できませんね。なぜなら、ウェブページはユーザが完全に主導権を 持って操作する過程で評価されるものだからです。 このことは、ウェブページの構成・デザインはおろか、内容も規定してしまいます。 つまり、すぐれたウェブページは、「作成者が伝えたい情報ではなく、ユーザが知り たい情報を載せている」のです。ウェブページ作成者は、往々にして組織の上部から 「これこれの点をウェブ上でアピールしたい」旨の要求を受けるケースがあります。 これらのプレッシャーと闘いながら、本当にユーザが知りたいものとそうでないもの を厳しく吟味しながら、構築していかねばなりません。 そうやって、戦っているあなた自身、トップページ上のあるメニューが他のメニュー より重要と思いこんでいませんか？ 各メニューの重要性はユーザが決めるものであり、 同じユーザであってもアクセスのたびに異なるニーズを持っている事を考えれば、必 然性がない限り、あるメニューを他より大きくしたり、目立たせる事は控えたほうが 良いといえます。その事によって、他のメニューが目立たなくなることは、特定のユ ーザの欲しがる情報へのアクセスが遅れることを意味します。 (c) 長いものには巻かれた方がいいか ウェブページは構成やデザインの自由度が非常に高い表現メディアです。ビジネス文 書のように日付の位置や書き方、時候の挨拶、ほか決められた様式があるわけではあ りません。新聞のテレビ欄のように横にテレビ局、縦に時間軸のように決められたレ イアウトもありません。そのため、訪れるウェブサイトによって、含まれている内容 はほとんど同じであるのにもかかわらず、それらがどこに置かれているか、どういう タイトルがつけられているか、どういう順番で並んでいるかは、バラバラの状態です。 新しいサイトを訪れたユーザは、いわば初めて目にする機械をマニュアルなしで操作 することを強要されているのです。 この事は、われわれに「できるだけ奇抜な表現・特殊な技術は使わないほうがよい」 という教訓を与えてくれます。2.-4. 「トップページのメニュー名を決める」でも述べ たように、ごく普通の日本語を使い、内容が想像できないような造語は避ける事、ア ニメーションほか動く画像や文字は極力使わない事、他のサイトで一般的に使われて いる表現・構成に従う事が、万人に使いやすいサイトを作るコツです。 ただ、一般に使われている表現が必ずしもベストと思えないケースもあります。2.-4.中、 ×「企業情報」「ニュースリリース」「おしらせ」というのは、一般的な企業のメニ ューのタイトルですが、内容が想像しにくいように思い、あえて ○「経営情報」「報 道発表」「お知らせ」のようにしてみました。

しかし、基本的にはウェブページのユーザビリティを上げるためには、「多くのサイ トがそうしているようにする」のが正解と言えます。 (d) ここはどこ？ 私は誰？（…って、それくらいは分かってるけどさ） ウェブサイトを見るときに、ユーザが必ずトップページから見てくれるとは限りませ ん。Google などのサーチエンジンの検索結果から 1 階層、2 階層下のページにいきなり 飛んでくる事が、ままあります。そんな時、ユーザが「ここはなんと言う団体の誰が 作ったページで、今どこにいて、どこをクリックすればどこにいけるのか」を分かり やすく提示してあげる必要があります。 MoogaOne にも採用されているパンくずリンク（おそらく『ヘンゼルとグレーテル』か らの命名）は、表示されているページのトップページからの相対的関係を示すととも に、上の階層へ戻る筋道を与えてくれます。 ウェブサイト全体の階層を少なくすることも有効です。MoogaOne ではトップページに、 メニューに加えそれらに含まれるサブメニューをも表示させたことで、全体として 1 階層分少なくて済むように設計されています。（例えば、いくつかの異なるレストラ ンのメニューを同時に比較検討するときは、全ての店のメニューを開いておいたほう が、1 回 1 回開けたり閉めたりするよりやりやすいですよね？） これによりユーザのホ ッピング（階層を行ったりきたりする）回数が減少することになります。 各ページに適切なタイトルをつける事も重要です。タイトルはブラウザのタイトルバ ーだけではなく、お気に入りや編集時のタイトル一覧表示などさまざまな場所で表示 されます。タイトルをつけないと、全ての表示が「無題」「NewPage」などになり、作 成者にも不便、ユーザにも不親切です。タイトルはスペースの問題で最初の数文字し か表示されないケースが多いので MoogaOne では「組織名 ページの内容」ではなく 「ページの内容 組織名」の順にしてあります。 (e) 最終的には人間が頼りです 不思議なことに多くのウェブサイトでは、そのサイトを運営する団体・企業の連絡先 を見つけるのに苦労をします。また、いくら探しても分からない事がままあります。 「ウェブサイトはそれ自身で完結すればよいので、電話番号や住所は不要」という考 えなのでしょうか？ もしそうであれば、明らかな間違いです。 どんなにユーザビリティに富んだウェブページを作ったとしても、それがハイパーテ キストである限り、ユーザは、階層を行ったり来たりのホッピングを繰り返さないと、 目的の情報にたどり着けないのが常です。そんな時、「組織の人間に聞けたらどんな に楽か」と誰もが思うのではないでしょうか？ 組織名、代表電話番号、住所、ほか連 絡先は、最も分かりやすい形で提示されるべきです。もしそのことによって電話が殺 到するのであれば、それは「ウェブページではユーザのニーズが満たされていない」 つまり「ウェブページ作りに失敗している」事を意味しているのではないでしょう か？ 7. 参考文献

“Homepage Usability: 50 Websites Deconstructed.” Jakob Nielsen, Marie Tahir (New Riders Press, 2001)

Web ユーザビリティの第一人者、Jakob Nielsen 氏が有名ウェブサイト 50 を俎上に、ユ ーザービリティの視点から容赦ない評価を下すという嗜好の本。「何もそこまで…」 と思わせるところもあるが、ウェブページを作った事のある人で、ユーザビリティと

いう概念に出会ったことのない人なら、目から鱗が落ちる事間違いなし。ホームペー ジ作成に対する姿勢を、根本から正されます。取り上げられているページはすでに更 新されたものばかりですが、内容は全く色あせていません。残念な事に日本語版はフ ルカラーではなく、サイズも縮小されており、英語版のインパクトはありません。ぜ ひ英語版をお読み下さい。実際のホームページ作成の技術的な内容については触れら れていません。 『大学図書館トップページのガイドライン』 長谷川豊祐, 上田修一 ほか http://www.slis.keio.ac.jp/~ueda/univlibguide/toppageguideline.html 鶴見大学図書館の長谷川豊祐氏ほかによる大学図書館のトップページ作成のためのガ イドライン。「構成」「内容」「表示・レイアウト」「技術」の面から、ページの作 成にあたって心得るべき重要な点を列挙しています。大学図書館だけではなく、あら ゆるホームページを作成する前に一読する事をお薦めします。 『HTML とスタイルシートによる最新 Web サイト作成術 』 (エクスナレッジ, 2002) 初めてホームページに css を適応してみようと思っている人に、最も適した入門書です。 （2005 年 2 月現在） 大変分り易く、レイアウトも見やすい本です。ごく基本的な知識 を得るのによいと思います。 『スタイルシートスタイルブック』 有坂 陽子, 長谷川 恭久（翔泳社, 2004） 色々なコツや css の実際の例が大変参考になる本です。 『Web スタイルシートデザインガイド』 エビスコム (エムディエヌコーポレーション, 2002) 実際の例が参考になる本です。構成は若干分りづらいと思います。 『HTML+CSS Web デザインスタイルガイド 』 エ・ビスコム・テック・ラボ (毎日コミュニケーションズ, 2003) ウェブページ作成の様々なテクニックを HTML と css で、それぞれどのように実現す るかを併記した構成です。HTML だけ、css だけをまとめた方が分り易かったと思いま す。多くのテクニックが網羅されている点は評価できます。教科書というより、事典 的な役割を果たしてくれる本です。 U-Site http://www.usability.gr.jp/index.html IID 社による、ユーザビリティに関する情報のページです。日本国内のユーザビリティ 情報の実質的なポータルサイトとなっているようです。黒須正明氏のコラム、Jakob Nielsen 氏のコラム邦訳版が読めます。 『HTML デザイン辞典』 足立裕司（翔泳社, 2001） 足立裕司氏によるウェブデザインの基本書としてベストセラーになっています。守備 範囲は広く、最新版では css についても盛り込まれていますが、あまり詳しくないので css の入門書としては不向きです。ページ番号が見づらいのはどうにかして欲しいと思 います。

『スタイルシートサンプルブック』 大藤幹（ソシム, 2005） css の事典として利用できます。一つ一つのスタイルに対応するブラウザの表がついてい るのが便利です。巻末の 2 段、3 段カラム、印刷用スタイル、ブラウザのバグ回避ワザ、な どの応用サンプルはオマケとしては価値があります。

MoogaOne マニュアル

URL (MoogaOne): http://mook.mook.to/MoogaOne/index.htm URL (ICU 図書館) : http://www-lib.icu.ac.jp/index.html

MoogaOne に対するご意見・ご提案をお待ちしております。多くの人と協力する事で、 ウェブページのユーザビリティに貢献したいと考えています。下記にご連絡ください。

MoogaOne マニュアル改訂履歴 このマニュアルに関する改訂履歴です。MoogaOne の HTML ファイル、css ファイル、に施さ れた修正は MoogaOne トップページ 「修正履歴」 でご確認ください。 2006 年 2 月 16 日 ・図書館向けであるという前提と表現をマニュアル内からとりはらいました。 ・「6-2. change_text の活用」を追加しました。 2005 年 7 月 11 日 ・Template.ccs の<TABLE><TH><TD>タグを訂正しました。<TABLE>タグ内に書き込んでいた スタイルは廃し、css で指定するよう変更しました。それにともなって、マニュアルの「5-4-(b). テーブル（表組み）を訂正しました。 2005 年 6 月 29 日

・マニュアルの「6-3. MoogaOne に使われている色」を訂正しました。Lead セクションと Block セクションの色の表記が逆でした。また、トップページの News セクションの使用色 #ccccff が 抜けていたのを追加しました。 2005 年 6 月 28 日 ・マニュアルの「著作権」の項目を訂正しました。著作権者から国際基督教大学図書館を削除 しました。ウェブページのひな型の著作権はひな型の作成者にあるとの考えからです。 2005 年 6 月 15 日 ・マニュアルに「css 参照自動訂正機能」の項目を追加しました。 2005 年 6 月 8 日 ・マニュアルに「6-5. 視覚・色覚障害者への配慮」の項目を追加しました。 2005 年 6 月 3 日 ・MoogaOne の HTML について、MoogaOneLibrary.gif が参照されていたバナー部分を、「ご自 分で用意したバナー画像の名前」に変更しました。また、マニュアルを、上記に対応するよう 改訂しました。

・MoogaOne の HTML の META タグ中の GENERATOR（作成時使用ソフトの宣言）を削除し ま し た 。 削 除 し た タ グ の 内 容 は 以 下 の と お り で す 。 <META NAME="GENERATOR" CONTENT="IBM WebSphere Studio Homepage Builder Version 9.0.2.0 for Windows">

2005 年 6 月 1 日

・マニュアルに「1-6. 著作権」の項目を追加しました。