私は方々のサイト批評掲示板でいろいろ書き飛ばしています。その一部を収録。新旧いろいろ入り混じっています。場所もいろいろ。
［2002.06.14］
私はいつも、「壁紙は統一しましょう」とアドバイスしているのですが……emikoさんの壁紙選びは慎重ですね。たしかに完全な統一はされていませんが、私は気になりませんでした。
サイトの内容はよくまとまっていますし、今後の発展もある程度期待できそうです。据置型コンテンツとあわせて更新型コンテンツを用意したのがうまいですね。ただ、美足だけでは日記が続かないでしょうから、だんだんにふつうの日記にしていってしまうのも一興かもしれません。そんなことでいいのかと思われるでしょうが、よほどの人気サイトにならない限りは、ある程度「個人サイトらしく」やっていくほうが長続きします。
情報提供型個人サイトの多くがサイト開設後半年程度で更新が止まってしまい、それきり放置されることは、おそらくサイト開設にあたって既存の美足追求サイトを探されただろうemikoさんには、よくお分かりのことと思います。アクセスがあり、人の役に立っているのでやめられない。けれども自分はもう飽きた、というわけですが、飽きたサイトのためにプロバイダのサーバースペースを空費するのはもったいないですよね。飽きずに続けるためには、かっちりと情報提供をしつつ、個人の趣味サイトらしい「自由さ」を残しておくことです。
さて、サイトのデザインは非常に安定しており、問題ないといえますが、念のため少々。大目次、小目次を横に並べていらっしゃいますよね。横並べというのはデザイン的な拡張性に乏しい、ということは理解されていますか。とくに小目次ですが、サイトの内容が充実するにしたがい、小目次はどんどん増えていきます。現時点でも既に、小さな画面に大きな文字でサイトを見れば、目次が2行にわたってあまりきれいになりません。
もちろん、まだとくに問題のあるレベルではありません。しかし将来はどうでしょうか。大きな画面、小さな文字でさえ2行にわたるほどに目次が成長してからデザインを変えるのではたいへんです。サイトをこじんまりとまとめるのか、大量の情報を公開するサイトに成長させるのか、それはサイトのデザインと同時に決定されることなのです。多くの方は先の見通しを持たずに見切り発車されるので、後になってサイトのリニューアルにたいへん苦労なさいます。emiko様のサイトは、現時点ではそれほど大きくありませんので、今のうちに先のことを考えて手を打たれるとよいでしょう。
これに関連して、ソースの記述についても少々。よく勉強されていて、非常にソースはきれいです。きれいですが、ふたつ、たいへんな無駄をなさっています。ひとつはテーブルでレイアウトなさっていること。もうひとつはCSSを各ページに記述していることです。
テーブルでレイアウトしてしまうと、HTMLレベルでページのデザインが決定されてしまうので、後からデザインを変えたくなったとき、非常に苦労します。CSSを各ページに書くことも同様です。外部CSSファイルをご利用になってください。
HTMLには、ここがタイトル、ここが見出し、ここがナビゲーション、といった文書の論理構造のみ記述し、レイアウトは全て外部CSSファイルに任せるとよいでしょう。こうすれば、外部CSSファイルひとつを変更するだけで、サイト全体のデザインを簡単に変えることができます。その一例として、私のサイトをご覧ください。セレクトメニューからデザインを選択すると、一見、別のサイトに移動したかと思うほど見た目が変化します。が、じつは適用するCSSファイルを切り替えているだけで、HTML文書は同じ物です。CSSファイルを変更するだけでサイトのリニューアルが可能だ、ということを実感してみてください。
もう少しだけ勉強なさると、先述のサイトの成長に伴うリニューアルが非常に楽になるわけです。この技術に興味を持たれたら、時間の余裕を見計らってStrictなHTMLの基礎講座などで勉強していただけるとよいと思います。
HTMLやCSSの記事にはひそかにいい加減なところがありますが、hp-design.netさんはサイト作成に必要な多くの情報を非常にうまく、大衆受けする形でまとめているということでは、最高峰のサイトのひとつだと思います。ポイントがよくまとまっています。［02.06.16］
面白いデザインですね。サイトマップも適切で、とてもよいと思います。ナビゲーションの解決はなかなかスマートでよいですね。ただ、全部のページにサブメニューを置いてあるのですが、SSIを使っていらっしゃるのでしょうか? そうでもないと、更新が面倒すぎて嫌になってしまうのではないかと心配でなりません。
表紙は更新履歴が説明文と重なってしまっているので、そこだけ何とかしていただければと思います。position:absoluteが多用されているのですが、使いこなすのが難しい方法だと思います。タブ風のナビゲーションバーはうまくいっているのですが。
ご参考までにどうぞ。複製・改変もOKです。文字サイズを固定せず、たいていの画面サイズにもおおよそ柔軟に対応していると思います。女性の画像がちょっと目立たないのが難点でしょうか。［02.07.06］
掲示板でご質問のあった外部CSSファイルの件ですが、IEならばアドレスにCSSのURI を記入すれば見られます。ファイルが関連づけられていません、などというメッセージが出るようであれば、CSSファイルをメモ帳などに関連づけてください。
ただ、おそらくサーバの都合で改行が文字化けすると思います。そこで、メールでCSSファイルの内容をお伝えします。
body
{margin:0 0 3em; padding:0 0 3em; background:#fff0f0; color:#600; line-height:1.5em;}
p#renew
{font-size:90%; text-align:right; margin:0 0 3em; padding:1em 1em 0.5em; color:#377; background:#fcc;}
div#contents
{width:50%; float:left;}
div#info
{width:45%; float:left;}
p#counter
{clear:both; text-align:right;}
p#girl
{position:absolute; right:0; top:11em;}
h1
{font-size:250%; padding:0.5em 0.3em 0.3em; position:absolute; left:0.5em; top:0.3em; color:#f66; background:#fee; width:6em; border:4px double #faa;}
h2
{font-size:150%; margin:1em; color:#f66; border-bottom:2px solid #faa;}
p
{font-size:100%; margin:0.5em 2em 0.5em 4em;}
dl
{margin:0 2em 0.5em 4em;}
dt
{margin-top:0.5em; padding:0 0.5em; background:#fcc;}
dd
{margin-left:2em; padding:0;}
ul
{margin:0.5em 2em 0.5em 4em; padding:1em; background:#ffc; list-style:none;}
address
{font-size:100%; text-align:right; margin:2em 0; padding:0 2em; color:#f66; font-style:normal; border-top:2px solid #faa;}
a
{color:#39c;}
a:visited
{color:#639;}
以上です。Mozillaですと、CSSファイルのURI を指定するだけで、ふつうのHTML文書と同じようにCSSファイルの内容を表示します。［2002.07.08］
いつもお世話になっております。
CSSファイル、ありがとうございました。関連づける、のところでつまずいてました。
慣れないパソコンで慣れないサイトを作りをするわけですから、いろいろなところで躓くことがあろうかと思います。けれども、どうかあきらめずに、ひとつひとつ問題を解決していってください。
じつは「関連づける」の件は、以前別の方にアドバイスした際に、相手の方が躓いたので、「なるほど、そういうものか」と思ったものでした。「開けません」「読めません」という言い方をされる方が多く、アドバイスはときに推理パズルと化します。
（ただ、更新してデザインなど変っていくので、申し訳ないなぁと思ったり）
それはお気になさらず。私がどのようなアドバイスをするのか、それだけ伝わればよいのですから。むしろ、更新されてどんどんいいサイトになっていってほしいと思います。
HP作りをはじめてどれくらいなんですか？
98年に、大学の授業課題として作ったのが最初です。以降、しばらくはほとんど何も勉強しませんでした。本格的に勉強を再開したのは昨年の3月です。
ですから、実質1年半ですね。私は自分が情報発信することには長らく興味をもてなくて、ひたすら閲覧者に徹してきたという経緯があります。Web技術についても、背景画像は統一しよう、などの閲覧者にもわかる範囲の話はもともと詳しかったわけですが、外部CSSファイルで全部のデザインをすれば自動的に背景もそろうとか、そういったことは、最近まで全然知りませんでした。
私の勉強の変遷は、以下のサイトのログを見ればわかります。昨年3月に友人に頼まれてサイト作りのアドバイスを始めた当初から、アドバイスに飽き足らなくなって自分で全ページを作るようになり、そしてサイトが閉鎖するまでの全てがあります。
すごく専門的ですよね？
たいしたことはありません。所詮、素人の繰言に過ぎません。学べば学ぶほど、自分の位置がよく見えてくるものです。
CSSの解読でまた疑問が出てきましたら、お気軽に質問してください。今後とも、よろしくお願い申し上げます。［2002.07.09］
［2002.06.15］
趣味のサイトなので別にいいといえばいいのですが、不勉強が目立つように思います。
……などなど。注意深く多くのサイトを見て回れば自然とわかってくることでしょうが、一念発起して大量の知識を短期間に仕入れようということでしたら、アクセスアップ講座系のサイトをいろいろ探して読んでいくとよいでしょう。
ところで、日記のログがたいへん手の込んだ方法で格納されていますが、経験不足がたたって、かえって読みにくくなっているように思われます。技術的にどうこうというよりも、テキストサイトの読破量が少ないのでしょう。もっとふつうのサイトのようにログを整理すれば、かなり読みやすくなってきます。
私の好きなテキストサイト、2:07 PMを例に説明しましょう。アクセシビリティーにいろいろ問題があるのはこの際無視して、ここではログの整理術を見ていただきたい。宝典さんのサイトと見比べてみると、かなりすっきりわかりやすく、ログの読破もしやすいことがおわかりいただけます。
宝典さんのサイトを改善するポイントは3つ。
独りよがりになっていないかどうかが心配、とのことでしたが、個人のやっているテキストサイトがそうならない方がおかしいわけで、それほど心配する必要はないのではないでしょうか。どんなに売れる作家だって、せいぜい300万冊しか本を売ることができません。日本人の3％未満しか買ってくれないわけです。97％の人には興味を持ってもらえない。ですから、あまりお客様に振り回されてもしようがありません。千人に一人、万人に一人が「これいいな」と思ってくれたらいいだろう、というくらいに考えておくのがよいだろうと思います。
とはいうものの、「喝」の内容はほとんどが単純な無知に基づくものなんで、読んでいてがっくりきました。疑問、不思議があるならば、まず自分で調べてみてはいかがでしょうか。宝典さんは「調べる技術」が不足気味なのでそれなりに苦労するでしょうが、各テーマについて1週間なり10日なりかけて調べてみることをおすすめします。「売れてるくせに」などは答えが見えてくる頃には、世の中の仕組みが結構わかってきて面白いですよ。
サイト作りも同じようにされるとよいでしょう。どんな風にサイトを作ったらいいか、作ったサイトを見直す際のポイントは何か、そういった情報はいくらでもあります。さてどうしようと思ったら、まず調べること。人に訊ねるのはそれからでも遅くはありません。
URI：http://members.goo.ne.jp/home/monjyaka ［2002.06.15］
Gaiaxでのサイト作成は、おすすめいたしかねます。あれこれ勉強すれば驚くようなサイトも作れるようですが、その努力をする時間と気合があれば、Gaiax以外ならもっとよほどいいサイトを作れるわけで……。お金がかからず前提知識も不要、それでいてフレームを使ったサイトが作れるというわけで、周辺システムの作りこみの妙もあって大ヒットしたシステムですが、頑張ってサイトを作ろうという多くの方が「Gaiaxを卒業」していくことを考えますと、基本的に先の展望は開けないと考えてよいのではないでしょうか。「Gaiax後」についてご一考なされることを勧めます。
Gaiaxでサイトを作るのはたしかに自由ですが、Gaiax以外でサイトを作るのも自由です。どっちも自由なので選ぶのに困るわけですが、私ならGaiax以外をおすすめしたい。Gaiaxにはいいところがたくさんあります。それでもGaiaxはおすすめできないと私は考えます。何も知識がなくてもある程度のサイトを作れるのがGaiaxです。しかし「ある程度」に満足できなくなったとき、Gaiaxにいたのでは苦労するのです。最初の一苦労を我慢しても、Gaiax以外ではじめた方がよいのではないでしょうか。
もんじゃカチューさんのサイトをパッと見て気になることは、メニューの文字と壁紙の模様がマッチしておらず、非常に文字が読みにくいということです。あの壁紙は、とりあえずどうにかした方がよいでしょう。
URI：http://pikatto.web.infoseek.co.jp/ ［2002.06.15］
マークアップが変だったので、修正案を作ってみました。私からのアドバイスは、修正案に全部盛り込んであります。よろしければご参考になさってください。（複製・改造自由）
番号なしの一覧はリストとして、言葉とその説明は定義リストとして、段落は段落としてマークアップするのが正しいのです。ただHTMLにはそれほど多くの要素は定義されていませんから、多少は牽強付会も生じますが、それでもdiv要素を乱発するよりは意味の通ったソースになるはずです。私の書いたソースを見ていただくと、かなり簡単なものになっていることがおわかりいただけるでしょう。
デザインはある程度もとのものに似せました。ただし640×480あるいはそれ以下の小さな画面でも問題なく閲覧できるよう、水面下で大きな変更を加えている部分もあります。例えば表紙の大きな画像は、div#indexの背景画像にしました。その他、配色もちょっと変えてあります。これは単なる私の好みの問題なので、あまりお気になさらず……。もとの配色はリンクがあまりに目立たないという他は悪くないと思います。
やはり「レイアウトのために」table要素を用いるのは面妖です。table要素は表を明示する要素だからです。また、よほど気をつけなければテーブルレイアウトはアクセシビリティーの低下を招きます。そうしたデメリットやおかしさを知った上で、それでもtable要素でレイアウトしたいというのであれば、それは本人の勝手です。けれども、単なる無知からtable要素をレイアウトに使っている方には、少なくとも一度はご忠告さしあげるのが良心的なアドバイザーというものでしょう。
［2002.06.07］
清冽な印象を受けました。きれいなサイトですね。客層をざっと調べた限りでは、現状維持で十分かもしれません。
ただやはり客層を広げていこうというおつもりなら、見やすさを考えるなら文字サイズをもっと大きくしてほしいと思います。ブラウザになんのために文字サイズの調節機能がついているのでしょうか。小さい文字が好きな人は、「自分のブラウザの文字サイズを」調節しましょう、ということなのです。ですから、文字サイズ「中」で十分に小さな文字が表示されるようなデザインをするのはおかしいのです。そうではなくて、サイトでは標準的な文字サイズを用い、「文字サイズ『最小』推奨」とするべきなのです。（私が現在の客層なら問題ないというのは、自分のブラウザの文字サイズ設定をいつも「中」のまま変更する気のない「受動的」な方、初心者が多いと判断できるためです。ただ私は、初心者にはよいやり方を教えていくことが大切だと思います）
ところで他の方もおっしゃっていますが、CSSを各ページに記述するのはつまらないので、外部CSSファイルを使用しましょう。外部CSSファイルでなるべく多くのデザイン設定を済ませるようにしていくと、サイトのデザインに一層の統一感が出てきます。しかも「統一し忘れる」ことを防げるので、デザイン的にも一層の向上をはかることができるでしょう。