一日パソコン教師

ホームページの足場作り2

2/2ページ:最初のページ

2004年7月24日

ターチさんのパソコンはデスクトップ型じゃなくてノート型だった。しかし、解像度はメチャメチャに高く、1600×1200ピクセル表示である。試しに ASHINOKO ONLINE を全画面表示にしてみると、余白がやたらに多くてなんかみすぼらしく見えた。

「文字がちっちゃいね。1600×1200表示でデフォルトのままだと見にくいでしょ」

「文字がちっちゃいページの時は拡大するけど・・・」

「どれどれ・・・、あれま、(中)を(最大)にしてもこんなもんなの? Windows の IE って親切じゃないな。Mac の場合は見出しの文字を視力テストの(0.1)ぐらいまで簡単に拡大できちゃうんだよ」

ここでまずアタシのコンセプトを説明する。ページ作りをする際に重要視することは、これから日本が迎える「高齢化社会」に対応していて、しかも、今よりもっと進んだ「モバイル社会」にも適応していることだ。つまり、文字をバカデカクしてもレイアウトが崩れにくく、ケータイでも問題なく読めるページを作るのである。

試しにアタシが作っている庄治郎丸を見てほしい。Windows の基本設定をいじらず、全画面表示で見ている人は『なんか文字がアンバランス』と感じるだろう。でも、これが正しいのである。ちゃんと見られるから苦情が来たことは一度もない。

そりゃそーだ。解像度1280×1024で、デフォルトの文字を72ポイントにしてもレイアウトが崩れないように作っている。さらにさらに、全画面表示をやめて画面をドンドン狭めてみ。きっと驚くことが起こる。

  1. 老人用の文字設定でもまったく問題ない。(船宿のページってのは、けっこうな割合で御老人も見るんだな)
  2. 型の古いノートパソコンの解像度(640×480)でも問題ない。また、Windows CE 搭載のハンドヘルド・コンピューターでも横スクロールを必要としない。
  3. ケータイでも問題なく読める。

これなのよ、これ。アタシのコンセプトは。誰でもいつか年を取る。でもインターネットは便利だから利用したい。だから、文字を拡大してもレイアウトが崩れにくいページがいい。そして、いつでもどこでも利用したいときに利用できるに越したことはない。だからケータイでも電子ブックでも読めるようにしてやりたい。

だからね、ASHINOKO ONLINE を見るときは、思いっきり文字をデカクして気楽に見て欲しいワケよ。Windows の場合も、解像度1280×1024とか1600×1200で主にインターネットを楽しんでいるという人は、文字の基本設定をいじってデフォルトの文字を14ポイントとか18ポイントにしてみよう。そうすると、とっても楽になるはずだ。

その他にもアタシのページには様々なクダラナイ配慮が見られる。たとえば、ケータイで見ている人のことを考えて、顔文字を使うときは顔文字だけで1行にするのだ。

(ノ`皿´)ノ⌒亦亦

これは「ちゃぶだい」として単語登録した顔文字だが、オリジナルとは若干違う。オリジナルはこれだ!

(#ノ`皿´)ノ⌒┫:・'.

この場合、ケータイで1行に表示できる10文字を超えてるよね。それに、ちゃぶ台をひっくり返しているわけだから、ちゃぶ台の足は2本の方がモアベターと考えたわけだ。そこで、「なべぶた」が付く漢字で使えそうな文字がないかワザワザ探したのである。その結果がこれ!

(ノ`皿´)ノ⌒亦亦

オリジナルの方は、ちゃぶ台をひっくり返してご飯が飛び散っているように見えるが、アタシが作った「ちゃぶだい」の場合は、味噌汁がジョバーっとこぼれているような漢字(カンジ)を出してみた。まあ、こういうクダラナイ所に時間と頭を使うのが、アタシが(ある意味)「天才」と呼ばれる理由なのだろう。

(`⊥´)ゞ

しかし、こういう「天才」に教えられた生徒はタマ乱かもしれない。余計なことばかり教えるから授業が遅々として進まないのだ。今日なんか4時間近くかかって、ようやく最初の1ページをサーバーにアップロードしたところで時間切れである。では、さっそく今日のおさらいをしてみよう。

  1. あらゆるデバイス(コンピューターとかケータイとか)で読めるように XHTML で書きはじめる。そのためにまず、CSS を ASHINOKO ONLINE から1枚コピー。
  2. CSS を自分用に書き換える。文字色とか背景など。
  3. CSS の基本的な使い方の説明。外部 CSS だから、HTML にリンクする形でコンピューターに読ませる。
  4. ファイルやフォルダの名前に日本語を使わない。全部半角英数小文字。(大文字は間違いの元だから使わない)
  5. たとえば、釣った真鯛の写真なら、madai35_040724.jpg としておけば、2004年7月24日に釣った35センチの真鯛だということがファイルネームだけでわかっちゃう。そうすると、『60センチの真鯛を釣ったのはいつだっけ?』なんてときに、ファイルネームを見ただけで簡単に見つけることができる。『あれは確か2002年だ』と思えば、2002年のフォルダだけ検索すれば「あっ」と言う間だろう。
  6. フォルダを作ったら必ず index.html を作る。(そうした方が間違いないので必ずそうする)
  7. リモートサイト(サーバー)の設定。
  8. わかりやすく最適な階層化を考える。(ひとつのフォルダの中身はせいぜい50項目ぐらいに)

宿題:ホームページの設計図を書いておくこと。

もしかすると「一日パソコン教師」はシリーズ化するかもね。