私は方々のサイト批評掲示板でいろいろ書き飛ばしています。その一部を収録。新旧いろいろ入り混じっています。場所もいろいろ。
［2002.05.19］
最近よく顔を出してますが新参者です、どうも初めまして。せっかくなので、飛翼さんにも楽しんでいただけそうな話題を。
<kbd>:C</kbd>というマークアップをされているわけですが、「:」は実際にはキー入力しないわけです。だとしたら、<li>＊＊＊:<kbd>C</kbd></li>とするか、あるいは、<li>＊＊＊<kbd>C</kbd></li>と記述しておいて、CSSで
kbd:before {content:":";}
などと記述されるのが適当かと思います。ただし後者の場合、IEが全バージョンで未対応……ちょっとつらい。私は、何か明示したい要素がある場合のみマークアップすればよいと考えます。よって私は前者の方法をとります。CSSを排した場合を考えれば、テキストに「:」を記述するのがベターだろうと思います。
さて、正しいHTMLとCSSによるデザインの「布教」については、私も苦心しているところです。たいていの方はサイトの表示結果にとにかく興味があるので、まず自分のサイトが広告塔になるよう留意しています。通常のフレームでは絶対に実現不可能なタイプの擬似フレームを使い、a:hoverを凝ったものにし、font要素やテーブルでは実現が面倒なデザインを盛り込んでいるのはこのため。またWinIEでの表示確認は欠かせません。WinIEで崩れる技術は初心者に一顧だにされないからです（その意味でTypeHのデフォルトスタイルの表示がWinIE6で崩れるのは残念）。一方、HTMLとCSSの記述は誰でも真似できる簡単なものにしています。
アクセシビリティーといったまじめな理屈だけではレガシーなHTMLに対抗しきれないというのが私の正直な感想です。おかしな手法が広まったことにはそれなりの理由があります。「正しいHTMLって便利だな」「CSSを使ったデザインっていいな」と人に感じさせる工夫が、正しいHTML推進派にも求められているのではないでしょうか。
ところで私も市販の「入門書」にろくなものがないことを嘆いていた一人ですが、この5月に「ひとりでつくれるホームページHTML入門」成美堂出版という本が出まして、この内容が非常にいいんです。「速習Webデザイン Webデザイン基礎」技術評論社も随所に怪しい記述があるものの内容は先進的。beginner向けは困った本ばかりですから、むしろ数少ない「いい本」を積極的に紹介する方が効率的のように思われます。一般人向けのHTMLとCSSのリファレンスとして本当に信頼できる本は「HTML＆XHTML＆CSS辞典」秀和システム以外にないわけです。売れ筋の「HTML＆CSS HANDBOOK」や「ホームページ辞典」といった類書はすべて「どひゃ〜」とひっくり返る記述が紛れ込んでいます。
［2002.05.23］
相談される方は大抵自信がないわけです。ですから、常連の回答者がいる場合、「自分にはたいしたことはいえないから」「いえるような身分じゃないから」としり込みしてしまいます。約束事自体が堅いとは思えません。大切なのは、その運用の仕方ではないでしょうか。
例えば、相談に乗った後で、「ぜひこの経験を活かして、同じようなことで悩んでいる方がいらしたらアドバイスしてあげてください」とか「私も悩んでいます、と名乗り出るだけでも、孤独に悩んでいる人にどんなにか心強いかわかりません」などと書添えるとよいでしょう。「みなさんで考えるための掲示板です。ぜひ次回は回答者としてご参加ください」というメッセージを、繰り返し伝えていく……ただ規約があればみんな素直に従ってくれるというものではありません。規約に実効性を持たせるためのたゆまぬ努力が不可欠です。
メインBBSへの誘導についてなんですが、順番に読んでいけばたどり着くようにはなっていますね。ただ、そうではあっても「相談する」はもっと大きく堂々と単独で表示されているべきだと思います。「あいさつ」「みなさまの声」「はじめに」「削除要請」はセットで示し、また統廃合を進められてはいかがでしょうか。一度読めばそれで足りる情報、一部の方が稀に利用するだけのコンテンツを、メインコンテンツと同列に配置するのは解せません。［02.05.16］
いや〜よくなりましたね。サイトのテーマ、構成がはっきりわかるレイアウトです。アドバイザー増加を狙う企画の成否は私にはわかりませんが、レイアウトの見直し、情報の再整理は非常に成功していると思います。
ただし、だからといってアクセス数が増えるとかアドバイザーが増えるかといえば、なかなか難しいところですよね。デザインはサイトの内容（雰囲気／勢いなどもふくむ）やある種の宣伝効果と比較すればはるかに重要度が低いので……。［02.05.23］
［2002.05.23］
ふつうの人の趣味のサイトである限り、よほどひどくなければデザインなんて気にする必要はありません。ゼニガめさんのサイトは、とくに問題のないレベルだと私は思います。多少デザインを改善しても、それでアクセスアップに成功するわけでもないでしょう。けれども、自分のプライドの問題として、今よりもっとデザインをよくしたいということであれば、アドバイスできることがあります。
例えば美術部にいたとか、しっかり指導してくれる美術の先生がいる学校を卒業したなど、デザインについてかじったことがあれば常識ともいえるポイントについて、いくつかご紹介します。これらをまじめに守っていくと、いくらか垢抜けた雰囲気のサイトになるはずです。ただしあらかじめお断りしておきますが、プロはこうした「定石」から自由です。ですから世の中の商業デザインをみていくと、アレッと思うことが多いでしょう。さて……。
サイト作成初心者の方がよくやる間違いは、「各ページは内容が違うのだからレイアウトもデザイン（色使い／画像など）もそれぞれ内容に一番あったものにするべきだ」と考えることです。自分にとっては自サイトは自分の家であり、ひとつの世界です。しかし閲覧者にとっては、ごまんとあるサイトのひとつに過ぎないわけです。ですから各ページに個性を持たせることよりも、作品全体のメッセージ性を明確にしていくことが重要なのです。そのためには、作品内のあらゆる要素、つまりサイト内の各ページに、繰り返しメッセージを織り込まなければなりません。では実際にどのような方法でそれを。実現したらよいのでしょうか。基本的にはレイアウト・デザインを共通させる他ありません。
色や画像は適当に配置するのではなくて、一定の意図のもとに使用しましょう。サイトを作るとき、あらかじめ配色を決めておくのが定石です。色の決め方はいろいろあるのですが、基本的な発想は以下の通りです。
まず、サイトのテーマカラーを決めます。次に、テーマカラーを考えつつ、サイトのベースとなる色（基本的に最も大面積を占める色）を決めます。例えばこの掲示板ならテーマカラーもベースカラーも薄いオレンジでしょうか。続いて、アクセントとなる色を決めます。この色はあくまでもアクセントですから、あまり大面積を占めないようにします。この掲示板なら、薄い赤と薄い青でしょう。参考までに、Hotmailの場合は、テーマカラーが青、ベースカラーが白、アクセントカラーは黄色ということになります。
これは単純な意味で3色というのではなく、テーマカラーを青と決めたら、薄い青、濃い青などを用いるのは自由と考えてください。白黒赤青黄紫橙緑を使い、しかも各色の画面に占める面積が同じなどというデザインをしてはいけない（それで成功するのは初心者には困難）、ということなのです。
さて、とりあえず2点挙げましたが、いずれにしても必要となるのは見た目の統一ということになります。これを実現するために便利なのが「正しいHTMLの記述」と「CSSによる装飾」なのですが、ここではそれを勉強するのにおすすめのサイトを紹介するにとどめます。
［2002.05.25］
難しいんですよ。安易に使う方が少なくないのですが……。黒が悪いとは、私も思いません。ただ、お勧めはしません。世の中には白っぽいサイトが多いのですが、やはり白が一番簡単だと思います。余白部分の主張が「控えめ」なので、目立たせたい要素にばかり目がいっていても、そこそこまとまるのです。黒でいくという挑戦はよいとして、現状はそんなにうまくいっているとも思えません。……なお、やはりサイトのコンテンツについては再考を要するように思われます。
［2002.05.25］
ページの重さはマウスを当ててもわかりません。それはHTML文書のみのサイズなのです。ページを構成する要素すべてのファイルサイズを合計しなければ、ページのサイズは測れません。HTML文書、外部CSSファイル、外部スクリプト、画像ファイル、midiなど……数え落とさないようにするのは案外たいへんです。そこで、自動で計測してくれるツールがあります。
サーバーによって重さが異なる、回線の使用状況によっても異なる、という事実は案外見過ごされがちです。ファイルサイズが大きいとはとても思えないのに表示の遅いページ、経験がありませんか? じつは情報の受け手ばかりでなく、発信者側の回線の込み具合が、ページの重さに重大な影響を及ぼすのです。そうはいっても、ふつうはサーバーの変更は難しいですよね。どこのサーバーがいいのかというあたりも微妙です。だからせめてファイルサイズを小さくしましょう、ということになるわけです。［02.05.16］
リニューアルお疲れ様です。せっかくなので、更なる改善案を。見た目はほとんど同じですが、HTMLの記述はかなり簡単になっています。その理由は外部CSSファイルの利用です。文字サイズ、文字色、背景色といった装飾はCSSにお任せしているので、HTMLの記述は簡単になっているわけです。なお、大きな画像を縦横の指定で強引に小さく表示させると表示速度が無駄に遅くなるので、画像自体を小さくしてあります。［02.05.19］
外部CSSファイルでデザインを制御する利点は、ひとつのCSSファイルを変更するだけでたくさんのHTML文書の装飾を変更できる（つまりHTMLを変えずにデザインを変更できる）ということなんです。ですから、表紙にしか外部CSSファイルを適用しないなら、あまりいいことはありません。せいぜいHTMLの記述が簡潔になるという程度のことです。
さて、私の書いたCSSは単純なものですし、適用先のHTML文書も簡単なものですが、さりとて初心者にすぐ理解できるかといえばそれほど単純でもないというのが現実です。「メニューにあるセル内の色を変えたい」とのことですが、実際にはセルなどありません。セルが存在するように見えるデザインをしているだけなのです。
驚かれたかもしれませんが、そんなことまでできてしまうのがCSSのすごいところ。だんだんに勉強していただければと思います。私がCSSによるデザイン例を示したのは、「こうするべき」というのではなくて、「べんきょうされるとこんなことまでできますよ」という意図によります。ですから、慌てて難しいことに手を出す必要はないと思います。実物を見ていただいて、こんなものかと思っていただければよろしいかと。やはりゴール地点が見えていた方が勉強もしやすいと思いますので。
なお、ご質問の回答は以下の通り。
ul
{margin:0 0 0.5em; padding:5px; font-size:110%; list-style:circle inside; border:4px double #cc6600; border-top:none;}
とあるのを、次のように書き足してください。
ul
{background:#ffffff; margin:0 0 0.5em; padding:5px; font-size:110%; list-style:circle inside; border:4px double #cc6600; border-top:none;}
これでメニューリストの背景色が白になります。#ffffffの部分をいろいろ変えれば、背景色が変わります。［02.05.25］
ううむ、表紙を分けましたか……。以前の表紙、そんなに重かったかなあ、と疑問に思うのです。それに、現在のバージョンは2つに分けて余裕ができたのが裏目に出て、かなりいろいろと「余計な言葉」が増えてしまっています。必ずしも「さっぱりすっきり」がよいとは限りませんが、少なくとも現状は「ゴテゴテ」しているという印象です。私なら、デザインは新版を使うとしても、やっぱり表紙を2つには分けません。
現状維持にせよ、今から元に戻すにせよ、リンクの書換えはたいへんでしょう。そこでSpeeeeedを利用されることを薦めます。フリーソフトです。数十個のファイルに対して、ソース内のすべての<a href="aaaaaa.html">を<a href="bbbbbb.html">に書き換える、といった作業を一瞬でこなすことができます。リンク先が一気に切り替わるわけですよが、ポイントは複数文書を対象とした文字列の一括大量置換。これ、応用範囲は広いですよ。サイトの題名を変えたときとか、いろいろ使えます。［02.06.09］
余ったスペースの埋め方に苦慮されているようですが、インラインフレームを使ってしまえば、一気に手持ち札が増えますよね。掲示板とか日記とか、人気がありそうなコンテンツ、人気が出たらいいなというコンテンツを呼び出してしまえばよいのではないでしょうか。インラインフレームについては下記ページをご覧ください。通常のフレームをご存知でしたら、むしろ簡単だと思います。
ところで、可能ならわからない言葉は検索エンジンで調べていただけるとありがたいです。そのうちに自分にぴったりの解説サイトも見つかるのではないかと思います。（HTMLとCSSについては多かれ少なかれウソを教えるサイト（と書籍）がほとんどなので困るのですが／じつは今回、インラインフレームの解説を紹介した「お役立ちサイト」も「困る」サイトのひとつ）［02.06.09］
いつもお世話になっております。
さて、デザイン切替をどうやって実現しているのかというご質問の件ですが、いくつかの前提知識がないと、説明に困ります。ただし、特別なことは何もしておりません。HTML文書は、本来このようなことが可能なのです。
まずCSSはご存知でしょうか。（解説サイトはたくさんあります）そして外部CSSファイルの知識はございますでしょうか。
もしご存知でしたら話は簡単です。
私のサイトでは外部CSSファイルを複数用意し、JavaScriptでそれを切り替えることができるようにしております。
念のため、補足説明をいたします。
まず当サイトのHTML講座をご一読いただきたいのですが、HTMLには本来、書式情報が含まれておりません。ここは見出しです、ここは段落です、ここはリストです、といった意味付けはされていますが、「見出しが見出しだとわかるよう表現するにはどうしたらいいのか」については、HTML文書を解釈する側に任せられています。
視覚障害者がよく用いる「読み上げブラウザ」では、見出しはふつう、「大きな声でゆっくりと」読まれます。検索エンジンは見出しに含まれる言葉をとくに重視します。携帯電話では太文字で表現されるのが一般的です。PC向け視覚系ブラウザの多くは、大きな太文字で表示します。一部のテキストブラウザは、見出しを中寄せなどで表示したりします。
こうしてみると、見出しだから「大きな文字で表されるのが正しい」などと考えるのは、大きな間違いだと気付かれることでしょう。HTML文書を解釈する側に、そもそもディスプレイがあるかどうかさえ決まっていないのです。最終的な相手が人間とも限りません。検索エンジンの結果出力の順番決定プログラムのような、コンピュータソフトだってHTML文書のユーザなのです。
したがって、PC向け視覚系ブラウザでの見た目だけを考えてHTMLで何らかの見た目を表現しようとするのは愚かなことです。
こうしたHTMLの原点に返り、「HTMLでは文書の構造だけを決め、書式情報を一切捨て去ること」……これがデザイン切替えの重要なポイントです。
書式情報を全部捨て、見出しや段落や箇条書きといった文書の構造だけを記述すると、HTML文書は軽く、すっきりしたものになります。と同時に、PC向け視覚系ブラウザで見た場合に、見た目しか考えていないよそのサイトに比べて見劣りがするようにもなってしまいます。
そこで使うのが外部CSSファイルです。HTML文書がPC向け視覚系ブラウザで表示される場合だけ、あたかもHTML文書に服を着せるように、きれいなデザインを実現するものです。（注意：CSSの仕様は幅広いものであり、読み上げブラウザ用のCSSや印刷用のCSSもある。ただしほとんどのCSS解説サイトでは、PC向け視覚系ブラウザにおける表示制御の部分しか解説していない）
さて、私は「服を着せるように」と書きました。CSSは服のようなものですから、何着も用意しておけば「着せ替える」ことができるはずです。ところが残念なことに、Internet ExplorerではCSSの切替え機能を実装していません。（Mozilla、Opera、NN6以降などはCSS切替え機能があります）
仕方がなく、IEではJavaScriptでCSS切替えを実現することになります。
以上の説明で、私が何をやっているのかはおわかりいただけたことでしょう。書式情報のないHTML文書を用意する。そこにCSSファイルを着せる。HTML文書に見た目の指示がないので、純粋にCSSファイルの記述次第で見た目がすっかり変わります。
デザインを切替えてTOPに戻ると、そこも同じく選んだデザインになっている、というのは、最後のデザイン選択をパソコンに記憶させているからです。JavaScriptが無事に動いていれば、1ヶ月程度は記憶が残るはずです。
とにかく、デザインががらっと切り替わるサイトを作るためには、従来のサイト作成法を捨てる必要があります。サイトの見た目はすべてCSSファイルに任せて、HTMLは文書構造（どこが見出しか、どこが段落か、など）の記述だけに使う必要があります。HTMLで見た目を少しでも決めてしまうと、その部分はどのCSSを使っても変化させられません。HTMLでの指定が優先だからです。
というわけで、CSSを切替えるJavaScriptがほしいということになるでしょうが、HTML文書の正しい作成法（じつは書式情報などないのがHTML文書本来の正しい姿）と外部CSSファイルへの一定の知識がないと、ほとんど意味がありません。
その辺りをお勉強なさったら、またメールをください。［2002.08.13］