« ◆管の口での音反射の原理:定常波の理由の理由 | トップページ | ◇「食うか食われるか」は自然界でありうるか? »

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指定 も待ち望まれた当然の機能でしょう。

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を使え」という所ですね。

|

« ◆管の口での音反射の原理:定常波の理由の理由 | トップページ | ◇「食うか食われるか」は自然界でありうるか? »

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/489055/34924884

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

« ◆管の口での音反射の原理:定常波の理由の理由 | トップページ | ◇「食うか食われるか」は自然界でありうるか? »