プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
JavaScriptを使わないでHTML5で作成するサイトのIE8表示対応をやってみる。
HTML5のIE8対応「html5shiv.js」の役割を誤解してた&HTML5のIE8対応って必要?」でも書きましたが
html5で作成するWebサイトをIE8以下に対応させようとした場合、
「『html5shiv.js』を使いましょう」なやり方が現在の主流みたいです。

<!--[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]-->

みたいな奴ですね。
ですが個人的にはこのやり方に抵抗があったのです。

あくまで個人的なこだわりなんですけどね。
できればJavaScriptを無効にしている人にも綺麗に見てもらいたいです。

と言う訳でIE8以下のブラウザでJavaScriptが無効でも
HTML5の表示が崩れない方法を模索しました。

結果(--)b


逃げ道は見つけた\(-∀-)/


けど、それがアリなのかは分かんねっ\(-A-)/

いろいろ考えたのですが結局divタグに置き換えるのが一番手っ取り早いんじゃね?との結論になりました。

と言う訳でこんな感じのコードにしてみましたよっとφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>テスト</title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="">
    <style>
        .header {display: block;}
        .aside {display: block;}
        .article {display: block;}
        .footer {display: block;}

    </style>
</head>
<body>
    <!-- ヘッダ -->
    <!--[if lt IE 9]><div class="header"><![endif]-->
    <header class="header">
ほげほげ</header>
    <!--[if lt IE 9]></div><![endif]-->


    <!-- メイン -->
    <!--[if lt IE 9]><div class="article"><![endif]-->
    <article class="article">

        <header><h1>ほげほげ</h1></header>
        <p>うんちゃらかんちゃら</p>
    </article>
    <!--[if lt IE 9]></div><![endif]-->


    <!-- 補足 -->
    <!--[if lt IE 9]><div class="aside"><![endif]-->
    <aside class="aside">
うんちゃらかんちゃら</aside>
    <!--[if lt IE 9]></div><![endif]-->


    <!-- フッタ -->
    <!--[if lt IE 9]><div class="footer"><![endif]-->
    <footer class="footer">

        <small>Copyright(C)2013 <a href="http://i-3-i.info">ITの万屋 PCS Piyopiyo Create Service</a>All Rights Reserved</small>
    </footer>
    <!--[if lt IE 9]></div><![endif]-->

</body>
</html>

「<!--[if lt IE 9]>」~「<![endif]-->」とHTML5の合わせ技。
IE8以下ではdivタグが有効になってそいつがレイアウトを頑張ってくれます。
元々のHTML5の新規タグは変なタグとして無視される感じ。
IE9以上&その他のブラウザではHTML5の新規タグがそのまんま使われる形です。
コードの見た目が微妙に汚くなっちゃうけどそれは勘弁してください。

結構頑張って考えたのですが駄目ですかね?(^^;
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事