サイトの仕様

XHTML1.0+CSSで作成しました。文字コードもこれまでのShift_JISからUTF-8に変更されています。

  • DOCTYPE:XHTML 1.0 Transitional(一部古いファイルは、HTML4.01 TransitionalおよびFramesetとなっています)
  • Charaset:UTF-8(フォームはエンコードの関係でShift_JISのまま)
  • Language:ja(日本語)

CSS(カスケーディング・スタイル・シート)について

デザイン・レイアウトの全てを外部CSS(カスケーディング・スタイル・シート)で行っています。

一部フォントサイズに絶対単位(pt,px)を用いていますが、本文部分は相対単位(emや%)で指定していますので、ブラウザ側でのサイズ変更が可能です。

スタイルシートを複数用意しました。読みにくい場合などは切り替えをお願いします。

2014年9月7日追記:
スマホ対応で、本来なら画面(可能なら画像も)幅可変にしてCSSで切り替えるレスポンシブWebデザインにすべきところですが、スタイルスイッチャーとの兼ね合いで、まだ手がつけられていません。
当面は「スタイル:OFF」で画面幅可変でフォントサイズを大きくした表示がされるようにしました。
本来の「スタイルシート:OFF」ではなくなってしまいましたがご容赦ください。

CSSの切換え機能が装備されていないブラウザの方は、ページ右上にあるボタンでお選びください。
(JavaScriptを有効にする必要があります)各スタイルは下記のとおりです。

  • GRAPHIC」……メインのデザインです。本文背景に写真が配置されています。
  • DARKRED」……「GRAPHIC」の本文背景から写真を消したものです。EGO[イーゴ]のサイトカラーであるダークレッドの背景です。
  • SIMPLE」……背景色をモノトーンに抑え、画像も極力減らしたシンプルなデザインです。
  • OFF」……ほぼHTMLのみでデザインのない状態となります。スマホ向けに画面幅90%、フォントサイズも大きくしてあります。(20140905変更)PCではブラウザで表示フォントサイズを変更すると、すべての文字が拡大/縮小します。
  • その他……供物のページでは「DARKRED」のかわりに「ORANGE」を、小説ページは共通で紙のテクスチャを配置した「PAPER」が選択できます。

※CSS切換えにはJavaScriptを使用しています。JavaScriptをONにしてご使用ください。

※選択したスタイルはクッキーによって記録されます。クッキーを許可する設定にしておくと、次のページへ移動した際も同じスタイルが適用されます。

GO TO TOP

JavaScript

本サイトでは上記CSS切換え以外にも、メールアドレスの表記、スムーススクロールなどにJavaScriptを使用しています。OFFでも通常の閲覧には問題がないようにしてありますが、特に支障がない場合はONにしてご覧ください。

使用しているJavaScriptの一部はWEBで公開されているものを利用させて頂きました。

  1. CSS切換え──『styleswitcher.js』
    A LIST aparthttp://www.alistapart.com/)内
    Topics > Code > CSS > Alternative Style: Working With Alternate Style Sheets ……Download styleswitcher.js
    ※記事がなかなか見つからない場合は、上記サイト内でstyleswitcher.jsを検索するといいかと思います。
  2. スムーススクロール──『smoothscroll.js』
    to-Rhttp://blog.webcreativepark.net/)内
    http://blog.webcreativepark.net/2007/07/12-143406.html
  3. テキストのポップアップ──『popup.js』を改変して使用
    Electronic-cottagehttp://www2f.biglobe.ne.jp/~e-cottag/)内
    http://www2f.biglobe.ne.jp/~e-cottag/computer/software/js/popups/
  4. 文章折り畳み(表示・非表示切換え)──改変して使用
    penguin-19http://www.kiwi-us.com/~mizusawa/penguin/)内
    http://www.kiwi-us.com/~mizusawa/penguin/html_hint/javascript/java_s_showhide.html
  5. IEでドロップシャドウ──『css3shadow.htc』IE6に対応していないため未確認
    ppBloghttp://p2b.jp/index.php)内
    http://p2b.jp/200909-IE-CSS3-Dropshadow

推奨画面表示サイズその他

PCモニターは言うに及ばず、ネットブックやスマートフォン、PDA、iPhone/iPadなど、WEBブラウズ可能な機器が軒並みワイド化・高解像度化していることに伴い、今回から推奨画面表示サイズをXGA(1024×768pixels)としました。

  1. 第一階層の各ページ(→サイトマップ参照)は横幅900pixelsで固定となっています。
  2. 「物語」や「供物」などのコンテンツ(それぞれデザインの異なるページ)では横幅を相対指定(%)にしていますので、これまで通りのSVGA(800×600pixels)に収まります。
  3. トゥルーカラー(約1670万色/24bitまたは32bit)を前提に作成しています。ディスプレイの色深度が足りない場合、画像が荒れて表示される場合があります。
    ※モニターやブラウザの色味を見るための参考に⇒カラーチャートはこちら(WEBページ作成時の色指定にも使えますw)

※2010.09.22追記
2010年8月から約一月間のアクセス解析では、横幅1024pixelsに満たない画面表示サイズでブラウジングされている方は全体の8.8%、800pixelsに満たない方は全体の6.5%でした。けして少ない数だとは思いませんが、PCモニタでご覧頂くことを前提にしたサイトのため、ご了承ください。スタイルシート・オフでご覧頂ければ幸いです。

動作確認

下記OS,ブラウザにて動作確認を行っています。

[Mac OS X 10.4]

・Camino 2.0.4 ・Safari 4.0.5 ・Internet Explorer 5.2 ・Firefox 3.6 ・Opera 9.64

[Windows 2000]

・Internet Explorer 6.0 ・Firefox 3.0.1 ・Safari 3.2

[Mac OS9]

・Netscape 7 ・Internet Explorer 5.1

※文字サイズを大きくするとデザインが崩れることがあります。

※IE5では、ページの読み込みに時間がかかり、レイアウトが他のブラウザと若干異なります。横幅800pixelsでは表示が崩れる場合があります(幅900pixels以上では問題ありません)。また、スタイルシートを切り替えた際、一部文字が見えなくなることがありますが、ブラウザの更新(再読み込み)で再表示可能です。

※Safari for Windowsの動作環境にWin2000は含まれていません(無理やり動かしています)。Win2000+Safari3の組み合わせでは物語ページのスタイル切換えボタンが横にずれます。

※IE7,IE8での検証ができていません。表示に問題がある場合はお知らせ頂けると幸いです。

※フォントの表現を確認するために、Win/Mac相方のフォントリストを作成しました。参考までに⇒フォントリストはこちら(WEBページ作成時のフォント指定にも使えますw)

GO TO TOP

制作環境

ロートルなマシン環境に逆に顕示欲をそそられ(w)、主なハードウェア、ソフトウェアを記載しておきます。

[ハードウェア]

  • メインマシン──Apple Power Mac G4(QuickSilver 2002) 933MHz
    Mac OS X Tiger 10.4.11/Mac OS9(9.2)
  • 動作確認用───TOSHIBA Dynabook 250PX(Special Thanx! for ぐーぐらー)
    Windows 2000 proffesional SP4
  • 周辺機器────EPSON GT9000(スキャナ/SCSI!!!!),WACOM ET-0405-U(ペンタブ),Canon PowerShot A590 IS(デジカメ)

[ソフトウェア]

  • HTML作成──mi 2.1.9r1(テキストエディタ ※全て手打ち)
  • サブエディタ──Jedit X 2.20(テキストエディタ/主に複数テキストファイルの一括検索・置換用)
  • 画像作成・編集─Adobe Illustrator 10.0.3,Photoshop 7.0.1,ImageReady 7.0.1
  • サブアプリ───TextConv-J(HTML⇔テキスト変換)
    MultiTextConverter 3.5.4(文字コード変換)
  • 文章作成────:mi(テキストエディタ)

参考図書

WEBには、HTMLやCSSに関するありとあらゆる情報が存在しています。検索の手間さえ惜しまなければ、HTMLの基礎からCSSを用いた複雑なレイアウトの仕方まで、多種多様な情報が得られます。また、フリーのスクリプトやプログラム、Tips的なアイデアもたっぷりアップされています。
ただ、実際にマークアップしていく時に、パパっと開いて調べることの出来る書籍の方が簡便で楽な場合も多々あります。
……というわけで、参考にしたHTML関連のガイドブックを紹介。(いつも凄く助けられているので)

  • HTML CSS JavaScript ホームページ辞典(アンク:著 SE 翔泳社)
    これまでも同じ著者の同じシリーズの本を何冊か買っていますが、これは(X)HTML,CSS,JavaScriptの3つのリファレンスを一冊にまとめたもの。ぱっと引ける簡便さと分かり易さは相変わらず。主要なタグやマークアップの方法が調べられて、お得&便利。
  • WEB標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
    (加藤善規、平澤 隆、両見英世:著 インプレスジャパン)
    Web標準に沿ったページ作りのために手に入れた本。WEB標準の意味やそのメリットについての理解が深まりました。適切なマークアップを行うことを目的として書かれているので、やや教条的な部分もあるけれど、CSSデザインのサンプルとして使うだけでも十分意味はあると思います。

GO TO TOP

WEB標準とバリデーションについて

HTML4.01やXHTML1.0では、HTML本体からデザインや装飾的な要素を排し、純粋に文書構造に沿ったコーディングを行うことが望ましいとされています。

正しい文法で記述し適切にマークアップしたHTMLはデータ処理に適しているだけでなくメンテナンス性にも優れ、またSEO対策としても有効なようです。さらに、標準化された書式をブラウザがサポートすることで、ブラウザに依存しないページとなることもメリットとされています。

そんなわけで、遅ればせながら当サイトも、可能な範囲でWEB標準に沿った(X)HTMLに変更しました。

文法チェックには、Another HTML-lint gateway(外部リンク)と、Firefoxのアドオン(プラグイン)であるHTML VALIDATOR(外部リンク)を使用しました。
※判定にはアドオンが便利だけど、firefoxでソースを開いて確認するよりAnother HTML-lint gatewayを利用する方が簡単だし(日本語だしw)詳しい。Firefoxでページを表示し、×がついたファイルをAnother HTML-lintで調べるという手順で作業しました。

新たに作ったファイル、完全に修正したファイルについては、文法チェックをクリアしていますが、「EGO大辞典」その他、一部のファイルは最低限の修正にとどめたため、文法的に正しくないファイルが残っています。
また、文法的チェックはクリアしたものの正しく構造を記述していない部分も多々あります。

ただ、これ以上こだわるつもりはありません。
元々、論文や技術マニュアルを書いているわけではないし、そもそも私の目的はvalidなHTMLを書くことやSEO対策に本腰を入れることではないので……。

当然のことですが、せっかく作ったサイトだから多くの人に見てもらいたいし、ちょっとした仕掛けやデザインで、「を!」って思って貰いたいという気持ちはあります。
そうでなくとも、最低限自分で納得の行く見栄えを実現したい。
でも、「どーだvalid凄いだろー」ってことには、ならないと思うんですよね。

そもそもEGO[イーゴ]は「ちょっとHな物語」を公開するサイトで、メインで提供するのは飽くまでテキストです。
ブラウザで表示されたHTMLからテキストだけを抽出して保存するのはそう難しいことではないし、だったら余計に、データの使い回しや構造的な意味にこだわる必要もないんじゃないか、とも思います。

というわけで、確かに「標準化」には意味があると思うし、正しい文法であるに越したことはありませんが、かなりグダグダなままの公開とさせて頂きます。

(2010.05.28)

GO TO TOP

古いファイルを修正するより、一から新しいもの作った方が楽……w CMSとか使いたくなる気分がよくわかった。