ようやく今日から正式にスタートします。
いやー長かった。
せっかくなので、ここにたどり着くまでに何故これほど苦労したかをまとめておこうかと。
興味がない人はスルーの方向で。
このサイトを作るにあたって、デザイン面でいくつか決めていたことがありました。
- サイトタイトルが「空色図書館」なので、青をベースにする
- 文字の大きさは見る人が自由に変えられるようにする
- 本文の背景に白を使わない
- 使う色はウェブセーフカラーにする
- 現在のWeb標準に基づき、HTMLとCSSを組み合わせてデザインする
- あらゆる環境で同じように表示させる
(1)に関しては、サイトタイトルは「空色図書館」だとはっきり決めてたので迷うことはありませんでした。
(2)の「文字の大きさは見る人が自由に変えられるようにする」は、最近のサイトに対する不満でもあります。
最近のサイトって、たいてい文字が小さいんですよね。
特にブログとかは、なぜそこまで小さくする必要があるのかと叫びたくなるくらい小さいことが多く、しかもそうしたサイトに限って文字の大きさが固定されていて、ブラウザ(今ホームページを見るのに使ってるソフト)で変更することができない(Internet Explorerの場合)。
僕は誓いました。
自分でサイトを作るなら、絶対文字の大きさは自由に変更できるようにすると。
試しにブラウザのメニューで文字の大きさを変更してみてください。
このサイトなら、あなたのお好みの大きさに変えることは造作もないことです。
ここまでは特に苦労はありませんでしたが……問題はここからでした。
(3)「本文の背景に白を使わない」は、メインを小説にすると決めたからです。
パソコンの画面は光っているわけで、一番明るくなるのは白なんですよね。
となると、画面に白が多ければ多いほど眩しくなり、目に負担がかかることになります。
小説を読んでもらう関係上、どうしても画面を見る時間が長くなりますので、なるべく目への負担が減るように、白を背景に使わないと決めたわけですが……。
(4)「使う色はウェブセーフカラーにする」が立ちはだかりました。
「ウェブセーフカラー」の意味が分からない人は、無理に知ろうとしなくてもいいくらいの死語に近い用語ではあるんですが、とりあえず初めて公開するのでこだわっておいた方がいいかなと思い、自分に課したルールでした。
しかし、想像以上に使える色が少なくなってしまい、えらく苦労しました。
背景が白以外で黒い文字と合うのは黄色くらいしかなく、メインカラーと決めた青との間で最後まで悩みましたが、結局読みやすさ優先で黄色の背景になりました。
(5)「現在のWeb標準に基づき、HTMLとCSSを組み合わせてデザインする」に関してですが……これはもう完全に技術の話で、利用者には全く関係ない話ではあるんですが。
分かりやすく一言で言いかえれば、「メンテナンスを楽にしよう」。
以下はHTMLが分かる人向けです。
僕もHTMLを勉強し始めた頃は、とにかく表示されればいいだろうと思っていました。
文字を強調する時は<b>、文字の大きさを変えるときは<font size>、本文の枠組みは<table>でした。
特に僕が勉強し始めた当時は<table>でレイアウトするのが全盛でしたし、作る側にとって直観的で分かりやすくて良かったんですね。
しかし時代は変わり、正しくHTMLでマークアップしてCSSでレイアウトするメリットが見えてきたことで、僕もやるしかないなと踏ん切りをつけました。
ところが、一度見についた習慣を変えるのは案外大変で、適切なマークアップができているかは今も自信がありません。
ただ、メンテナンスの面での効果は絶大で、今勉強し直してよかったなとは思います。
後はもうちょい素早く更新できるようになれればなあ(笑)。
(6)「あらゆる環境で同じように表示させる」は、利用者が思う以上に想像を絶する難しさです(笑)。
現在一番多く使われているブラウザは、Windowsに初めから入っているInternet Explorerで、今年3月の調査だと利用率は65%ほどでした。
次に多いのはFirefoxで約20%、その次はMacに初めから入っているSafariの約8%、残りはChrome、Opera、Netscape Navigatorが1%程度といったところです。
未だInternet Explorerが多く、これを見てる人もおそらくInternet Explorerを使っている人がほとんどだとは思いますが、実はホームページを作る人にとって一番厄介なのがInternet Explorerなんですよね……。
一番多く使われていることによる傲慢さがそうさせるのかどうかは不明ですが、Internet Explorerはバグがかなり多いんです。
分かりやすい例を挙げましょう。
本文の黄色い枠は真ん中に揃っていますよね。
これって、正しいやり方だと少し古いInternet Explorerでは真ん中に来ないんです。
正しいやり方で上手くいかないことがIneternet Explorerではとにかく多くて、何度パソコンを殴りつけたくなったか分かりません(笑)。
色々な裏技を駆使して、ここ十年くらいで購入したパソコンならどうにかちゃんと表示されるようになったはずです。
ここまで苦労話ばっかりしてきましたが、こんなに苦労したのは、あくまで妙なところでこだわりすぎたせいです。
ホームページビルダーやDreamWeaverなどのソフトを利用すれば簡単に作れますし、今ならブログで金も手間をかけずに作ることができます。
僕はソフトを買わないで自作することにこだわったんですが、理由はただ一つ、お金をかけたくなかったから。
僕のように一から自作するのは必ずしもオススメできる方法ではありませんが、ソフトだけでは対応しきれないこだわりを発揮することができます。
参考にしたホームページなどは
「リンク」ページに載せておいたので、これから作ってみたい人に少しでも役に立てばうれしいです。
ちなみに本当に金をかけずにホームページを作れたかというと……実はそうでもなかったり(笑)。
やっぱり本の力に頼らざるを得ないんですよね。
ネットに頼り過ぎてはいけないことが身に染みて分かりました。