サイトの紹介です。

このサイトについて

創作関係のネタを公開しています。1/6スケールの人形や小道具の他、オリジナルの宇宙船模型があります。

「くーまる」というのは、昔「PostPet」を使ってたときの、ピンクのクマ（モモ）に付けた名前です。1998年頃だったような。「熊」＋船などで付けるなんとか丸（コバヤシ丸とか望星丸とか）の「丸」で、「くままる」→「くーまる」となりました。それをサイト全体のタイトルにしてみたわけです。

現在、このウェブサイトと「くーまる」とは何の関係もありません。イメージキャラクターにしてるわけでもなし。ダメなネーミングの一例かも。

XHTML1.0 Strictで記述し、CSS2.1（一部はCSS3）で外観などを記述してます。JavaScriptなどは使っていません。

閲覧について

ナビゲーション

各ページの左上にナビゲーション領域を設けてみました。

グローバルナビゲーション、パンくずリスト、ページ内ナビゲーションの3つの領域をおいています。ページ内容によっては連続記事参照の項目も出てきます。

横一列に並んだグローバルナビゲーションは採用しているサイトも割と見かけるので、使うのに悩む事は少ないかと思います。縦型表示のパンくずリストやページ内ナビゲーションはあまり見ないので、判らない方が多いかもしれません。

CSS3のメディア属性等に対応したウェブブラウザでの閲覧を対象にしています。Firefox3.6以上、Opera10以上、Safari4以上、Google Chrome4.1以上ならたぶん大丈夫だろうと思います。

CSSの記述については、バシャログ。の[使える CSS テクニック] CSSで実現するプルダウンメニューが大変参考になりました。ありがとうございました。

広めのスタイル

広めのスタイルです。ウェブブラウザの幅が960ピクセル以上で適用されます。画像はFirefox3.6.13での例ですが、Firefox7やOpera11.01でも確認しています。

左上、赤枠の部分がナビゲーションの領域です。ページをスクロールしてもこの位置に固定されます。

グローバルナビゲーション（プルダウンメニュー付き）

一番上がグローバルナビゲーションです。以下の5つの項目があります。

色が変わっている項目は、現在表示されているページが属している項目を示します。

Homeを除く項目にマウスポインタを合わせると、プルダウンメニューが展開し、1段細かい項目にジャンプできます。

パンくずリストとページ内ナビゲーション

左側にはパンくずリストがあり、Homeからの位置を階層構造で示します。一番上のHomeはグローバルナビゲーションの項目も兼ねており、トップページの目次のところにリンクしています。

パンくずリストの項目の左にある印は、不等号記号から下向き三角1個に変更しました。

左側の一番下はページ内ナビゲーションです。今読んでいるページ内の各見出しにジャンプします。

ページ内ナビゲーションの青い印

グローバルナビゲーションのプルダウンメニューでは、トップページから次のページに行くのに使えますが、それ以降に行くにはページ内の目次などから行く事になります。目次を見つけやすいよう、以下の機能も付けてみました。

ページ内ナビゲーションで、左側にある丸い印の色が青のところは、他のページへの目次がある事を示しています。

目次がある大抵のページは、どこに目次があるか判ると思いますが、中には判りにくいページもあるので、このようにしてみました。他のページに行くための参考になれば。

連続記事参照

ページによっては連続記事参照の項目が現れます。分割して公開している記事の時、前後の記事へリンクしています。

中間のスタイル

中間スタイルです。ウェブブラウザの幅が661ピクセルから959ピクセルで適用されます。

広めのスタイルの時と見た目が若干変わりますが、使い方は変わりません。

ブラウザの幅が短くなると、各ナビゲーションが見出しや本文にかかって読めなくなる場合があるので、そのための措置です。

狭めのスタイル

狭め用スタイルです。幅が660ピクセル以下で適用されます。

グローバルナビゲーションはプルダウンメニューが働かなくなり、項目から「Home」が消えます。

パンくずリストは縦形から横形になります。

ページ内ナビゲーションは表示されなくなります。

連続記事参照は二行になって表示されます。

この辺は未だ勧告版がでていないCSS3を使っているので（メディアクエリーの記述自体、これ書いている時点でまだ勧告候補みたい）、将来書き方が変更される可能性もあるんですね。とりあえずIEを除く主要なウェブブラウザで現在使えるとのことなので使ってみました。

こんなごちゃごちゃしたのはいらねー！って方はCSSを切ってみてください。各ナビゲーションは、コンテンツの最後にリストとして表示されます。

お使いのウェブブラウザ（もしくはOS）で文字の設定がかなり大きい場合は、ウェブブラウザの幅に関係なく、中間や狭めのスタイルが適用される可能性があります。

インターネットエクスプローラーの場合

IE8以前はちょっと異なるスタイルを適用しています。IE7やIE6ではうまく適用されているかどうか。

IE9以降は妙なことをしなくてもよくなりますように……。

IE8の場合

IE8の場合です。CSS3のメディアクエリーに対応していないので、ウェブブラウザの幅が中間の時のスタイルを適用させています。他にも少々修正かけたような気がします。

CSSのcontentによる内容生成でユニコード文字（◀横向き三角▶）が出なかったんで、不等号記号に代用したとか、そんなもんだったような。

IE7の場合

IE7の場合です。IE8と似た感じになるよう手を加えていますが、パンくずリストなどで使っている記号（>>とか●とか）が表示されません。IE7が対応していない機能を使っているので、この辺はどうしようもないのでした。

あと、記事によっては色合いが変わるようになっているのですが、IE7以前のスタイルはそれに対応させていません。

なお、IE7とIE6の表示確認は、IE Testerを使ってチェックしています。IE5.5は古すぎるので確認していません。

IE6の場合

IE6の場合です。IE Testerによる再現ですので、細かい点で異なる箇所があるかもしれません。

古いウェブブラウザなので対応していない機能も多く、簡単な表示にしました。

ナビゲーションは、ページの最後に出てきます。この場所ではグローバルナビゲーションとページ内ナビゲーションは必要ないと思い、表示しないようになっています。

IE6は非常に古いため、他のウェブブラウザに移行することをお勧めします。

ナビゲーション無し

標準にしているナビゲーション領域付のは「1st」というスタイルシートで指定しています。ナビゲーション領域が邪魔という場合は、別のスタイルシート「2nd」を指定して下さい。指定の仕方はウエブブラウザによって異なるほか、スタイルシートの切り替えに対応していないウェブブラウザもあります。

2011年11月現在、「2nd」は背景が黒で文字を白に指定しています。各ページへのリンクは、下の方にリストとして表示されます。

推奨環境とか

XHTMLやCSS2.1にきちんと対応したウェブブラウザなら特に問題なく閲覧可能だと思います。CSSの機能を切っても見栄えがウェブブラウザのデフォルト表示になるだけで、閲覧自体に支障はないと思います。

何を使うにせよセキュリティ対策はできる限り行うことを強くお勧めします。IE6等の古いウェブブラウザをお使いの場合は8以降のIEにするか、FirefoxやOpera等別のウェブブラウザへの移行をお勧めします。

フォントの大きさ

CSSで基本的な文字の大きさをmedium（標準サイズ）で指定しています。これにより、本文の文字の大きさは、お使いのウェブブラウザで設定している大きさになります。

見出しなどは基本の2倍や1.4倍、1.2倍というように、相対的な大きさを指定しています。

全体に文字が小さい、もしくは大きいと感じたら、お使いのウェブブラウザの設定を変えてみてください。最善の文字の大きさは、閲覧者の状態やモニタなどの環境によって一人一人異なっていると思いますので、固定サイズでの指定はしていません。

こちらの表示確認環境

表示確認にはFirefox*1を以下の設定で使っています。OSはWindowsXP SP3を使っています。

Operaの最新版に近いバージョン*2や、Internet Explorer8でも確認するようにしています。IETester0.4.11を使い、IE6、7モードでも確認するようにしました。IE6のCSS対応具合の酷さがわかるほか、IE8でもPNG画像の扱いが酷いのがよくわかります。CSSでPNG画像を使うときは、ガンマ値情報を削除しないとみっともないことになるとは……。

*1
2011年12月11日の時点で使っているのは8.0.1です。
*2
2011年12月11日の時点でインストールしているのは11.60です。

リンクする場合などにお使いください。保存してお使いくださった方がいいかもしれませんが、この画像に限っては埋め込みリンクとして使っていただいても構いません（バナー画像以外の埋め込みリンクはお断りしています）。サーバによっては画像の外部からの呼び出しを禁止してるところがあるので、そういうところに引っ越した時のことを考えると保存した方がいいかもってくらいの話です。レンタルサーバを変わる可能性は常にありますので。

謝辞

バナー画像やイベントでの頒布物に、フリーのフォントを使用しています。

COM4t (Font Factory Field）のフリーフォント
COM4tで配布されているアルファベット、数字、記号のフォント。Read Meに説明があります。COM4t Fine RegularとSpirequal Lightが特に好み。
Chopin Script
dafont.comで配布されている筆記体のフォント。アーカイブファイルにはフォントファイルしかありませんが、公開しているページに「Public domain / GNU GPL」とあります。
IPAフォント
独立行政法人情報処理推進機構（IPA）で配布されているフォント。ダウンロードのページにあるライセンスに同意してから入手。日本語等に対応し、自由に使えるということで、非常にありがたいです。

自由に使えるオープンソースの日本語フォントで調べることができます。安心して使えるフォントを作成し提供してくださっている作者さんに感謝感謝です。ありがとうございます。

他にも様々なフリーソフトウェア、フリーソフト、市販ソフトを使ってます。情報も、様々な書籍やサイトなどを使っています。ありがとうございます。