HTML5のIE対策で上手くいかない問題

2014/03/27 20:38

このQ&Aのポイント

HTML5のIE対策を試みても上手くいかない問題があります。参考サイトやルート指定などを確認しても解決できません。
HTML5のタグが認識されない場合、表示が崩れる問題が発生しています。タグが認識されるとABCの文字が縦に並び、認識されないと横に並びます。
ルート指定に間違いがある可能性があります。HTML5のページからjs_html5フォルダ内のhtml5shiv.jsを読み込む必要があります。

unkoburiburi
お礼率80% (4/5)

HTML
回答数3
ありがとう数8

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/03/29 09:16 回答No.3

＞難しすぎて意味が分かりません(´；ω；｀) 　皆最初はそうだったのです。　ただ、HTML5は膨大ですからまともに取り組めば挫折します。　そのために、その元となったHTML4.01strictをマスターして、 HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff ) 　に進むのが最も効率的でわかりやすいです。　HTML4.01strictは、HTML5で廃止されるプレゼンテーションに関わる要素や属性を含みません．・3.5. 不在の要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#absent-elements ) ・3.6. 不在の属性( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#absent-attributes ) 　HTML4.01以前は、デザインのためにHTML要素や属性を使用していたため煩雑でした。　HTMLスタイルシートの学び方は、まず文書構造だけをきちんとマークアップする技術や知識を身につけます。・Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) ・Another HTML Lint HTML5 - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　でチェックすると、きちんと指摘してくれます。　とにかく最初はシンプルなものから　　サンプルに上げたHTMLは、わかりやすいと思います。　そしたら、スタイルシートでデザインを学びます。　HTMLは難しくはありません。ワードなどのワープロやDTPとは全く異なり、文書がどんな要素で組み立てられているかをマークアップするだけですから・・　頑張ってください。みんな通ってきた道です。最初は　⇒はじめてのWebドキュメントづくり( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) が本当は一番良いですよ。

質問者

お礼 2014/03/30 01:46

よく分かりました。有り難うございます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/03/28 20:36 回答No.2

いずれも、IE7以上なら大差ないはずです。 [No.1のHTML4.01用のスタイルシート] ＿<style type="text/css" media="screen">  ＿</style> [HTML5] <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA">  ＿<link rel="stylesheet" href="css/style.css"> ＿<style media="screen">  ＿</style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・</p> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/books">著書</a></li> ＿＿＿＿<li><a href="/Blog">ブログ</a></li> ＿＿＿＿<li><a href="/contact">問合せ</a></li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<section> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</section> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/books">著書</a></li> ＿＿＿＿<li><a href="/Blog">ブログ</a></li> ＿＿＿＿<li><a href="/contact">問合せ</a></li> ＿＿＿</ol> ＿＿</nav> ＿＿<aside> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文と直接関係ない補足的(aside)な記事</p> ＿＿</aside> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</footer> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/03/28 16:41 回答No.1

ずばり言うと、videoやaudio要素、あるいはSVGが必要でない限り、IE対策が必要ならHTML5を使用するのは適切ではありません。(javascriptを無効にしていたら効かない) 　理由など、ちょっと時間をとって整理してみました。大事なことなので、よく読んでいただけると幸いです。 HTMLは、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからどのバージョンのHTMLも、コンテンツプロバイダの投資が無駄にならないよう、また短期間で文書が読み取り不能となったりすることがないよう、産業界の幅広い賛同を反映するようにされてきた。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　古い仕様でも最新のブラウザで利用できることがブラウザに求められていますから安心してHTML4.01を使えます。以下、必ずリンク先を参照しながら読んで理解すること!! 　それはさておき、スタイルシートを期待通り動作させるためには『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )』　が必要なのです。 <body> A <section>B</section> C </body> はありえません。あってはならないのです。　body要素にはブロック要素のみ入ります。ましたやテキストだけはありません。　section要素は、必ず見出し<h1>～<h6>があるものとみなされます。 ★スタイルシートを書く前に素のHTMLをAnother HTML Lint HTML5 - Gateway( http://www.htmllint.net/html-lint/htmllint.html )などでチェックしてから、スタイルシートに取り掛かりましょう. ★HTML5はHTML4.01以上にある意味厳しいのです。　それは、HTML4.01で「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」が叫ばれながら、HTML4.01には文書構造を示す要素が用意されていなかったため、検索エンジンなどが文書の内容を理解する手立てがなかったからです。　あなたのソースにある article(sarticleじゃない), aside, details, figcaption, figure, footer, header, hgroup, menu, nav, sectionは、すべてHTML5から導入された「文書をよりよく構造化するため( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」の要素です。それぞれに重要な意味があります。　そもそもHTMLはSGMLから派出したもので、「「タグ」を使うことによってデータに意味を持たせる」ための言語です。　<h1>ここは見出し</h1><p>ここはひとつの段落</p><blockquote cite="">この記事は引用・・</blockquote>とね。HTML4.01では文書構造自体がありませんでしたから、DIVやSPANを使ってきました。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より　以上からIE対策が必要なウェブサイトでしたら、HTML5を見据えてHTML4.01strictで作成されることをお勧めします。transitionalやframesetじゃない。『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』　HTML5は、HTML4.01strictの改訂版です。＞タグが認識された場合ABCの文字が縦に並び認識されない場合はABCが横に並びます。と言う風には考えず、「ナビゲーションリストを枠で囲んで横に並べたい」と言う風に考えます。　HTML5にすると言う事は、『文書構造を明確にして文書構造とプレゼンテーションを完全に分離する』と言うことなのです。　具体的な例を挙げておきます。　次回の回答でHTML5版とスタイルシートを上げておきます。 ★タブは＿に置換してあるので戻す。 [HTML4.01strict] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/books">著書</a></li> ＿＿＿＿<li><a href="/Blog">ブログ</a></li> ＿＿＿＿<li><a href="/contact">問合せ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/books">著書</a></li> ＿＿＿＿<li><a href="/Blog">ブログ</a></li> ＿＿＿＿<li><a href="/contact">問合せ</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>本文と直接関係ない補足的(aside)な記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>