SSブログ

ゼミのホームページをリニューアル [Webサイト構築]

といっても、ほとんど学科から飛ぶゼミのトップページとプロフィールのページくらいで、後は既存のページを繋げて急場をしのいでいるだけのものだが、このトップページのデザインにそこそこ時間がかかった。時間がかかったように見えないかもしれないが、僕としては、いろいろと試行錯誤をした。

 このような、ページの大がかりなリニューアルというのは、何年かに一度行ってきたが、その時々の情勢に合わせたデザインになっている。とは言え、僕にはデザインの才能はないし、画像を作るのも不得意なので、かなり手抜きなページになっている。

 今回のテーマは、デザインをできるだけCSSに移し、HTML4.01Strictでも通るように作ることと、学科のオフィシャルなページらしく作ることだった。どちらも完璧とは言えないが、それなりの仕上がりになっていると思う。少なくとも、ゼミでのCSSの演習の教材に使うことはできる。

 どういうわけか、大学の情報学科系のWebサイトは、ブルー系統の配色を使っていることが多い、ということは昨日書いたが、僕のページでは、赤系統の色にしている。この色は、大谷大学のロゴの「大」の文字の色に近い色として選んだ。まあ、僕が赤系統の色が好きだということもあるが。そのため、他のサイトとは少し違う印象になっているだろう。

 また、メニューやリンクも、いかにも画像ボタンのようなデザインのCSSを使うサイトが多い中で、シンプルで単純な単なるテキストのリンクにしている。あとは、全体の中での配置と、リンクあるいはメニューの数を減らして、選択に迷わないように、また、簡単な説明を入れて、タイトルだけでのメニューにしないようにしている。

 CSSを書き換えたことで、従来のページにも多少影響が出てきている。つまり、新しいCSSに対応したデザインに直さないと、少しおかしいところがあるが、これは徐々に改善していくことにしよう(というかけ声だけで、いつ実現するやら見通しはない)。

 それよりも問題なのは、基本的なCSSのファイル以外に、ページによって、そのページ特有のCSSファイルを使っていることだ。そのこと自体は、悪いことではなく、むしろ、全体に共通のものを作っておいて、個々のページ固有のデザインはそれに上書きするのが正しいやり方だろう。だが、そういう抽象論は措いておくと、既にCSSのクラスやidに混乱が生じているのだ。行き当たりばったりの設計になっているため、全体の統一がとれなくなってきている。その場かぎりの、小手先の上書きをしているのだ。

 まだ、数ページしか作っていないのに、この始末だ。この段階でもう一度、どういうタグに、どのようなクラスやidを作っているか、それが他のページにどうして流用できないのか、共通化できる部分はないか、を検討しなければならない。これはローバストなCSSを設計するために必要な作業であるはずだ。

 また、もう一つの問題は、よく言われることだが、ブラウザーによって見え方が多少違ってきている。特に標準のフォントの大きさや、h1やh2のボックスの大きさの不揃いなどが気になる。僕はMacOSXのSafariをメインに、あとはFirefoxをサブにデザインしているが、この二つでも、ボックスの大きさとその中に表示される文字の位置に不一致が見られる。また、Macで標準の文字サイズが12ポイントで見やすく表示できても、WindowsのIE6に持っていくと、文字サイズが標準(つまり、何も指定しないままだ!!)では、間抜けに大きく見えてしまう。これはIEの標準の文字サイズが14ポイントになっていることによるのだろう(というのは、予想であって、本当はよく知らない)。

 そこで、文字のサイズを固定で指定しないと、MacとWindowsで同じようなデザインでは見えないのだ。今、僕は12pxに指定している(h1やh2もみな固定で指定することになる)。これでMacは、何も指定しないときと同じ大きさで、きれいに見える。しかし、Windowsで見ると、大きさは確かにMacと同じに見えるが、ビットマップではなくラスタライズしているためか、ジャギーが気になる。Windowsは一体どういうセンスをしているのだ。

 とは言っても、仕方ないので今は12pxのままで通している。色々な機械によっても見え方が違うと思うので、まだもう少し試行錯誤をしたいと思う。

 できれば、僕のゼミや僕個人のページだけではなく、学科全体も似たようなデザインで(僕の作ったデザインでなくてもいいのだが、)統一されていた方が、「人文情報学科」という学科の性格上好ましいと思うのだが、大学の先生はそれぞれ個性が強いので、当局が勝手に作ってしまうもの以外の統一をとるのは難しいかも知れない。


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。