MoogaOne

HTMLとcss
HTMLの基本ルール
ホームページの内容（テキストなど）を
タグと呼ばれる記号ではさむこと
挟み込まれる内容に適した種類のタグ
を使うこと
HTMLとcssの分業
内容
構成
XXX.html
デザイ
ン
XXX.css
cssZenGarden
ユーザビリティはどこへ…
MoogaOne
作り手には作りやすく
使い手には使いやすく
MoogaOne使用例
国際基督教大学図書館
MoogaOneの特長
・テキスト優先。画像は最小限に
・リンクは全て文字（リンク標準色に準拠）
・全サイトに亘って統一デザイン（レイアウト・色ほ
か）
・できるだけ日本語を使用・ UNICODEに準拠
・リンク名は短く内容が分かり他と違い造語は避ける
・パンくずリンクを使用・全ページに適切なタイトルを
・全てのページに連絡先を
・レイアウト用のテーブルタグは使わない
・デザインすべてをcssで制御
・フレームは使わない
・サイトの階層は最小限に
・トップメニュー構成は「大学図書館トップページの
ガイドライン」を使用
・正しいHTML
メニューの決定
(a) 短いほうが良い
(b) 内容が分かる表現が良い
(c) 日本語が良い
(d) 造語は避ける
(e) 専門用語・組織内用語は避ける
(f) 他のメニューと明らかに異なる名前にする
(g) 表現に統一性があったほうが良い
(h) 「～について」という表現はできるだけやめましょう
新規ページの作成
スタイルの作成
リンクの設定
(a) 相対リンクと絶対リンク
(b) サイト機能の活用
HTMLリンクの自動修正
css参照の自動修正
<A HREF=“../../C/index.htm”>ここだよ</A>
<A HREF=“http://moogaone.ac.jp/C/index.htm”>ここだよ</A>
視覚・色覚障害者への配慮
隠しナビゲーションリンク
→ http://www-lib.icu.ac.jp/index.html
テキスト版カレンダ
→ http://www-lib.icu.ac.jp/Calendar/Text/index.htm
配色
→ http://www-lib.icu.ac.jp/Calendar/index.htm
MoogaOneの欠点？
ｃｓｓの弱点？
・ブラウザによる解釈の違いと未対応部分
→最低限のスタイルを用いて差異が最小になるよう努力
→印刷だけがネック
→新しいブラウザ・バージョンは対応している
・機能優先主義による遊び心の欠如
・デザイン以外の共通部分の一括編集が不可能
→Mooga2 開発中
参考文献・リンク一覧
“Homepage Usability: 50 Websites Deconstructed” Nielsen, J. et al. (New Riders Press, 2001)
『HTMLとスタイルシートによる最新Webサイト作成術』（エクスナレッジ, 2002）
『スタイルシートスタイルブック』有坂陽子ほか（翔泳社, 2004）
『Webスタイルシートデザインガイド』エビスコム（MdNコーポレーション, 2002）
『HTML+CSS Webデザインスタイルガイド』エ・ビスコム・テック・ラボ（毎日コミュニケーションズ, 2003）
『MovableType標準ハンドブック』平田大治ほか(インプレス, 2005)
『Movable Type スタイルコンテンツデザインガイド』エ・ビスコム・テック・ラボ（毎日コミュニケーションズ, 2005）
『工作図鑑』木内勝（福音館書店, 2000）
MoogaOne
http://homepage2.nifty.com/anapa/MoogaOne/index.htm
Mooga2
http://homepage2.nifty.com/anapa/Mooga2/index.htm
国際基督教大学図書館
http://www-lib.icu.ac.jp/index.html
人間中心設計推進機構
http://www.hcdnet.org/
U-Site
http://www.usability.gr.jp/index.html
cssZenGarden
http://www.csszengarden.com/
大学図書館トップページのガイドライン http://www.slis.keio.ac.jp/~ueda/univlibguide/toppageguideline.html
Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
IBMホームページリーダー
http://www-6.ibm.com/jp/accessibility/soft/hpr.html
ColorAccess 入手サイト
http://suginy.no-ip.com/labo/labo.html

Download Report