人文情報学科オフィシャル・サイト・プロジェクト再始動 [Webサイト構築]
人文情報学科という学科は、外からに見ると、いや、内から見ても、よく分からない、何をしているのか、しようとしているのか見えてこない、という意見が多い。そんな状況を改善しようと、僕のゼミでは去年の6月7月と、学科のオフィシャルサイトを作成した。最初にこのプロジェクトについて書いたのは、昨年の6月1日の「学科のオフィシャルWebサイト作成プロジェクト」という記事だった。
最終的な規模は、「全部でhtmlファイルが78、jpegファイルが141、cssファイルが5、あと若干のgif画像からなる。」とある。一つの学科のサイトとしては、かなりの分量だ。これを基本的には、ゼミの学生が作ったというところがすごいと思うのだが、僕の性格からなのか、それほど評判になっていないような気がする。残念なことだ。
先日の教授会でも、大学の各学科のホームページを作りましょう、という話が出た。人文情報学科の他には哲学科のサイトが作られていたが、そちらについては、「素晴らしいものを作っていただいた。是非、他の学科でも参考にしてもらいたい。」という意見が出された。
われわれのサイトは、外から見ると何をしているのか分からない、ということだが、まさにこういうサイトを、全部HTMLを直接書いて作成するようなことをゼミの学習の一環でやっている、ということが、学科の内容を示している、という意味でも価値あるものだと思う。のだが、それが一見して分かるようには作られていない、という問題があるのかもしれない。
あまりにも情報を詰め込みすぎ、全体の構成に統一性や整合性がなくなっている、という懸念もある。
そこで、もう一度、一体、どういう情報を提供すれば、分かりやすく、かつ、見ている人に役に立つサイトになるのかを考え直し、全体を再構築したいと思う。これが新ゼミ生の新年度の最初の課題ということになる。すでにたたき台はできているわけだから、問題点も捉えやすい。
- 既存のページの内容の更新
- 既存のページの問題点の修正
- 新たなページの追加
という三点をベースに、統一性、分かりやすさ、情報の豊富さを目指して、再構築する。
しかも、前回は僕がディレクターになって、学生に指示を出し、またできたファイルをチェックするなどの役割を担ったが、今度は、そこも全部学生に任せることにした。いわば、疑似的なWeb制作会社を学生に運営させる、ということだ。僕はアイデアやアドバイスはするが、推進役は学生にやってもらう。
そこで、一つ、みなさんにご意見をいただきたい。人文情報学科オフィシャル・サイトをご覧になって、こうした方がいい、こういう情報があったらいい、こういうことが分かるとうれしい、といった要望やご意見、アイデア、あるいはここがよくない、という批判があったら、ぜひ、コメントにて教えていただきたい。
実は、新しくゼミに入る新三年生には、既に春休みの課題として、同様な問題を出している。新学期が始まるまでにはレポートを提出してもらうことになっている。また、HTMLとCSSの基本についての簡単なオンライン教材もやってもらっている。この教材自体、今年の卒業生が卒業制作で作った教材である。先輩の卒業制作が実用的に使えるということを肌身で感じてもらっている。
さあ、この一年はどういう一年になるのだろうか。今から楽しみだ。
ついにアップ。しかし、問題が・・・ [Webサイト構築]
本日の昼過ぎにやっと、学科のオフィシャルWebサイトをアップした。アドレスは、
http://www2.otani.ac.jp/hi/index.html
ところが、やはりアップしてみて気付く問題が・・・。小さいミスは、すぐに気付いて直したが、ちょっとやそっとでは解決しない問題が持ち上がった。
実は、このWebサイト、既存の情報やページのデータを再利用しているところがいくつかある。たいていは文章だけで、レイアウトは新たに作り直しているのだが、どうにも面倒だったのが、「四年間の流れ」という、カリキュラムの表を出すページだった。元々のページは、テーブルを幾重にも入れ子にし、テーブルタグに様々な属性を指定し、しかもCSSを文字サイドの指定だけに使用している、という、大変な代物だった。
カリキュラムの表なので、そもそも表自体が、あちこちで縦や横にセルがいくつもつながった（つまりrowspanやcolspanを多用した）ものだったが、データよりも、タグの属性指定の方が多いくらいで、全体の見通しもつかないようなものだった。表示された表を見て、新たに書き起こした方が早いような気もしたが、とにかく、複数のテーブルの入れ子を解消し、属性指定を全部CSSに置き換え、何とかほぼ同じ形の表に仕上げることができた。
これは、昨日までの作業で済んでいたし、それはHTML文法チェックのページと、MacOSX上のHTMLチェッカーソフトJCheckerで文法チェックして、いずれも満点をとっていた。またMacOSXの標準ブラウザーSafariと、Firefoxでもきちんと表示できることを確認していた。
それが、今日、アップしたあとに大学のWindowsのインターネット・エクスプローラーで表示してみると、これが全然期待通りに表示してくれないのだ。テーブルがページの真ん中に来るべきところが左によったままだった。これは、とりあえず、何とか直したが、どうしても困ったのが、左右方向にセルを連結するcolspanが全く機能しないのである。データは最初のセルに固まって入ってしまって、左右に広がってくれない。
あれやこれやの試みをしばらくやったが、結局、夕方6時まで大学でやっていても埒があかなかったので、そのままにして帰宅し、結局、表を出来る限りシンプルなものに全部書き直すことにした。まったくゼロから書き直したので、雰囲気も内容も違った物に仕上がった。もちろん、前のデータから引きずっているbrタグを多用しているところとかは1点だけ減点されるが、それ以外のレイアウト部分は問題がない。
これはWindowsのIE6で見ても、きちんと表示されるので、取り敢えずこれで行くことにした。
このページは、最初の乱雑な行き当たりばったりのデータと、IEの非互換性のために、さんざん苦労されられたページだった。最初から、楽をしようとせずに、一から自分で書いていればよかった。CSSを多用するページを作ろうとすると、これからもIEに悩まされることになるのだろう。しかも、僕はMacOSXで作っているので、そうそうWindowsで確認できない。全く、あれだけのお金と人員を投入して、あんな非互換なものを作るというのは、どういう神経だろうか。そして、そういうものが、淘汰されずに、幅を利かせているというのも、一体どういうことなんだろうか。
完成目前、でも今が一番たいへん [Webサイト構築]
今日、一日、人文情報学科のオフィシャルWebサイトの最終チェックをしていた。何とも大変な作業だった。本当は、今日アップして、それをここで報告したかったのだが、結局、明日にずれ込んでしまった。
全部でhtmlファイルが78、jpegファイルが141、cssファイルが5、あと若干のgif画像からなる。まあ、画像関係はそれほど問題はない。問題はhtmlとcssファイルだ。内容のチェックまできちんとやっている時間はない。これは、これまでのゼミ生の作業を信頼するとして、チェックは、まずHTMLの文法チェック。
このプロジェクトの目標の一つに、各HTMLファイルを石野 恵一郎のHTML文法チェックサイト「Another HTML-lint」でチェックして、100点をとる、というものがあった。このサイトは商売で作っているわけではなく、授業ないしはゼミの一環でやっているので、HTMLの勉強も兼ねている。勉強するからには、見えればいいのではなく、文法を正しく記述するように努めることが望ましい。ということで、若干の例外を除いて、ほぼ満点をとることを課した。
今日、全部をチェックしてみたら、ゼミ生が担当したファイルは、だいたい満点が取れていた。むしろ問題だったのは、僕が作ったファイルだった。マイナス点になるのもあり、満点のファイルの方が少なかった。最初にいくつかひな形を作ったときは、文法チェックをクリアーしていたが、その後、いろいろ書き足しているうちに、誤記が増えてしまったようだ。これら全部チェックして修正するのに随分と時間がかかった。
だが、チェックはそれだけではない。次は、同種類のファイルのメニュー項目やリンク項目を統一すること。これはゼミ生が分担して作っているため、そして、僕自身が提供したひな形が時期によって、こういうメニューやリンクの項目にぶれがあったため、どの時期のひな形をベースにしているかで、不統一が生まれていた。これを一つ一つチェックしながら統一していく。
次に更新日時を全部、公開する日7月31にち統一した。これも一つ一つ、ファイルを開き、修正した。もう少し組織的に作っておけば、一括で変更ができたかもしれないが、後の祭りだ。
さらに、ローカルリンク、外部リンクのチェック。これは、リンクチェックソフトを使ってチェックしたが、チェックはしても修正はしてくれないので、これも一つ一つファイルを開いて修正する。思ったよりもリンクはずれが多く26のファイルに及んだ。
最後まで作らずにいたニュースのページを新規に作成。学科関連のお知らせを掲載するページである。これはスタイルファイルを若干修正し、他のページとはやや違った雰囲気になった。そのレイアウトをきれいに作るために、結構時間を費やした。
さらに、従来あった昨年度のニュースのページを、今日作ったcssに会わせて書き直していった。前のファイルが、かなり場当たり的なスタイルを作って非常に細かくレイアウト指定していたが、これを全部削除して、新たにタグを書き直した。
こうして、今あるファイルは、ほぼ完成した。しかし、僕のゼミ生によるゼミ紹介のページは、データをもらっているが、まだ作っていない。これを仕上げて、明日、大学でサーバーにアップすることになる。その上で、もう一度、チェックが必要だろう。
いやー、大変だった。まだ終わってはいないが・・・。明日こそ、ここでURLを公開できることを祈っている。
IEのHTMLソース書き換えはひどい。ついでにWordもひどい [Webサイト構築]
今、学科のオフィシャルWebサイトをゼミで作っている話は前に書いたことがある。先週はその概要をゼミで示し、今週の水曜から実際にHTMLを作る作業に入った。手順としては、僕が各ページのサンプル（と言っても、僕自身のページだが、）を作って、それをゼミ生がHTMLソースをダウンロードし、現在ネット上や、パンフレットなどの冊子にある情報をもとに、取材に行かなくても分かる情報で書き換えてしまうところから始めた。
そこで、IEでアクセスしてソースコードを見ると、元々のHTMLはJISコード（iso-2022-jp）で書いてあったため、文字化けをする。そこで、ページを表示してから別名で保存でHTMLファイルとしてダウンロードした。ところが、これがちょっとみたところ、タグが大文字になったりしているので、こりゃ使えん、ということで、各自Firefoxをインストールして、それで作業することにした。
ところが、そのとき偶々欠席していて、あとから手順を友人に聞いて作業をしてきた学生がいた。その学生は、どうもうまく表示できないのですが、どこをどうしたらいいか分かりません、と言って、とりあえずできたものを送信してきた。
中身を見てみると、何と、タグが全部大文字。
僕のもともとのファイルは、HTML4.01strictで書かれていて、HTML 文法チェックでも100点を取るようにしていたが、そのIEが書き換えたファイルは、65点になっていた。わざわざ正しいものを誤って書き換えるのは、一体どうしたことか。しかも、そのチェックには引っかからなくても、将来のXHTML化を見越して、出来る限り互換性のある書き方をしているのに、それをむしろ時代を逆行するような、改悪をしているのだ。
将来的には、(X)HTMLのタグおよび属性は小文字に、属性値はダブルクォテーションで囲む、という原則を学生に教えてきているのに、それをことごとく逆に書き換えている。タグと属性を大文字に、属性値に付けていたダブルクォテーションは全て削除するように書き換えている。
また、開始タグと終了タグは必ず対になるようにしていたのに、liタグに対する終了タグは全て削除されていた。いや、どういうわけか、/olタグの前の/liタグだけは残されていた。
こういう風に全部を変更されてしまっては、それを元に戻すように修正していくよりも、もう一度正しいファイルをダウンロードして、最初から作り直した方が速い。
マイクロソフトのアプリケーションは、どうしてこう自分勝手な操作（本人はユーザーのためにしていると思っているのだろうが、）をしてしまうのだろうか。Wordで、箇条書きや書式を勝手に設定されてしまうことに業を煮やし、それをオフにしようとして苦労したことのある人は多いだろう。大体、Wordは一度文書を閉じて再び開いたとき、カーソルは前に作業をしていたところではなく、一番最初に戻っている。
そんなばかなことがあるわけないと思って、マイクロソフトのサポートに電話をかけて聞いてみたことがある。単に僕はWordの**豊富な**機能の使い方を知らないのにすぎないと思って。返ってきた答えは、「それはできません」。即答だった。
これまで僕は20年位パソコンを使ってきたし、パソコンを使って論文も書き、本も作ってきた。しかし、これまで自分の不注意以外で、カーソルが文書の先頭に戻ってしまったことなどなかった。こんなソフトを使ってどうして長い論文を書く気になるのか、僕には理解できない。勝手に間違った書き換えをするIE、どんなに長い文章を書いていても、文書を閉じるたびにカーソルが文書の先頭にもどってしまうWord、これがWindows文化の象徴でなければいいが。
Webサイトの仕様書を作る [Webサイト構築]
学科のオフィシャルWebサイトを、ゼミのメンバーで作ることにしたことは前に書いた。ゼミの人数は18名なので、分担して作ることになる。今日はその配当をした。
学科のゼミ担当教員は現在8名で、その各々について、
- ゼミのトップページ
- 教員のプロフィール
- 担当教員のシラバス
- インタビュー
の4ページを作る。ただし、そのうち一つは僕のもので、インタビューを除けば出来ている。それを除くと、これだけで、28ページ作ることになる。僕のものも入れれば、総計32ページである。
その他に授業紹介のページ、ゼミを担当していない常勤教員のページなど15ページ以上を予定している。これらはまた分担して取材や写真撮影をし、取材したものに基づいて文章を用意し、テンプレートのHTMLに貼り込んでいく。
その他、分担せずに僕が作ってしまうページもあるので、全体で50ページ以上のサイトにする予定である（できるのか？）。これだけの規模（といっても、積算したこうなった、という類のものだが）を前に学生は、たいへんそうだ、出来るのか、無理じゃないか、と怖じ気づいているが、一番大変なのは、僕だろう。全体の設計とひな形の作成、CSSのデザイン、HTMLのチェック、書く項目についての指示、取材先への根回しなど。
これを7月半ばまでに仕上げるつもりなので、直ぐにでも作業を始めなければならない。まずはゼミ生の分担の作業を進めるための仕様書というか、指示書を書かなくてはならない。
また、複数の人が作ることになるので、共通に使うCSSやひな形などは、Web上に置いておいて、常に最新の状態に更新しておけるようにする。この週末にも、ある程度の指示書とひな形を仕上げて、来週早々には作業に入れるようにしよう。ああ、大変だ。
学科のオフィシャルWebサイト作成プロジェクト [Webサイト構築]
人文情報学科の僕のゼミは「人の役に立つデジタル・ツールの製作」というテーマでやっているが、その中で、必ず、学科のホームページを改善する、という課題で演習をしたり、あるいは卒論で取り上げたりしている。その場合、当然、他の似たような学科のWebサイトをいろいろと見て回り、いいところ、悪いところを検討する、という作業が必要となる。大学での研究というのは、現状調査をし、その問題点を踏まえて、新たな提案や企画を展開する、という方法をとるからである。
いろいろと見て歩くと、それぞれの大学や学科によって、出来・不出来がまちまちだ。一般に私立大の方がその辺りは進んでいる。たいてい、学科に任せずに、大学が統一的に作っているところが、それなりにましである。しかし、そういうところは、情報量が少なく、また、いかにも業者に丸投げというのがありありとしている。また、おそらく、紙媒体のパンフレットをそのままWebに載せたのではないだろうか、というところも少なくない。ソースコードを見ると、スパゲッティのようになっていて、「HTML文法チェック」をすると、マイナス何百点とかになったりする。情報学科がそんなんで、どうする、と言いたくなる。
一方、学科内で作っているところは、そもそも更新も少なく、いかにも時間をかけずに、取り敢えず作っておきます、という感じのところが多い。
一般に、商売がかかっている一般企業と違い、公共機関のWebサイトは、出来の悪いものが多かった。それでも、最近は、サービス向上や大学であれば学生募集のために、それなりにWebサイトに力を入れるようになってきた。しかし、やはり企業に比べれば、まだまだである。
というのは前振りで、本題は、そこで、僕のゼミでうちの学科のオフィシャルWebサイトを作る、というプロジェクトを立ち上げよう、というものだ。何日か前にゼミのオフィシャルページを作ったという記事を書いたが、そのCSSを使って、他のゼミ、さらには学科全体のものを作ってしまおうというプロジェクトだ。
もともと、そのゼミのページは、他のゼミにも流用できるようなオフィシャルページを念頭に置いてデザインした（多少、僕の趣味も入っている。）。問題は、誰が作業するかだったが、「そうだ。サブゼミではCSSを勉強しているじゃないか。ゼミでは、人文情報学科をどうしたらアピールできるかについて、検討しているじゃないか。それなら、そのゼミ・サブゼミの実習の一環として、一つのやや大きめのWebサイトを、企画から始めて、統一的コンセプトで作ってしまったら、いい練習になるのではないか。それも架空のものではなく、現実に公開するものを作ってしまえば、なおさらだ。」と思い至った。
実際、個々の作業をしていくと、CSSを書き直したり、追加したりする必要が生じるし、またある程度CSSを使ったページに慣れていないと、コーディング（ちなみに、Web作成ソフトは全く使わず、全てHTMLを手書きで作る。）も、慣れた人がやらないとできないだろう。ということで、やはりゼミ生と一緒に作る以外にはない。そうでなきゃ、いつになってもできないか、ゼロから誰かがデザインし直して、どこかに丸投げすることになるだろう。誰だって忙しいので、内部で作るのには無理がある。僕のところなら、ゼミとサブゼミを使って、演習の一環としてできるし、18人いるから、分担もできる。
もちろん、問題はある。他の先生が「うん」と言うかどうか、不快に思ったり、協力してもらえなかったりしたら、どうしようか、とか、そもそもゼミ生が乗り気でなかったらどうしよう、とか。
まあ、それもこれも、ドライブする人の熱意で決まるようなので、ハイテンションでがんばることにしよう。
ゼミのホームページをリニューアル [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のままで通している。色々な機械によっても見え方が違うと思うので、まだもう少し試行錯誤をしたいと思う。
できれば、僕のゼミや僕個人のページだけではなく、学科全体も似たようなデザインで（僕の作ったデザインでなくてもいいのだが、）統一されていた方が、「人文情報学科」という学科の性格上好ましいと思うのだが、大学の先生はそれぞれ個性が強いので、当局が勝手に作ってしまうもの以外の統一をとるのは難しいかも知れない。
改行にbr要素を使ってはいけない [Webサイト構築]
HTMLのbr要素は、段落内の改行意味するタグである。これを通常の改行コードとして使いたがる傾向がある。そもそも、ある種のアプリケーションは、HTMLタイプでファイルを保存すると、改行位置を全部br要素にして書き出したりする。そういうソフトは使わない方がいいのだが、このように市販のソフトでも、対処療法的な処理をするのだから、普通に人が自分でHTMLを書くとき、自分のイメージの中での改行にbrタグを使うというのも仕方がないのかもしれない。
しかし、このタグの元々の意味は、一つの段落の中で改行が必要なときに使用するものであり、これがあっても段落が変わらないことが前提になる。しかし、そういう必要性は、滅多なことではないのではないか。
一つ考えられるのは、たとえば、一つの段落を作るh1要素の中で、一行のタイトルとしては長すぎ、しかもタイトルなので、意味上適切な位置で改行を入れたい（そうでないと、ウィンドウサイズで改行が起こってしまう。）ような場合に、brを使って意図的にタイトルを改行する場合だ。この場合、h1タグを二つ使うのは適切ではない。なぜならば、一つのタイトルというまとまった単位は、一つのh1要素の中に入れて置くべきであり、しかもそれを途中で改行したいとすれば、段落内改行としてのbrタグを使わなければならない。
しかし、ワープロで普通に改行を入れて段落を変えるような場合には、一つの段落はp要素で囲むべきである。それがブラウザーでどのように見えようが、そうすべきである。ブラウザーの見え方では、そういう段落の間は、少し隙間が空くようになっている。これが場合によっては不要なことがある。そういう場合には、CSSを使い、段落間の開きをなくせばよい。
箇条書きでいくつかの項目を並べたいならば、それらをbrタグで区切るのではなく、きちんとol要素かul要素で箇条書きにすべきである。その各項目の間の開き具合は、これまたCSSで定義すればよい。広くも狭くもできる。
そもそも、CSSによるデザインの指定は、通常のHTMLのタグで予め設定されているものよりも遙かに柔軟で、豊かな表現力を持っている。つまり、HTMLのタグの見え方に関しては、CSSを使うことでフルに定義できるのである。したがって、HTMLのデザインを、現状のタグの表示のされ方に基づいて、小手先の変更で対処するのではなく、HTML本文中にはデザイン的な要素は極力書かないようにし、それらをできるだけCSSで設定するように心がけなければならない。
CSSを使おう [Webサイト構築]
ゼミの新入生に一つのテーマでWebページを作ってもらったが、それを見ていると、現在のHTMLの書き方の一般的な傾向が見えてくる。特に方針なく見よう見まねでHTMLを書く場合、各要素のデザインをタグの属性で指定している。
一番多いのが、文字の色やサイズをfontタグの属性で指定するやり方である。HTMLのバージョン4.01では、fontタグによるデザイン指定は推奨されない。これらはCSSを使うべきものである。
その他、table、tr、tdなどでも色を属性で指定している。またテキストのアラインメントも、p要素やh1要素などのalign属性で指定している。センターラインはcenterタグを使用している。これらのいずれも推奨されないやり方であり、CSSを使うべきものである。
それともう一つの大きな特徴は、改行をbrタグで行っていることである。一行開ける場合もbrタグを二つ重ねる。p要素とbrタグの違いも理解されていないようである。
HTMLの4.01あるいは、XHTML1.0で書くためには、こういうデザインの側面、つまり見え方については、別にCSSに任せてしまい、HTML文書の中では、基本的にはタグだけにしなければならない。唯一使う属性が、CSSのクラス名を指定するclass属性（あるいはid属性）のみである。
このような状況は、一つにはワープロの書き方をそのままWebページに持ち込んでいることに起因しているように思われる。ワープロのようにHTML文書作れるDreamweaverやGolive、ホームページビルダーなどのWYSIWYG編集ソフトがこれを助長している。つまり、意味を理解してHTMLを書くことができず、見た目だけで編集をしている。それがどのようなコードになるかは、ソフト次第だが、ソフトは意味を理解できないから、正しいタグを生成できるわけがない。本質的に間違わざるを得ないのだ。
構造とデザインを分離し、デザインはCSSで指定するという考え方は、最近のHTML関連の書籍では普通であるが、まだまだ一般の人にはまだまだ浸透していないのである。
HTML文法チェッカー [Webサイト構築]
僕は普段、MacOSX上でJeditXという、エディターを使っている。これは、Windowsのどのエディタよりも使いやすい。他にエディタとしてはEmacsを使っている。TeXやプログラムを編集するには、こちらの方が使いやすい。しかし、論文の原稿を初めとして、あらゆる用途にJeditは大変重宝する。
HTML編集用には、その同じ作者が作ったJcheckerという、HTMLコード入力用のエディタを使っている。このHTMLエディタは、同時にHTMLの文法チェック機能がついているので、大抵の場合、書き終わったHTMLの文法をチェックしている。
Windowsで同様のエディタがあるかどうか分からないが、少なくともHTMLの文法チェックに関しては、他にAnother HTML-lint というオンラインのソフトが公開されている。ローカルにダウンロードして使うこともできるが、そこではCGIで動くこのチェックソフトをオンラインで使うことも出来るようになっている。
これは非常にお奨めのサイトだ。チェックしてみると、多量のエラーが出る。出るだけではなく、それについての「解説」へのリンクが表示され、また、エラーのある行が赤い文字で表示される。エラーと言っても、致命的なものと、エラーというよりは、注意とか推奨とかの表示も含まれており、全部を直す必要はないが、しかし、その解説は一読の価値がある。よりよいHTMLを書くためのガイドラインが示されているからだ。
URLを指定すると、そこのHTMLファイルがチェックされるので、たとえば、このページなどもチェックしてみるとおもしろいだろう。こういう、ソフトで自動的に作成されたHTMLとか、グラフィカルなHTML作成ソフトが吐き出すHTMLコードが、どんなに汚いものか分かるだろう。
もちろん、かなりのエラーが出てもブラウザーでは問題なく表示できる。細かいことを気にしていたら、時間がかかって仕方がない。と思うかも知れない。だが、HTML仕様やWebの環境はどんどん変化している。進化している。将来、いろいろ発展的な利用をするためには、きちんと決められたルールに従っていた方が互換性を保つことが出来る。
HTMLだけで書くWebサイトはもうすぐ時代遅れになる。そのときにあわてないで済むように、きちんと原理を理解し、決められた文法を遵守する習慣を身に付けよう。
