はじめに

サイトの紹介です。

他のページに行くときの操作方法や各ブラウザでの解説などを書いています。

このサイトについて

創作関係のネタを公開しています。最初は1/6スケールの人形や小道具をメインにしてましたが、オリジナルの宇宙船模型やPCネタが多くなりました。

HTML5で記述し、CSS3で外観などを指定してます。

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

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

操作方法

画面は、ウェブブラウザの幅が960ピクセル以上の場合です。

ナビゲーション

各ページの上と左に、他のページにいくためのメニュー(ナビゲーション領域)があります。

画像はWindows7+Firefox19.0.2の表示です。少し古い画像ですが、基本的な見た目はほとんど変わってません。

左から最上部にかけて、赤枠内の部分がナビゲーションの領域です。

ウェブブラウザの幅が960ピクセル以上の時、画像のような感じになります。

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

一番上がグローバルナビゲーションです。サイトを大きく5つの項目に分けています。

Home
トップページ
イベント系
ガレージキットイベントの告知や報告、通販
創作系
模型、ドール、PC関係ネタ
文章ネタとリンク集
案内
サイト紹介や注意事項など

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

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

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

左上にはパンくずリストがあり、Home(トップページ)からの位置を階層構造で示します。

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

この左側の部分は、現在の場所に固定表示されます。そのため、スクロールしてもこの部分はページ内に残ります。

パンくずリストの「00.ページ先頭」をクリックすると、ページの先頭に戻ります。キーボードのHOMEキーを押しても(多くのブラウザで)先頭に戻ると思います。

連続記事参照

ページによっては連続記事参照の項目が現れます。

分割して公開している記事の時、前後の記事へリンクしています。

画面

中間幅のスタイル

ブラウザの幅が959ピクセル~661ピクセルの場合、ナビゲーション領域の幅が少し狭くなります。

幅の広いとき(960ピクセル以上)と、特に変わりなく見えると思います。

狭い幅のスタイル

幅が660ピクセル以下だと若干変わります。

グローバルナビゲーションの左端にあった「Home」が消えます。

パンくずリストは横型になります。「Home」はパンくずリストの最初に表示されます。

パンくずリストと連続記事参照は、ページの一番上に固定されます。

ページの一番下まで読んだら、キーボードのHOMEキーを押して一番上に戻ると楽です。この機能は環境やブラウザによって違いがあるかもしれませんが。

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

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

代替スタイルシート

「2nd」という名前の代替スタイルシートを用意しています。

黒背景に白文字、文字は等幅、プルダウンメニューは無し。パンくずリストと連続記事参照はページの一番上、タイトルの下にあります。グローバルメニューとページ内ナビゲーションは、リストの形で最後に表示されます。

IEは、8以降に切り替え機能があるようですが、このサイトではIE10以降で使えるようにしています。

フォントの種類と大きさ

お好みで

環境や見やすさは人によって違うので、こちらでは基本的に決めていません。いくつかの要素に等幅、学名にセリフ書体を指定しているくらいです。

フォントの具体的な種類や大きさは、ご自身でブラウザを設定してください。デフォルトの指定が見づらければ変更しましょう。

このサイトでは本文の大きさを基準にして見出しの大きさなどを指定しています。本文のフォントが大きくなれば見出しなども大きくなります。基本になる本文の大きさはfont-size: mediumと指定しているので、ブラウザでの指定がそのまま反映されるはずです。

例外:IEへの対応

例外としてIEの場合、フォント関係でいくつかの指定をしています。

  • pre要素内は等幅フォント「MeiryoKe_Gothic」「IPAゴシック」「VL ゴシック」「MS ゴシック」を指定
  • IE9までは、基本になるフォントサイズにsmallを指定

pre要素内への指定

pre要素内で罫線素片などを使っている場合、少なくともIE11~7で表示が乱れるのを確認しています。IEでpreタグの中身がずれてしまう問題の解決方法 - Fores Labsという2008年2月の記事がありますが、この辺が関係している様子。

ネットで公開するウェブページに具体的なフォントファミリー名を(和文フォントは特に)指定するのは抵抗があるのですが、IEに限っては仕方ないと言うことで実行しました。全バージョンのIEのみ指定するため、JavascriptでレンダリングエンジンがTridentのみ、等幅フォントを指定するCSSを読ませるようにしています。

これで、インターネットオプションの全般タブ→ユーザーオプションの「Webページで指定されたフォントスタイルを使用しない」にチェックが入っていなければ、問題なく表示されると思います。

「MeiryoKe_Gothic」「IPAゴシック」「VL ゴシック」「MS ゴシック」は確認しました。「VL ゴシック」はちょっと気になる点がありましたが、特に問題は無いです。

IE9以下で基準フォントの大きさを指定

IEの場合、デフォルトのまま使うのが普通かなあと思うに至り、こちらで変更することにしました。

IE10以降は、FirefoxやOpera、Google Chromeなどと同じくfont-size: mediumの指定です。

インターネットエクスプローラーへの対応

各バージョン

できるだけ上位の最新バージョンをお勧めします。いろいろあってそうもいかない方が結構いそうな気がしますが。

IE10以上の場合

IE10以上ではFirefoxやOperaなどと同じCSSファイルが読み込まれます。Windows7用IE11で確認しています。

IE7、8、9の場合

画像はIE11の開発者ツールで再現した、IE9での表示です。中間幅のスタイルを元にし、さらに簡略化しています。

ページの内容が変わっても配色は緑系のまま変わりません。幅を変えてもスタイルは変化しないので、かなり狭めた場合は表示が崩れると思います。

JavascriptでHTML5の新要素を生成しています。そのため、JavascriptがONになっている必要があります。以前は html5shiv-printshiv.js を使いましたが、今は単に document.createElement で要素を作っているだけです。

IE7、8、9の表示確認には、IE11の開発者ツールを使っています。ただ、ほとんど確認していません。古いこともあり、使用はお勧めできません。

IE6以下の場合

IE6以下は非対応です。ブラウザ自体が古いうえ、対応しているWindowsも延長サポートが終了し、継続使用は危険な状態になっています。

全バージョンで

一部のウェブページで、IEのみJavascriptを使い、pre要素内でフォントファミリー名を指定するCSSを読み込ませています。

Firefoxへの対応

制作者本人がメインブラウザとして使っています。サイトの作成はFirefoxでの表示を基本にしています。

Operaへの対応

Blink版(2015年01月16日現在26.0.1656.60)、Presto版(12.17)共、特に問題は無いと思います。

2015年1月にアクセスログを見たら、Presto版Operaでのアクセスがあったのでちょっと驚きました。Blink版とは別フォルダにインストールし、確認するようにしました。

他のブラウザの場合

基本的に最新版で

機能追加やセキュリティ問題などあるので、最新版をお薦めします。

謝辞

CSS

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

外部リンクを示すアイコンに100 External Link Iconsを使い、CSSで指定しています。License & Terms of Useにあるとおり、個人や商用利用(Web、印刷共)が無料で可能になっています。ありがとうございました。

フォント

画像の一部に、フリーのフォントを使用しています。

COM4t (Font Factory Field)のフリーフォント
COM4tで配布されているアルファベット、数字、記号のフォント。COM4t Fine RegularSpirequal Lightが特に好み。
IPAフォント
独立行政法人情報処理推進機構(IPA)で配布されているフォント。ダウンロードのページにあるライセンスに同意してから入手。日本語文章の表示に適したIPAexフォントもあります。

安心して使えるフォントを作成し提供してくださっている作者さんに感謝です。ありがとうございます。

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