HTML5対応：divで乗り切れ

メモ

HTML5対処法

--------------------- CENTERが無くなる -------------------------
.center{margin-left:auto;margin-right:auto;text-align:center}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<div class=center>  <!-- <center> -->
<table>...</table>
</div>              <!-- </center> -->
<div class=center>  <!-- <center> -->
<p>...</p>
</div>              <!-- </center> -->
---------------------- FONTが無くなる --------------------------
.red{color:red}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<!-- <p>abc<font color=red>de</font>fgh</p> -->
<p>abc<span class=red>de</span>fgh</p>
---------------------- Aの意味が変わる --------------------------
<div id=top/>  <!-- <a name=top/> -->
<p>なんだかんだ</p>
<a href="#top">先頭へ</a>
----------------------- Bの意味が変わる -------------------------
b{font-weight:bold}
.bold{font-weight:bold}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>abc<b>de</b>fgh</p>
<p>abc<span class=bold>de</span>fgh</p>

HTMLの次期標準としてのHTML5が定まろうとしています。

人間を機械の奴隷に貶めることを最終目標としたXHTMLのようなとんでもない ものではなく、これまでのHTMLとの互換性もある程度考慮されています。

しかしながら、考慮する互換性は、HTML5を決める立場にいる 人間がたまたまこれまでHTMLをどう使っていたかに に大きく依存してしまうため 人によっては大きな変更を余儀なくされます。

実は本ブログの記事もかなり厳しいことになります。

また、これまでは文の定義そのものとその表示形式指定はかなり分離されていましたが、 HTML5では文の定義に形式を持たせる形になります。例えば、文とは 別レベルであった<center>などが廃止され代わりに文の定義<table>で style="margin-left:auto;margin-right:auto;text-align:center"などと いうとんでもない寿限無指定するのが標準となります。

そこでメモ！

人によってこれまでのHTMLの使い方が異なりますので、このメモはあくまで 自分用です。

 <center>が無くなる。TABLEはどうする

<center>が無くなります。
しかもalign属性もなくなります。

例えば次のような記述

<center>
<table>
....なんだかんだ....
</table>
</center>

でテーブルを次のように

大型	→	小型
ワシ	→	スズメ
ペンギン	→	ツバメ
ツル	→	チドリ
ハト	→	メジロ

中央に置くことはできなくなります。

また<p>タグの場合も

<center>
<p>
AAA<br>
abcdef<br>
G<br>
hi-jkl<br>
MMMMM
</p>
</center>

で

AAA
abcdef
G
hi-jkl
MMMMM

という表現を得るということができなくなります。

 divで乗り切れ：

<table>タグや<p>タグのstyle=設定で中央寄せ設定することはできますが どう配置するかは内容とは別問題なので、直接タグに設定することは デザインと内容の分離の観点から好ましくありません。
また、同じstyle=設定を文章中に何度も繰り返し書くのは好ましくないので class定義をすることになります。しかしながら、設定したいスタイルには 全体の配置だけでなく色などもあります。classは多重派生させることは できませんので、中央寄せのこの色、左寄せのこの色といった具合に 無数のclass定義をすることになりかねません。

中途半端なHTML5でまっとうな中央寄せを行う方法はただ一つです。

各タグのclassとしては設定せず、<div>で中央寄せブロックを作ることです。
<table>のclassは例えばセルの色であるとか、ボーダーの形状とかを設定するものとして、 中央寄せとは別にすべきです。

次のようなcss定義を行い

.center{margin-left:auto;margin-right:auto;text-align:center}

これを<div class=center>で参照し、これまでの<center>を 置き換えます。

<div class=center>  <!-- <center> -->
<table>
....なんだかんだ....
</table>
</div>              <!-- </center> -->

tableだけでなくpでも同様です。

<div class=center>  <!-- <center> -->
<p>
AAA<br>
abcdef<br>
G<br>
hi-jkl<br>
MMMMM
</p>
</div>              <!-- </center> -->

 <font>が無くなる

<font>が無くなります。

例えば文に部分的に色を付けていた次のような記述

<p>XHTMLは<font color=red>機械向け仕様</font>であって人間向けではありません</p>

で次のような出力

XHTMLは機械向け仕様であって人間向けではありません

は得られなくなります。

 spanで対処：

<font>の代わりに<span>を使います。

<p>XHTMLは<span style="color:red">機械向け仕様</span>であって人間向けではありません</p>

良く使う色に関しては予めcssでclass定義し、それを使うべきでしょう。

.red{color:red}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>XHTMLは<span class=red>機械向け仕様</span>であって人間向けではありません</p>

 <a>が"アンカー"ではなくなる

これまでは

<a name="top"></a>
<p>そうれつらづら思んみれば...</p>

のような形でドキュメント内に"アンカー" を置きそこへのリンクを

<a href="#top">先頭へ</a>

のような形で 張ることができました。

HTML5ではname=でドキュメント内のアンカーを示すことができなくなります。 aはリンクを現すものとなりhref=が必須となります。

しかし、 href=によるドキュメント内へのリンクは生きており、#に続けて、リンク先の idを指定することができます。

基本的対処法:

id=は全てのタグに付けることができますので、これまでの<a name=XXX>を 完全に捨て、その前後のタグにidを振りそこへのリンクとすることができます。

<!-- <a name="top"></a> -->
<p id=top>そうれつらづら思んみれば...</p>
...
<a href="#top">先頭へ</a>

 divで乗り切れ：

<p>など文の本体に修正を施したくない場合、<div>あるいは <span>に置き換えることも 可能です。（これはHTML5の規約策定者の望まないやり方ですが、既存のものを 修正する場合はもっとも確実な方法です）

<div id="top"></div>    <!-- <a name="top"> -->
<p>そうれつらづら思んみれば...</p>
...
<a href="#top">先頭へ</a>

 <b>がボールドでなくなる

これまで<b>は字体をボールドとする指定でしたが、HTML5では 表示に変化を与える機能は無くなり、単に重要な単語、句の意味 を与えるだけになりました。

もっとも影響を少なくする方法は、bにボールド属性を与える 方法です。
cssで次のように定義しておけば

b{font-weight:bold}

これまでの記述がそのまま使えます。

 spanで対処：

<b>タグの属性を直接変えることなく <p>の中の一部をボールドにするには<span>を用います。

<p>abc<span style="font-weight:bold">de</span>fgh</p>

ただし、font-weight:boldを毎回書くのは大変すぎるので、cssに

.bold{font-weight:bold}

を定義し、文で参照する方が良いでしょう。

<p>abc<span class=bold>de</span>fgh</p>

 ＨＴＭＬ５に望むこと

web workerやweb strage他のJavascript拡張のみ残して、 XHTMLともども消えてほしい。

 ＨＴＭＬ６に望むこと

コンパイラの技術/センスを持っている人間を規約策定に含めてほしい。
え？コンパイラ屋は既に絶滅した？いやあ、どこかの物陰でひっそりと 生きているはずです。

• css定義にスコープを導入して欲しい。今の仕様では安心して使うことができない。
• HTML記述のincludeが欲しい。
• cssのクラスの多重派生、多重参照
• クラス名を付加したタグ。例えば<span.bold>といった形。この形を使うと 古いブラウザでは無視されるだけ。
• cssでのクラスとJavascriptのクラスの関連付け。特に初期化。
• cssでの条件定義。例えばtableで奇数行ならどうこう、偶数行なら動向といった定義。

--- 以上 : 先頭へ ---