#?SuikaWiki/0.9 page-icon="HTML"
[1] HTML の動作確認, してますか?
*この WikiPage の目的
[2] この WikiPage の最終的な目的は、
'''不思議マーク付けの撲滅'''である。
この目的の実現のために、不思議マーク付けをあらゆる角度から分析することを目指す。
とりわけ、
-なぜ人は不思議なマーク付けをするのか
-不思議マーク付けは、どう「進化」してきたか
-どのような不思議なマーク付けが存在する (した) のか
を解明することを試みる。
次の事柄は扱わない。他の WikiPage を新設するなりして欲しい。
-不思議マーク付けを不思議でないマーク付けにするには
-表現マーク付けと意味マーク付けの長短 (或いはこれに類する対比)
-特定の不思議マーク付け解説等への批判
--[WEAK[特定のものを例示することはあっても、それに深入りはしない。]]
[[#comment]]
*雑
- [44] ''ダサいホームページ作成マニュアル凝縮版'' 不思議マーク付けと''ダサいホームページ''には密接な関係がある。
-[55] CSS とかを使った変な指定も不思議マークアップに分類していいのでしょうか?
--実際のところそういう人達は外部スタイル・シートも知らないし、スタイル・シートは HTML
のむずかしめの表現拡張機能程度にしか思ってないでしょうから、一緒くたに不思議マーク付けとしてもいいでしょう。
--たとえ連中が将来外部スタイル・シートを知ったとしても。
-[56] 驚くべきことに、 XML + XSLT -> 不思議マーク付け HTML なんてことをする DQN もいる。
確かに XSL-FO はまだ使い物にならんわけだが。
[[#comment]]
*不思議マーク付けの系譜
原始 HTML
↓ HTML draft への提案
HTML 1.0, HTML 2.0 ⇔ Mosaic などの独自拡張 表現語彙の増大
HTML+, HTML 3.0 ・表 ↓
↓ ↓ : ・プラグイン 素材集 ↓
HTML 3.2 ⇔ NN, IE, その他の独自拡張 : ・ActiveX : 意味性の喪失
↓ ・フレーム ・style 属性 | ・スクリプト : .||`
↓ / ↓ | ↓ : (Dyn.) : 不思議マーク HTML原理
↓ |/ (ブームの終息) ------→ テーブル・ ↓ (HTML) : 付けの成立 ⇔ 主義成立
HTML 4 ~ ↓ レイアウト Flash ↓ ↓ ↓
XHTML 1 ⇒ DIV, SPAN, class による ↓ ↓ ↓ ・Stricter
↓ レイアウト (「DIV 厨」) → フォント タグ屋 ・不思議 CSS ・W3C 信者
XHTML 2.0 いじり ・不思議 XML ↓
[18] 違ってたら直して下さい...
- [20] テーブル・レイアウトの繁栄にはいわゆるオーサリング・ツールが非常に大きな役目を果たしましたよね。
- [21] レイヤーとかプッシュ技術とかも不思議マーク付けに関係するかな。
- [22] 今考えれば、 [[DHTML]] ってのは不思議マークアップの最終兵器だったんでしょうか。
- [23] >>22 DHTML の時代を境に、怪しい技術は HTML から CSS や DOM に移っていきましたからね。
- [24] >>23 このまま CSS や DOM の標準化が進んだら、怪しいのは XML に移行するのかな。 (もうしてる気もするけど。)
- [25] >>24 XML からも追い出されたら?
- [26] >>25 Unicode 辺り? (既に十分怪しいか。)
- [27] >>24-27 off topic
- [28] 不思議マークアップの歴史を考えるに当たって、不思議マークアップのための要素(タグ?)を生み出してきたベンダー側と、不思議なマークに走った著者と、分けて考えるのがいいのか、まとめて考えるのがいいのか。
- [29] >>28 case by case?
[57] 本当の意味での不思議マーク付けは [[Mosaic]]
の登場、あるいはそのちょっと前 (つまりカンブリア爆発期)
辺りが起源なんだろうけど、
実際に不思議マーク付け時代の幕を開いてしまったのは多分 [[NN]]
2 の[[フレーム]]の登場だと思う。
このフレームの Web への導入はおそらく inline image
の導入に次ぐ大革新だっただろう。
[WEAK[([[ハイパーテキスト]]における新たな[[リンク]]の形態という意味でもこれらは重要な出来事だ。しかし残念ながらどちらも失敗であった。なぜなら、両者とも単に見た目を整えるに過ぎず、意味の介在する余地すらなかった。)]]
フレーム未対応のブラウザが云々の声をよそに大流行。
(たぶん [[NN]] がおおはやりだったのもそれが原因だ。)
[58] ところが、 [[WinIE]]3 がフレームを実装して、
他の [[UA]] も次々と追随し、あるいは新機能 ([[frameborder]]
とか。) が追加されていく中で、
フレームへの不満は徐々に高まる。やれ [[URI]]
が見えないだの、やれブラウザのナビゲーションが上手く動作しないだの、云々。
そして人は次第にフレームから離れていく。
競って導入したはずの企業サイトや個人サイト
(一部趣味系を除く。) からは次々とフレームが消され、
新たな時代の主、[[テーブル・レイアウト]]へと置きかえれれて行ったのだ。
[59] [CODE(HTML)[[[table]]]] 要素。その名の通り、
表を記述するための要素型(群)である。
しかし、この要素型を「拡張」 (あるいは「裏技」と)
して、「Web の表現力を高める」のに使えることに気づいた男
(あるいは女) がいた。
最初は、ほんの可愛いものであった。
画像と説明を並べたいが、 [CODE(HTML)[[[align]]=right]]
ではうまくいかない・・・そうだ、枠無しの表を使えば!
文字の横に長さがブラウザの幅に合う横線を入れたい・・・
そうだ、枠無しの表を使えば!
この小さな小さな「発見」が、魔のテーブル・レイアウトの時代の扉を開いてしまったのだ。
[60] それから数年。「ウェブ・デザイナー」
の仕事は、ブラウザの画面をどう (テーブルのセルとして)
分割する (させる) か頭を悩ますことと言っても過言ではなかろう。
[[ロゴ]]の画像は、細かい四角形に分け、テーブルの各セルに分置する。
その幾つかは実はリンクである。
この部分をもうちょっと下に動かしたい・・・
[[spacer.gif]] だけのセルを作って、サイズを調節しよう。
こうして彼らは、ブラウザというキャンパスをテーブルという線を引いて、
その間の穴を埋めていくのである。
[61] フレームは、もはや過去の遺物だ。
そんなものを使わずとも、テーブルで分割すればすむだけだ。
内容が多くてスクロールすると、フレームと違って他の部分まで隠れてしまうが、大した問題ではない。
頁の最後に「ページの先頭へ」ボタンを用意したからね。
- [62] しかしテーブル・レイアウトでは位置あわせが面倒である。そこで(?)登場したのが[[レイヤー]] ([CODE(HTML)[[[layer]]]/[CODE(HTML)[[[div]]]]) である。画期的(w)なことに、これらの[[タグ]]を使えば、レイヤーの位置をピクセル単位で指定できるのだ! ということで、このレイヤーを含む [[DynamicHTML]] が、鳴り物入りで登場したのである。
- [63] ところが、 Dynamic HTML はこけた。そもそも DHTML 自体は実体がない、単なる技術の集合だったし、その構成技術は Netscape と M$ で互換性がほとんどなかった。
- [64] こけたとはいっても、普及しなかったわけではない。 DHTML の一部とされていた技術は不思議マーク付けの基本技術として浸透した。
- [65] こうして、不思議マーク付けサイトの典型的形式として、テーブル・レイアウト, [[CSS]] の埋め込みによる装飾、場合分けによる JavaScript と JScript による処理の埋め込み、じわじわ広がってきた [[Flash]] による派手な装飾といった構成が確立することとなる。これらは、おおむね [[WinIE]] (当初は 4, 21世紀に入ってからは5〜6) 及び Win[[NC]] (当初は 4.0 系, 後に 4.7 系) で作者の意図したように見られることを想定している。
- [66] >>65 個人サイト系については、 [[Windoze とIEの統合]]による [[Netscape]] の影響力の低下から、 [[NC]] の切捨てが進みました。 (しかし最近では [[Mozilla]]/[[Netscape]]7 が盛り返しています。)
- [67] 個人サイト系の一部を中心に、複雑なテーブル・レイアウトから脱却して、 CSS レイアウトに移行しようという動きが出てきて、現在もその中にあるわけですが、 CSS のためのマーク付け, すなわち新たな種類の不思議マーク付けが後を絶ちません。 CSS の効果を使うための意味の無い [CODE(HTML)[[[div]]]] の乱発などです。 (この傾向は >>62 の DHTML からの流れによるものと思われます。)
- [68] CSS の、例えば [CODE(CSS)[[[overflow]]]] の利用によって、テーブル・レイアウトによる擬似フレームの抱えていたスクロールの問題を解決した、 CSS 擬似フレームもはやってます。 [WEAK[(そのための [CODE(HTML)[div]] 乱発とかも。)]]
- [69] 不思議マーク付けにもいろいろありますが、その中心的問題となってきた(擬似)フレームに注目すると、単にマーク付けが不思議であるか否かではない問題があることに気づきます。元々の WWW がはっきり提供していなかった、[[サイト]]という概念とその[[頁]]との関係。著者が伝えたい情報の塊と読者の知りたい当該情報の関係性をいかに提示するか。平たく言えば、よい[[ナビゲーション]]をいかに実現するのか。ブラウザ上の見た目の向上ばかりに気を取られていて、もっと大事なことをなおざりにしてきたのです。実際最近になって [[Sidebar]] や[[タブ]]や [CODE(HTML)[[[link]]]] 要素の [[UI]] が本格的に実装されるまで、ブラウザのナビゲーションの機能は [[Mosaic]] からほとんど変わってない。だから、「ブラウザに表示されるコンテンツ」が、内容と見栄え、それに加えて[RUBY[案内] [ナビゲーション]]まで、不思議な手法を使ってでも詰め込まなければならなかったのです。
[[#comment]]
*不思議マーク付けが XML 時代にも通用することの n つの傍証(w
-[1] ''XHTML入門''
--[2] 内容は無茶苦茶。しかもこんな内容を2003年になってから書けること自体賞賛に値する。
--[3] ''CSSコミュニティの功罪を懐かしむスレ 9th''
[[#comment]]
*独自拡張 HTML 要素・属性
→[[HTML独自拡張]]
*不思議マーク付けの検証
-[31] ''.note - Diary.note''
--[30] ''CSSコミュニティの功罪を懐かしむスレ 11th''
-->>30 の 237 曰く「transitionalなマークアッパーは「見た目」に固執するので、
じゃあ、マークアップを見た目に反映させましょう、ってコンセプト」。すばらしい。
- [32] >>31 とりあえず [CODE(CSS)[*{background-color:red}]] にした上で、 W3C にある要素は OK 色にしていけばいいんじゃないかな。そうすれば独自拡張要素にも対応できる。更に、属性セレクタも使えば(ry。但し、文書型宣言に応じた判定はできないけど。 ([[XHTML]] でない [[HTML]] で使われてる [[ruby]] 要素を判定する方法はある。 CSS に [CODE(CSS)[RUBY {}]] と書けば良い。 ([[XML]] では要素名の大文字・小文字を区別しないため。))
[[#comment]]
*不思議マーク付けは、不思議だと宣言しておけば不思議でもない。
-[33] 不思議広告への対策
--[34] ''Geocities で valid な HTML を - マークの付けかた''
[[和塩]]や [[isweb]] の不思議広告挿入 HTML を [[SGML]]
的に妥当にしてしまう。有名な Satoshi ﾀﾝの。
--[35] ''ad_xhtml''
[[XREA]] の広告は手動挿入にすれば自分でどのような要素をどう使うかが決められるそうです。ということで、実際に [[XHTML]] でつかってみたのがここ。
--[36] [[Cool]] の自動挿入広告は、常に HTML 文書の一番最初に挿入されるため、 >>34 の方法では対策のしようがありません。あきらめましょう。
-[37] その他不思議マーク付けをせざるを得ないときは、文書の先頭に [CODE(HTML)[]]
とでも書いておきましょう。 (もちろん [[HTML]] 的にも [[SGML]]
的にも [[XML]] 的にも意味はありません。気休め。)
-[38] >>37 間違っても、その文書が適合しない [[DTD]]
を書いてはいけません。不思議度アップを目指すなら話は別ですが。
[[#comment]]
*メモ
- [47] たとえば、半角仮名を多用している ''魔法のiらんど'' にある無料サイト群は[[半角かな]]使用率が高い。半角仮名率だけじゃなくて、不思議マーク率とか、利用者の質とかも、色々なサイト群で、似たようになる傾向がなんとなくではあるけど観察できる気がします。なんか興味深いな。
- [48] >>47 Windoze 95 で半角かなの使用が盛り上がって、 Windoze 98 で盛り下がったのと似たようなもの?
- [49] >>47 ﾊﾟｹ代(ryという落ちではないのか?
- [50] ''HTML講座'' : 高い金取る不思議マーク付け講座は他にも仰山ありそうだ。詳しくは明日の朝刊で(謎)
- [51] ''頁のタイトル''
- [52] ''* Web Design Tips * by ETRE-M''
- [53] ''ホームページを作ろう!''
- [54] ''CSS Maker - スタイルシート作成ツール''