HTML5対応：divで乗り切れ: 万象酔歩

HTML5対応：divで乗り切れ

メモです。

--------------------- 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>
  ...
<p>...</p>
</div>              <!-- </center> -->
---------------------- alignが無くなる --------------------------
.right{float:right}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<!-- <embed src="..." ... align=right /> -->
<div class=right>
<embed src="..."  ... />
</div>
---------------------- FONTが無くなる --------------------------
.red{color:red}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<!-- <p>abc<font color=red>de</font>fgh</p> -->
<p>abc<span class=red>de</span>fgh</p>
----------------------- 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>
---------------------- Aがアンカーでなくなる  -------------------
<div id=top/>  <!-- <a name=top/> -->
<p>なんだかんだ</p>
<a href="#top">先頭へ</a>

HTML5では簡潔な記述が捨てられる

HTMLの次期標準としてのHTML5が定まろうとしています。
XHTMLを本道から外したことは大いに評価できますが、極めて残念なことにこれまで非推奨であるとはされながらも機能可能であった<center>などの簡潔な視覚タグが廃止されます。
さらにalignやwidth属性なども廃止になるため広範囲に大きなダメージをあたえます。

基本的には視覚要素と内容は分けた方が良いと考えています。HTML5のように内容タグのstyleに視覚要素を書くことは内容が分かりづらくなり決して良いことではありません。例えば、テーブルをどこに置くかはテーブル自体の性質ではありません。

HTMLが広まった理由の一つは簡潔であることです。例えば頻繁にでるパラグラフは<paragraph>でなく<p>としたり、中央配置を<center>としたりと、現実的で無理のない記述だったのです。
途中導入ではありますが、cssはなぜXMLでなく独自の文法にしたのでしょう？ XMLでは簡便な記述とならないからです。
HTMLが使われるのはこういう非原理主義、現実主義によるものです。
「書きやすさ、見やすさ、視認性の高さ」を無視した原理主義には決して陥るべきではありません。

とはいえ、一応対処法を考えます。
機械的な変換法のサンプルも載せます。
もちろん、そもそも<center>や<font>などは使用していないし、要素を並べる目的で<table>を使ったりはしていないという人には関係のない記述です。
また、ブログやjavadocその他、HTMLのパーツとして書くのではなく全体を書く場合はHTML4の宣言でいけますし、多分その場合でもHTML5の追加要素は使用可能となるでしょう。

これほど煩わしいstyle記述法が世間に受け入れられるはずはないので、もし、仮にHTML5が一般化するとすれば、たぶん「標準cssセット」などというのが出てcenterクラスだとか middleクラス（垂直方向中央）だとかred/blue...クラスが与えられるんだろうなと推測しています。
margin-left:auto;margin-right:auto で中央置きを示すなどというのはどう考えても低レベルの内部処理がそのまま表にこぼれ出して来たとんでもない記述です。退化です。その内<center>タグに再進化する可能性があると考えます。

参考記事:
HTML5は空間指定に関わる大きな機能ダウンの他に小さな機能追加が行われます。videoやcanvasは現時点ではFlashで充分ですが、 MathMLは数式を必要とする人間には有難い機能です。 tableを行ごとに色違いとすることを可能とするcss3指定も待ち望まれた当然の機能でしょう。

HTML5,MathMLを使ってみる
WEB上で動くMathML生成ツール:HTML上で簡単な記述からMathML記述を生成します。
◆HTML5-MathMLを実用的にする式変換ツール
HTML5/CSS3でtableの色を一行毎に変える
canvasを使ってみる（2)；しかも立体
矢印をプログラムで描く；計算法 (canvasを例にして説明）
◆もやい結びを色々な角度で (canvasの実応用です）
HTML5:video要素試験
HTML5のaudioを使ってみる
HTML5のaudio要素、メソッドとイベント

WebStorageやWebSocket,WebWokerなどは期待しますが、さしあたあってvideoやcanvasよりはcenterの方が有難い。<center style="also-virtical"> で行単位での垂直中央寄せもやってくれるともっと有難い。内容タグをいじらず、外側で配置その他を指示するタグが追加されるといいなあ。HTML5の思想の否定になるが。
ついでにいうと、<import>が欲しい。
さらに言うと<script type=text/plain>を用意し、 javascriptで記述が拾えるといい。もちろん</script>までは<などの制御文字もそのまま使える。
等々、人それぞれ希望が違う訳で、、、

HTML5を完全に否定するつもりは全くありませんが、どうもHTML5を押す勢力の中に非寛容な原理主義（しかも後付けの原理）の臭い、怪しい宗教のような臭いを感じるのも気になります。

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

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

次のようなcss定義を行い

<style type="text/css">
.center{margin-left:auto;margin-right:auto;text-align:center}
</style>

これを<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> -->

実はこの「margin-left:auto;margin-right:auto;text-align:center」の設定は以前HTML4対応をしようとした時「こんなまどろっこしく長ったらしい記述が HTMLの標準になりうるはずがない。」と<center>でそのまま行くことにした大きな要因なのですが、何ら改良されることなく<center>が無くなるのは残念です。あるいはもっと簡潔な記述があるんでしょうかね？

＃＃＃なんと！
どうやら、GoogleChromeでは<div>による中央寄せは<table>に関してはできないようです。
<p>の文字列は中央によります。
もちろん<center>によるtableの中央寄せはできます。

align属性で整列させることができなくなる

要素にalign属性を指定して、右寄せし、左に説明文を書くなどといったことが出来なくなります。

これはHTML5対応を行ってあるブラウザで既に発生している「障害」です。

全ての要素というわけではありませんが、例えばflash(swf)をembedで参照する場合などalign=rightで右寄せが出来なくなってしまっています。
例えば次の記述で本来は右寄せの動画が得られるはずですが、一部のHTML5対応ブラウザではalign=rightが効かなくなってしまっています。

<embed src="http://k-hiura.cocolog-nifty.com/swf/namame_light.swf"
 quality=high align=right
 width="200" height="140" type="application/x-shockwave-flash"  />

右に動画が出ていれば問題ありませんが、IE9他一部のブラウザではalign が無効となり、上に出てしまいます。

divで乗り切れ：

<div>でfloat:right指定を行い、それを参照します。

css定義を次のように行います。

<style type="text/css">
.right{float:right}
</style>

次のように参照します。

<div class=right>
<embed src="http://k-hiura.cocolog-nifty.com/swf/namame_light.swf"
 quality=high align=right
 width="200" height="140" type="application/x-shockwave-flash"  />
</div>

右に動画が出ていれば成功しています。

ところが！
残念ながら、この方法では、IE8ではココログに置くと画像は右に出るものの文字列が回りこまないことが分かりました。
しかも、画像が大きい場合HTML5対応ブラウザであっても右寄せにならず文字列の回り込みが出来ないことがあることが分かりました。
◆エアリーズ号の構造;2001年宇宙の旅では結局HTML5対応のためalignの代わりに、大昔のやり方であるTABLE でのレイアウトを採る形に変更しました。
HTML5の行く先は結局<div>の大量使用とレイアウトのための<TABLE>復活です。

<font>が無くなる

<font>が無くなります。

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

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

で次のような出力

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

は得られなくなります。

spanで対処：

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

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

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

<style type="text/css">
.red{color:red}
</style>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<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>

機械的置き換えの例（あくまで例にすぎません）

記述法がパターン化している場合機械的な置き換えができます。
万が一、既存のHTML（あるいはHTMLパーツ）を置き換えざるを得なくなった場合のためのメモです。

antが実装されているなら、例えば次のようなbuild.xmlファイルを作成し機械的変換を行うことが可能です。危険は伴いますが何百とあるファイルを手で修正するのはもっと危険です。

<?xml version="1.0" encoding="UTF-8"?>
<project default="main">
   <target name="main" depends="convert-all">
      <echo>=== convert done ===</echo>
   </target>
   <!-- 変換 -->
   <target name="convert-all">
      <antcall target="convert"><param name="charSet" value="utf-8"/></antcall>
      <antcall target="convert"><param name="charSet" value="shift-jis"/></antcall>
   </target>
   <!-- ファイルの文字コードで変換 -->
   <target name="convert">
      <delete dir="./${charSet}"/>
      <copy todir="./${charSet}">
         <fileset dir="." includes="**/*.htm" excludes="utf-8/**,shift-jis/**"/>
      </copy>
      <!-- center -->
      <replaceregexp match="&lt;center>"
replace="&lt;div style='margin-left:auto;margin-right:auto;text-align:center'>"
                     encoding="${charSet}" flags="g">
         <fileset dir="./${charSet}" includes="**/*.htm" />
      </replaceregexp>
      <replaceregexp match="&lt;/center>" replace="&lt;/div>"
                     encoding="${charSet}" flags="g">
         <fileset dir="./${charSet}" includes="**/*.htm" />
      </replaceregexp>
      <!-- a name -->
      <replaceregexp match='&lt;a name=(.*)/>' replace="&lt;div id=\1/>"
                     encoding="${charSet}" flags="g">
         <fileset dir="./${charSet}" includes="**/*.htm" />
      </replaceregexp>
      <replaceregexp match='&lt;a name=(.*)>&lt;/a>'
                        replace="&lt;div id=\1/>&lt;/div>"
                     encoding="${charSet}" flags="g">
         <fileset dir="./${charSet}" includes="**/*.htm" />
      </replaceregexp>
      <!-- b -->
      <replaceregexp match="&lt;b>"
                     replace="&lt;span style='font-weight:bold'>"
                     encoding="${charSet}" flags="g">
         <fileset dir="./${charSet}" includes="**/*.htm" />
      </replaceregexp>
      <replaceregexp match="&lt;/b>"
                     replace="&lt;/span>"
                     encoding="${charSet}" flags="g">
         <fileset dir="./${charSet}" includes="**/*.htm" />
      </replaceregexp>
      <!-- font color -->
      <replaceregexp match='&lt;font color=(.*)>(.*)&lt;/font>'
                     replace="&lt;span style='color:\1'/>\2&lt;/span>"
                     encoding="${charSet}" flags="g">
         <fileset dir="./${charSet}" includes="**/*.htm" />
      </replaceregexp>
   </target>
   <!-- 二次ファイル、ディレクトリを削除-->
   <target name="clean">
      <delete dir="./utf-8"/>
      <delete dir="./shift-jis"/>
   </target>
</project>

この例ではhtmlソースの文字コードがutf-8とshift-jis混在しているとして、それぞれの文字コードで変換を試みています。
カレントフォルダ下に複数のフォルダがありそこに.htmファイルがあるとしています。ant起動すると、utf-8として変換したものがutf-8フォルダの下に、shift-jisとして変換したものがshift-jisフォルダの下に置かれます。

カレント
  +-- A --- aaa.htm     オリジナルのHTML
  +-- B --- bbb.htm　　 オリジナルのHTML
  +-- utf-8
  |   +----- A --- aaa.htm    utf-8で解釈して変換したHTML
  |   +----- B --- bbb.htm    utf-8で解釈して変換したHTML
  +-- shift-jis
      +----- A --- aaa.htm    shift-jisで解釈して変換したHTML
      +----- B --- bbb.htm    shift-jisで解釈して変換したHTML

元のファイルはそのまま残します。変換後のファイルに問題がなければ置き換えます。
変換例を示します。

--- 元の記述
<a name="top"></a>
<p>
何だ<b><font color=red>かん</font></b>だ
</p>
<center>
<p style="background-color:#CCCCCC">
<a href="#top">先頭へ</a>
</p>
</center>
--- 変換後の記述
<div id="top"/></div>
<p>
何だ<span style='font-weight:bold'><span style='color:red'/>かん</span></span>だ
</p>
<div style='margin-left:auto;margin-right:auto;text-align:center'>
<p style="background-color:#CCCCCC">
<a href="#top">先頭へ</a>
</p>
</div>

変換はclass定義をせず、各タグの中でstyle指定をしています。
ant cleanでutf-8,shift-jisフォルダは消去されます。

この置き換え例はあくまでこのブログの各記事の記述パターンによるもので、人によって当然異なります。

＃＃＃

2010/6/1:機械的変換法の例を追加。

2010/6/3:XHTMLに対する評価についての表現を穏やかにした。
XML原理主義は人間向きではないとは言え、HTMLをXML内でそのまま取り扱える、同じ解析エンジンが使えるなどのメリットがありますからね。それに対し、視覚タグ廃止は原理主義者の自己満足以外のなにものでもない。

2010/7/13:記述を簡素化。参考記事へのリンク追加

2010/7/13:簡素化したが、結局またグダグダと伸びてきた

2011/5/6:cssの記述を赤で強調
不思議なことに「<center>はcssで代用可能だから要らない」と言っている原理主義記述の殆どで、cssで具体的にどう書けばいいかを述べておらず、本記事も「html5 center」とか「html5 中央そろえ」などで検索されることが多いので、この部分が目に入りやすいようにすべきと考えた。

2011/5/16:align右寄せ記述追加
IE9がHTML5対応しembedのalignが動かなくなったので、急遽追加。
「HTML5を使う気が無ければ別にそのままにしておけばHTML4で動くんだからいいじゃん」などとお気楽な流言に騙されてはいけません。
それにしても、昔はほとんど使わなかった<div>がHTML5では大活躍。これなしではcanvasに字も被せられないしねえ。

＃＃＃

HTML5など「退化」に過ぎないように思えてきた。

HTMLにはレイアウトのみ定義し、内容をjavascriptで流し込む

CSSによるレイアウトではブラウザによって微妙に異なってきます。

遊びサイトではいいですが、レイアウト崩れが許されない商用サイトを構築する場合<table>でレイアウトするしかなさそうです。
基本的にhtml記述はレイアウトのみを定め、内容はjavasriptで流し込むという形が、確実です。多国語対応なども容易になります。

この記事のタイトルは「divで乗り切れ」ですが、「仕事ならtableを使え」という所ですね。

2010年5月28日 (金) パソコン・インターネット | 固定リンク
Tweet

トラックバック

この記事へのトラックバック一覧です： HTML5対応：divで乗り切れ:

万象酔歩

あれやこれやと

携帯URL

最近の記事

HTML5対応：divで乗り切れ

トラックバック