LoginSignup
22
20

More than 5 years have passed since last update.

HTML3.2でできること

Last updated at Posted at 2016-08-24

諸事情でHTML3.2準拠でコーディングすることになったので自分用にまとめました:innocent:

2行でわかるHTML3の歴史

実に20年近く前の仕様です:innocent:

  • 1995年3月、HTML3.0ドラフトが公開されるが策定中に破棄され勧告に至らず。IEとNetscapeブラウザ戦争のとばっちりをくらった模様。
  • 1997年1月、HTML3.0とはまったく別物としてHTML3.2が勧告される。なおその年末の1997年12月にはHTML4.0が勧告される。

(3.1はどこへいったのだろう…?)

コーディングにあたり押さえておきたいポイント

:pencil2: JavaScript は利用不可。CSSは外部化で利用可

HTML3.2に<style> <script> 要素は存在していますが、将来のための予約語としての位置づけになっています。
(2016年現在のブラウザであれば実際に記述すれば動作するでしょうが、HTML3.2の仕様的にはNGという認識です。)

CSSはlink要素で外部ファイルを読み込むことが出来ます。ただしHTML側にid属性・ class属性が存在しないため、要素セレクタでスタイル指定していくことになります。

なおstyle属性も存在しないため「この一か所だけスタイル変えたい」といったことも当然出来ません。

:pencil2: 基本的な要素は存在している

現在でも使われている、ごく基本的な要素はHTML3.2でも定義されています。body要素内で使える要素は下記の通り。

h1-h6 / address / p / pre / div / center / blockquote / hr / a / applet / font / basefont / br

  • フォントスタイル tt / i / b / u / strike / big / small / sub / sup
  • フレーズ em / strong / dfn / code / samp / kbd / var / cite (※spanは無いので注意)
  • リスト・定義リスト ul / ol / li / dl / dt / dd
  • テーブル table / caption / tr / th / td (※theadtbodyは無いので注意)
  • フォーム form / input / select / textarea / isindex
  • 画像 img / map

廃止されてしまった懐かしい要素もありますね…。
各要素に対して使える属性は仕様を要確認。
参照: W3Cの仕様非公式日本語訳

:pencil2: レイアウトどうする?

外部CSSを使うにしてもidclassセレクタを利用できないため、floatを用いるのは危険な匂いがします。子セレクタを駆使して頑張ればなんとかなるかもしれませんが、要素が増減した時に即死しそう…。

見た目の優先度が高い場合は、セマンティックHTMLを諦め古の技術であるテーブルレイアウトやspacer.gifを用いるのが無難かなと考えます。

なおCSSを使えない場合はさらに厳しい:innocent:

外部ファイルの利用がNGな状況だと、出来ることはさらに限られます。

(外部CSSを使える場合でも、実際は全体のフォント設定やリスト・テーブルの基本的な見た目調整くらいしか出番は無いかもしれません。ベーシックな「ヘッダー+左右ナビ+本文エリア+フッター」という構成のページでも、要素セレクタだけで各エリアのパーツをスタイリングするのは難しい気がします。)

:pencil2: 背景色・背景画像の設定はbody要素のみ

背景画像の表示位置や繰り返し指定は出来ず、一律タイル状に配置されます。

:pencil2: フォントの設定は?

font要素でサイズ、色を設定できます。フォントファミリーの指定はできませんが、tt要素で固定幅テキストの実装は可能です。

  • フォントサイズは <basefont size="n"><font size="m">ほげほげ</font>で指定。<font>の方は-3、+3のような相対指定も可能。
  • リンクテキスト色はbody要素の属性で変更可能。

:pencil2: 背景色ボックスは無理だけど、枠線ボックスはtableと画像で実装できる

テーブルを9分割して四辺のセルに色付き画像を配置することで実装可能です。
(ただしIE8~9で画像上下に数pxの余白がついてしまったため、対象ブラウザによって実装有無要検討。)
テーブルを入れ子にして、親テーブルに背景色設定&cellpadding="1"にすれば…!と思ったのですが、HTML3.2のtablebgcolor属性を使えなかったのでした。

結論:画像で頑張る or 諦める

CSSを普通に使えないというのが致命的痛手です。
HTML3で今風な見た目のページを作ろうというのはそもそも無理があるので、リッチにデザインされた画像をペタペタ貼り付けるか、潔く諦めて見た目のレベルを落とすかの二択になりそうです。

ディレクターとデザイナーを交えて何が出来て何が出来ないか、どこまでやる必要があるか事前に会話しておく必要があるでしょう。

Good Luck:innocent::innocent::innocent:

参考サイト

22
20
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
20