HOMEブログサイト制作WordPressなどのCMSで、HTML5とHTML4を共存させる簡単な方法

WordPressなどのCMSで、HTML5とHTML4を共存させる簡単な方法

投稿日:2011年11月01日

Windows XPのサポートも今年いっぱいで終了して、いよいよXP時代も終了?かと思いきや……
サイト制作の世界では未だにIE8対応から抜け出せない状態です。
しかし、世の中は確実にHTML5が標準になりつつあります。そこで、WordPressなどのCMSでHTML5とHTML4(IE8対策)を簡単に行う方法を公開します。

ご注意

ブログ移転に伴い、この記事は2011年11月に公開されたブログを一部修正して、再掲載しています。
元のブログはこちらです。
横浜で、ホームページ製作をしている自転車乗りの堅物。 横浜本田WEBブログ

WordPressなどのCMSで、HTML5とHTML4を共存させる簡単な方法

と言う事で、実際のやり方は色々あると思いますが…
最も簡単で一番確実で手っ取り早いのは、DIVタグを使ったブロック要素でのレイアウトが無難でしょう。

ソースの見栄えは悪くなりますが、これが一番確実でしかもW3Cにも準拠した方法でしょうね。

そもそもHTML4は現行※1のブラウザーではIE8以前の物が殆どです。そのIE対策としてはブラウザーのユーザーエージェントでテンプレートを振り分けるという方法を以前ご紹介しました。(うちのサイトもそうしてます)が、IEだけの為にわざわざテンプレートを作るのはどうなのよ?そこまでの労力を掛ける必要があるの?
と言うのが正直なところです。

幸いな事に、IE8以前のブラウザーはHTML5の新しいタグやCSS3の新規に追加されたプロパティは無視(認識されない)されるので、昔のCSSハックではありませんが、そこを上手く利用させてもらいます。

製作方法は簡単です。
IE8でもHTML5のソースコード自身を読まない訳ではないので※2、基本のソースはHTML5&CSS3で製作します。

後は普通にHTML5とCSS3でガンガン書いてゆきます…が、CSSのクラス設定で、クラス名に特定のHTML5のタグを指定せずにあくまでDIVタグでレイアウト作業をします。

もちろんHTML4で使用されているタグに関しては、クラス指定をしても問題ありません。
問題になるタグは、HTML5から追加された新しいタグのみです。
新しいタグはIE8では無視されるタグなので、タグにクラス指定をしても無視されます。
ちなみに、タグに直接指定をしても、タグ内にクラス指定をしても、どちらも無視されるので、ご注意ください。

例:<section>に対して直接クラス指定をしても、
<section class="●●●">としても結果は同じ。
HTML5で追加された<section>はIE8では無視されるので、全く意味をなさない。

一見、タグ内にクラス指定すれば、CSSが効きそうに思えますが、ブラウザーがタグを認識しない時点で、次のクラス指定は無意味なものになるので、無駄です。

こうなると、もうレイアウトによる見栄え云々以前の問題として、まともに表示(レイアウト)されないのですから、仕方がないのでDIVタグを使って、がっちり固めるしかありません。

別にW3CではDIVタグを認めていないわけではないので、現状ではこれが最も簡単にできる、HTML4&HTML5の表示対策になるでしょうね。
ソースはかなり煩雑になりますが、表示(レイアウト)されないよりははるかにマシ。という事で。

※1
このブログの初期公開は2011年11月です。

※2
IE8でページソースを表示させると、ソースコードには、HTML5のタグも表示されます。つまりブラウザーとしてはタグは読み込んでいるが、HTML4のタグとしては認識されていない。と言う事になります。

お問い合わせはお気軽に

この記事が面白いと思ったら、下のボタンをお願いします。

御社にとってのホームページとは何ですか。

横浜でホームページ製作を始めて、10年以上が経ちます。ホームページ制作会社は、横浜にも数多くありますので、私の様な個人で仕事をしている者へのお仕事依頼はなかなかありませんが、ご相談頂ければ、フットワークの良さと、フレンドリーで身近にお役にたつようなお仕事を心がけております。

ホームページ製作はもちろんのこと、DM製作やパンフレット等の紙媒体の製作も行なっております。

最近は、CMS(主にWordPress・modx)によるホームページ制作を主に行なっております。

直接お話をお伺い出来るエリアは、横浜市内および、横浜近郊の神奈川県。東京都23区の一部とさせて頂いておりますが、エリア外でも対応が可能ですので、まずは、お気軽にご連絡ください。