前回から既にひと月以上経過してますね。反省。
上の一文から「あれ?」と気付いた人もいるでしょうが、今回から文体を変えます。前回までの文体は、伝えるべき事をよりシンプルに、ダイレクトにと考えて採用したものの、どうにも最近、文体がその内容を制限してきているように感じ、本末転倒と思ったので。より自然な口語体に近い文体を、と考えています。
さて、こんな site をチェックしてくれている奇特な方(笑)は既にご存じでしょうが、先月下旬に新コンテンツを追加しました。題材は 『Treating 2U』という PC ゲームについて。ジャンルは 18 才未満お断りのゲーム、はっきり言えばエロゲーです(笑)
その題材、内容に対しては、観る人によってプラスのイメージを抱く人、マイナスのイメージを抱く人、様々でしょう。自分はあくまで「紹介する側」なので評価は「観る側」の人にお任せします。
ただ、題材の表面的な部分のみを見てマイナスのイメージを抱いた人には、一つだけ忠告しておきます。それは、
「世の中の『常識』に囚われていては、自分にとっての『価値有る物』を見つけることは難しいですよ」
と言う事。
誰が作ったとも知れない、常識という名の『色眼鏡』なんか掛けていては、目の前に咲いている『綺麗な色の花』にも気付くことは出来ませんからね(笑)
午後、日頃の運動不足解消も兼ねて自転車で地元の繁華街まで。とはいえする事などせいぜい本屋巡りくらいなんですが。
その本屋で PC 関連雑誌のコーナーを覗いたとき、とある雑誌(6月号)の表紙を見て足が留まりました。特集の一つに『初夏のハッカー入門 HTMLマスター編』とあったのです。
こんなヘボサイトでも webpage 作成者の端くれ、「どれ、一つ勉強を」と思い該当ページを店頭で流し読みしてみたのですが。いや、たしかに勉強になりました。反面教師として(苦笑)
ちょっと話は飛びますが、この文章を読んでいる方に一つ質問。HTML って何でしょう? 人によって色々な答えが返ってくると思います。
「ナニソレ?」
「ホームページの中身でしょ?」
「HyperText Markup Language の略だろ? そんなこと知ってるよ」
etc.,etc.……
認識は様々で構わない訳ですが、もしそれを使う方であれば今一度、その言語は何の為のモノであるか? を考えて頂きたいのです。
HTML、厳密な定義や正確な説明をしようと思えば難しいものでしょうが、自分は簡単に、以下のように捉えています。
「HyperText 機能を特徴とした、文書の論理構造を定義、記述する言語」
間違った認識かも知れませんが、とりあえずこの考えのもとで HTML4.0 を使っているつもりです。(間違っていたらご教示いただけると嬉しいです)
で、この中に「表示」「(見栄えとしての)デザイン」の類の言葉は入っていません。あくまで論理構造を定義、記述するものと考えていますから。その代わり、Cascading Style Sheets(CSS) というスタイル言語を用いて、自分が「こう見て貰いたい」と意図したデザインを提供しています。対応するブラウザであれば見られるよう作っています。(対応していないブラウザでも、 HTML という言語の仕様にきちんと沿っているものであれば閲覧自体に支障は無いと思います)
さて、話は戻って。冒頭に書いた某雑誌の特集で自分が反面教師としたのは何か。おおよそ以下の通りです。
他にも幾つかあった気がしますが、取り敢えずこれくらいで。では自分が反面教師とした理由、順に書いてみましょう。
まず 1 から。この方法では style 属性の position 宣言による位置の指定と font 要素の color 属性による色の指定を、用意した複数の同じ文字列に対して行う事でズレ掛け文字を実現しています。div 要素と style 属性 をきちんと認識するブラウザであれば見事に表現できるでしょう。
しかし、もしそれらに対応していないブラウザで見たら? 残念ながら同じ文字が色違いで並んで見えるのがせいぜいです。それを見た人はその意図が掴めずに首を傾げるに違いなく。それに何だか間抜けですね(笑)
次に 2 。animation GIF を作るのはそれなりのソフトウェアと手間が要ります。正直、ちょっと面倒です。そんなあなたに marquee 要素。動かしたい静止画像にこれを用いれば、横方向という制限は付くもののさも動画のように表示することが出来ます。便利ですね。
でもこの marquee 要素、Microsoft Internet Explorer(IE) 独自の要素なんです。HTML の仕様にはそんな要素は有りませんし、Netscape Navigator(NN) を始めとする他のブラウザでは認識されません。いかに IE のシェア全盛たる世の中とはいえ、それ以外のブラウザで見る人もいる訳で。動きもせず、ただぽつんと画像が表示されている有様というのは、何だか寂しいと思うのですが。
それから 3 。これはかなり以前から、個人、企業のページを問わず、多くの人が用いている方法です。具体的には table 要素とその子要素を用いて大きさや位置を指定した「箱」を作成、その中に文字や画像を入れて webpage 作成者の意図する通りのレイアウトを実現する、というもの。これは table 要素がおおよそ大抵のブラウザに認識される事、pixel 単位で指定できる事から重宝がられています。確かに便利。
ただし、中には table 要素を認識しないブラウザがあるかも知れません。(不勉強で具体的には知りません。Lynx はどうなんだろ?) また、table 要素はブラウザにとって表示に手間の掛かるものでもあります。何故ならそれに含まれた文字や画像を全て取り入れるか、その表示に必要な領域を把握して初めて表示に取りかかれる要素だからです。自然と、表示するのに要する時間が長くなります。見てくれる人を待たせるのは何だか忍びない気がしませんか? 表示についてもう一つ言えば、あまり大きなサイズのものを作ると低解像度の閲覧環境では表示しきれず見づらくなる、と言う点も挙げておきます。
そしてなにより、実際にレイアウトに使っている人にお訊きしたいのですが。
「それって、『表』ですか?(笑)」
最後に 4 。frame 要素はブラウザの表示領域を任意に分割、ページ割り当てを行うことで色々な用途に使うことが出来るものです。よく見かける使い方としては、メニューと内容を分割して、ある内容から別の内容へ直接飛べる様にしたものがあります。この要素は HTML4.0 から定義されており(実際はそれ以前からあるブラウザの独自要素として使われていましたが)、きちんと使えばかなり便利な要素だと思います。そう、きちんと使えば。
ところで件の特集記事中に掲載された HTML ソースを見て「あれ?」と思いました。何か足らない。そして思ったのが、
「このままだと frame 要素に対応していないブラウザでは閲覧できないのでは?」
と言う事。文字も何も表示されない、のっぺらぼうのページになるのではないかと。
自分が足りないと思ったもの、それは noframes と言う要素です。HTML4.0 の定義に沿って、frameset, frame 要素と一緒にこの要素を用いることで、frame 要素に対応するブラウザも、そうでないブラウザも、きちんと閲覧できるページを作成することが出来るのですが、掲載された HTML ソースにはそれが使われていない。読者によっては記事中の HTML ソースを鵜呑みにして自分の webpage に使ってしまうかも知れません。そして frame 要素に対応していないブラウザを使っている人からは見られることもないページを作ってしまうのです。可哀想に。
自分が反面教師とした理由、お分かり頂けましたか? こういった雑誌記事に掲載されるほど、どうやら世の中では HTML や style に関してあまり芳しくない使われ方や認識がされているようです。
これまでの文章を読んだ方の中には、
「うぐぅ、だってそんな事知らなかったんだもんっ!」
と言う意見もあるでしょう。別に知らないことは悪いことはありません。自分も以前は知りませんでしたし、なにより人は全知全能ではありませんし(笑) でも、もし自分の考えに頷いて貰えるなら今からでも、本来の HTML というモノについて少しずつで構いませんから調べてみてください。僭越ながら、自分からのささやかな助言として、役立つであろう参考文献をいくつか紹介しておきます。
VZ Editor や WZ Editor で有名なビレッジセンターから出版されている、 HTML4.0 と Cascading Style Sheets, level 1(CSS1) についての解説書です。自分はこの本を HTML を理解する足掛かりとしました。「足掛かり」と書いたのは二つ理由があって、一つは完全な専門書より読みやすいこと、もう一つは内容的に足らなかったり疑わしかったりする箇所が見られることです。二つ目の理由に関して批判的な意見もあるかと思いますが、実際の所、世の中に「完全無欠の書籍」など無いわけで(笑)それより、いきなり専門書に取りかかりづらい一般の人もアプローチしやすいように纏められていることを評価したいと思います。HTML を全く知らない人には少々辛いかも知れませんが、HTML 入門書の類を一度でも読んだことがある人であればお勧めしたい一冊です。
自分の認識の中ではわりあいまともな(笑)書籍を発行する技術評論社の本です。ご多分に漏れず、この本も良書と思います。内容としては、題名通り Cascading Style Sheets, level 2(CSS2) の解説書、と言いたい所なんですが、導入部には HTML とその文書型定義 (Document Type Definition:DTD) を行っている Standard Generalized Markup Language(SGML) についての簡単な解説が書かれています。この解説、CSS 解説の導入部にしておくには勿体無いほど良い文章です。ページ数にしてわずか数十ページですが、それだけでそこいらの嘘八百を並べた「似非 HTML 解説書」を吹っ飛ばすような、正しいと思われる解説をしています。なにぶんページ数が少ないため、HTML について完全網羅とまでは行きませんが、より良い理解には十分参考になりますし、本編である CSS 解説もとても良い内容だと思います。前述したビレッジセンターの本を一通り読んだ後、読むことをお勧めしたい一冊です。
お勧めする書籍は上記二冊だけ。これだけ読んでしまえば、後は脇目もふらずに The World Wide Web Consortium(W3C)のサイトへ行きましょう。そこには HTML4.01 や CSS1&2 の六法全書たる HTML 4.01 Specification, Cascading Style Sheets, level 1 CSS1 Specification, Cascading Style Sheets, level 2 CSS2 Specification があります。お望みとあれば HTML DTD(Strict, Transitional, Frameset) だって、HTML4.01 のメジャーバージョンアップである XHTML1.0 に関する文書だって読めます。しかも只で。英語が苦手、と及び腰にならず試しに目を通してみてください。前述の二冊を読んでいれば専門用語は一通り頭に入っているはず、後はさして難しい英語は使われていません。それに豊富に出回っている翻訳ソフトや辞書ソフトなどを使えば更に読みやすくなると思います。文書フォーマットは HTML は勿論、PlainText や PDF なんかも用意されていますので、じっくり読みたい方はダウンロードされることをお勧めします。
以上の文献を読んでいけば、 HTML について、きっと「見栄え」に振り回された本末転倒な使い方ではなく、「本来の意味」での使い方へ近づいていけると思います。それと CSS の合理性と使い方も理解できるでしょう。これらによって閲覧環境を選ばない、誰にでも見て貰えるであろう webpage に近づくと思います。まぁ、偉そうなことを書いている自分も実を言えば、まともに HTML を調べ始めてからまだ一年も経って無いもので、両者を完全に理解するにはほど遠い有様。目下勉強中です(苦笑)。
それと、もしかしたら、
「そんなこと知ったことか」
と上で述べたことを無視する人もいるかも知れません。それは人それぞれですから仕方ないと思います。でも、そんな人も初めに「webpage を作ろう」と思った動機を思い出してみてください。そのほとんどが「みんなに見て貰いたい」からではありませんか? だったら、閲覧環境を選ばない、「みんなに見て貰える」webpage を目指す事は結構魅力的なことだと思うんですが、どうですか?
ずいぶん長々と偉そうな事書いてますが、実はこの文章を書いた目的の一つとして「タイムカプセル」の意味があります。半年後、一年後、数年後に読み返したときの自分が今より HTML(or XHTML)というモノを理解しているか、逆に挫折して(笑)本来の意味を無視した、見栄えに振り回された HTML を書いているか、それによってこの文章を読んだときに何を思うか、楽しみであったりするわけで。
我ながら、変なヤツですな、全く(笑)
今日も地元の繁華街まで出掛けてきました、自転車で(笑) いえ、自宅から繁華街まではアップダウンが続く約 4 Km の行程があるので、往復するだけでちょっとした運動になるものですから。で、またも本屋へ。というのも昨日、「反面教師」などと書いた手前、流し読みしただけのいい加減な内容把握ではまずいだろうと思い、某雑誌の特集を読み直そうと。あ、でもまたも店頭立ち読みです。本屋さんごめんなさい(汗)
では、昨日の文章について訂正とお詫びを。
記事中、「反面教師」として挙げた項目のうち「marquee 要素を用いた animation GIF に依らない、動きのある画像表示」について改めて確認したところ、 marquee 要素中の style 属性で background-image 宣言を用いて画像を指定する、という方法を使っていました。これなら marquee 要素を認識しないブラウザであっても画像自体が表示されないため、表示として特におかしいこともありません。ページ作成者の意図通りかは別として(笑)
昨日の文章中では上の項目について「ぽつんと画像が表示される」などと書いてしまいました。いい加減なことを書いてしまって申し訳なく。「ちゃんと読んでモノを言え!」というお叱りもごもっとも。
でも訂正とお詫びをすべき箇所はここだけでした。あとは特に訂正すべき箇所はなかったですよ(笑)
あと、フォローのつもりはありませんが、昨日の文章を読んだ人に妙な偏見が生じないように一応書いておきます。
某雑誌の特集記事を題材に色々書きましたが、別段記事の質が悪いとか言うつもりはありません。たまたま自分の目に留まり、文章を書くきっかけとなったので取り上げさせて貰っただけです。精読したわけではありませんが、その使い方はともかく(笑) HTML, CSS についてはまともなことを書いている方だと思います。世間にはもっと嘘っぱちな事を、臆面もなく書いているものがごまんとありますし(汗)(その昔読んだ HTML 入門書には p 要素を「段落区切りのタグ」と堂々と書いてありました。誰が書いた何という本かは伏せておきますが)
ところで、その本屋でなにげに楽しげな本を一冊見つけました。ちょっと紹介しておきましょう。
この本、内容的には HTML リファレンスから始まって FTP の操作、UNIX コマンドや CGI 、Adobe Acrobat や VRML までを扱っている欲張りな本なんですが、技術的情報よりも目を惹いたのがその文体。個人的にえらい楽しく気に入りました。著者が言いたい事をすぱーんと書いてます。その表現の中でも特に言いたい事は中央揃えかつ文字サイズを大きくしています。
丁度こんな感じ(笑)
(この段落では p 要素内の align 属性で center を指定しています。対応していないブラウザでご覧の方、ごめんなさい)
で、本書の中で一つ、目に留まった言葉があって。それは、
「わからないのではなく、知ろうとしない」
という一言。文中では世の「HTML がわからないという人」に対しての言でしたが、この言葉、何にでも通じるのではないかなと。ま、ここでは深くは言及しません。気が向いたときにでも自分に照らし合わせて考えてみると、いいかも知れませんね♪
昨日今日と空模様が芳しくなくて、家に閉じこもりっきり。あぁ、運動不足。
それはさておき、気が向いたので書いておこう(笑)
身内のサイトにコーナー新設。ここ最近、にわかに活気づいている PalmOS マシン、特に TRGpro に関する話題を取り扱ってます。PalmOS マシン自身、PDA としてはかなり良い出来だし、ユーザーがソフト・ハード共に色々いじっててなかなかイカスモノも増えてきているんで、その辺りの話題を扱えるとかなり面白いんではないかなぁ? とか思って期待。そのサイトと該当コーナーの URL は以下の通り。
あ、ちなみにそこの webmaster、ウチのサーバ(ドメイン)の技術連絡担当者だったりしますが(笑)<JPNIC にきちんと登録されているゾ(ニヤソ)
先週は書きすぎた感があるので、今日はこんなところで。
たわごと:
余力があるときは自分が書いた html を Mac. の IE4.01 で閲覧チェックしてみるのだけど、なまじ中途半端な CSS 対応が仇になってかなりエラいレイアウトになることがしばしば。とりあえずテキストが画像をよけずに覆い隠されるのは絶句。W3C の Normal flow や Floats の節、読んだんでしょーか?(苦笑)> IE4.01 for Mac. 開発者
先々週、HTML について思うところをつらつらっと書きました。今回はそれに関連してその作成についてつらっと。
っと、その前に。HTML について聞き慣れない言葉がある人もいるかと思うので、簡単に説明しておきましょう。
さて、言葉の説明はこれくらいにして、本題の作成環境について。
HTML 文書を作成する場合、一般に用いられる環境としては以下の二つが主なものだと思います。
ほかには web 上で文字などを入力することによって自動生成されるもの、なんかもみられますが「文書作成」とは言えない気がするので今回は割愛します(笑)
では世間一般で公開されている HTML 文書、webpage と言い換えた方がいいかも知れませんが、それらはどちらで作られていることが多いか? 綿密に調べたわけではありませんが、自分が見てきたソースの限りでは、前者の方が多い印象を受けます。(meta 要素の記述やタグ記述のクセ等から判断しています)
WYSIWYG 環境は初心者にも取っ付きやすいですし、作業も容易、それに色々と難しい事を知らなくても見た目思い通りのものが出来るので、作成者にとって重宝だと思います。実際に、初めて作ろうとする初心者向けの数千円程度のものから、ウェブデザイナーと呼ばれる webpage 作成のプロをターゲットとする数万円のものまで、それこそ色々な製品があります。
じゃあ、これを書いてる当人は何を使ってるの? と聞かれると、WYSIWYG 環境とは程遠いテキストエディタです(笑)
「さっき WYSIWYG 環境が”重宝”って言わなかったか?」
とか突っ込まれそうですが、たしかに重宝だと思います。自分も出来ればそっちの方がいいな、とも思います。
しかし、HTML 文書を自分が考える「論理的構造を記述、定義された文書」として見ると、WYSIWYG 環境のソフトから出力されたそれは往々にしてかけ離れていることが珍しくありません。 モノによっては本文中に使われている要素は table, tr, td, font, br, hr, img くらいしか見あたらず、見出し要素 h や段落要素 p といった文書の基本要素が無かったり、blockquote 要素を本来の「引用」としてではなく「左右の余白」として(場合によっては幾重にもネストして)使っていたりする事もチラホラ見かけます。
もちろんソフトによってはある程度まともな要素の使い方をするモノもありますが、色々試してみるとやはり完全ではないようです。
なぜこんな事が起こるか、その理由は単純で、HTML 文書本来の姿と、WYSIWYG 環境のソフトが求めるモノが、本質的に違うから。前者はあくまで「論理構造が定義された文書」です。ところが後者はワープロやページレイアウトソフトといった「印刷したときに見栄えがする文書」を作成するソフトがその源流であり、基本的には「印刷したとき」が「ブラウザで見たとき」に代わっただけです。
文書の論理構造を定義する道具であるはずの HTML 、それを使って見栄えを決めようと言うんですから無理があって当然。乱暴な例えをするなら、焼く道具であるフライパンを使って、切る道具である包丁の代わりに魚を切ろうとするものでしょう(笑)
WYSIWYG 環境のソフトがダメ、だったらテキスト入力のソフトなら O.K.? と思ってました、はじめは。しかしそう単純なものでもないみたいです。。
「必要は発明の母」とはよく言ったもので、世の中には「HTML エディタ」と呼ばれるモノがあります。これは一見すると普通のテキストエディタですが、ツールボタンやコンテキストメニュー等によって、煩雑なタグ入力を容易にしてくれる機能を持ったツールです。
なるほど確かに便利、と始めは思ったんですが、ちょっと調べてみると何か変でした。
まずはその謳い文句、「タグを覚えなくても HTML が書けます」というのが多いんですが、論理構造を定義するのにその意味どころかタグも覚えないでどうするの? というのが一つ。
それからその作者さんの webpage である HTML 文書、見ると大概は HTML とそのバージョンを宣言する冒頭の一行すら見あたらない、というのも一つ。HTML をきちんと知る人なら、"<!DOCTYPE HTML" から始まる文書型宣言を欠かすことはないでしょう。
他にも細々したところで「?」となる点が散見されましたが、結局分かったことは「ツールの作者さん自身が HTML をあまり良く知らない」と言う事(汗) いくら便利な機能でも、作った人がそれではどこで間違った HTML を入力されるか分かりませんし、分かっていてもその度にその箇所を直すのでは何が便利なんだか分からなくなります。だったら使わない方がいい、と。
で、つまるところ。自分が知る限りにおいて、HTML 文書を本来の姿で作成するには、下手なツールの機能に頼らず自分の手で書くテキストエディタ。これが現時点で一番の HTML 文書作成環境だと結論づけました。
ただ、テキストエディタなら何でも良い、というとそう言うわけでもなく。やはりそれなりの HTML 文書を書くには、タグや属性値などを見分けやすくする表示機能や間違いのない HTML 入力支援機能があった方が何かと便利。最近の高機能テキストエディタにはそれらを備えた物や付加できる物も幾つかあるようです。
ちなみに自分はというと WZ Editor4.0 を使っています。これはプラグインマクロを導入することによって HTML 文書作成時の各種支援機能を入手することが出来る上、自分の好みに応じて柔軟に機能の ON, OFF、カスタマイズが可能で、かなり便利。一言で言えば「言いつけを良く守って余計な事をしない、便利なお手伝いさん」と言ったところ(笑)
あ、WZ を紹介したからと言って、これを読んでいる人に勧めるつもりは毛頭ありません(笑)。自分が知らないだけで、もっと便利な環境があっても不思議ではありませんから。でも、この機会にちょっと自分の作成環境を考えてみるのも一興かと思うんですが、どうでしょう?
先々週、昨日と、なんだか HTML について色々言ってますが、その中でも耳タコであろう「論理的記述、定義」という言葉がありますね。それこそ口を酸っぱく、って感じなんですが、読む方としては「なんでやねん?」って思うだろうなと(苦笑)
その辺、さっさと知りたい! と言う方はスパーンとこの辺とかその辺の section 読んでいただけると判ると思います。
知りたいけど英語は読むの面倒で嫌だっ! って人は…、自分がウダウダ書くまでしばらくお待ち下さい(笑)
今日はこれくらいで。
たわごと:
HTML には幾つかのバージョンがあるけど、元来は英語圏で作られた代物で、始めから多国語を考慮されては作られてなかったり。で、国際化(=多国語対応=日本語が正式に使える)バージョンというのは、実は HTML4.0 から。(それ以前に HTML2.0 をベースとした国際化 HTML2.X というのもあるけど、マイナー(^_^;;;)
したがって、日本語を扱う HTML 文書を書くときは冒頭に HTML4.0 or later の文書型宣言をして HTML 要素の lang 属性で ja を指定、あとは head 要素内に meta 要素で使用する文字セット名を明示するのが良い風味death。
・・・たわごとの方が長いぢゃん(^_^;;;