プロが教えるわが家の防犯対策術！

HTML5のIE対策について

解決済

  • 質問者：unkoburiburi
  • 質問日時：
  • 回答数：3件

HTML5とをIE8に効かせようと色々やっていますが上手くいきません。
このサイトを参考にしてIE対策をしました。
http://shouken56.net/blog/web/other/2301/

こちらが練習で使っているサイトです。
http://sakana.lv9.org/lv9_org/HTML5/html5.php
なにが悪いのか教えてください。

HTML5のタグを効かせたいのですがタグが認識されていません。
タグが認識された場合ABCの文字が縦に並び
認識されない場合はABCが横に並びます。

ルート指定の仕方が違うのですかね_(:3 」∠)_
階層は/HTML5/html5.phpのページから
/HTML5/js_html5/html5shiv.jsを読み込んでいます。
こんな感じ
<script src="js_html5/html5shiv.js"></script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞難しすぎて意味が分かりません(´；ω；｀)


　皆最初はそうだったのです。
　ただ、HTML5は膨大ですからまともに取り組めば挫折します。
　そのために、その元となったHTML4.01strictをマスターして、
HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　に進むのが最も効率的でわかりやすいです。

　HTML4.01strictは、HTML5で廃止されるプレゼンテーションに関わる要素や属性を含みません．
・3.5. 不在の要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
・3.6. 不在の属性( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　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/ )
が本当は一番良いですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2014/03/30 01:46

No.2

  • 回答者： ORUKA1951
  • 回答日時：

いずれも、IE7以上なら大差ないはずです。


[No.1のHTML4.01用のスタイルシート]
＿<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;min-height:300px;}
div.section div.section{min-height:0;width:auto;min-width:0;margin:0 170px;}
div.section div.section{}
div.section h2,div.section p{margin:0 170px;}
div.section div.section p,div.section div.aside p{margin:0;}
div.section div.nav,div.section div.aside{position:absolute;width:160px;top:0;height:100%;}
div.section div.nav{left:5px;}
div.section div.aside{right:5px;}
/* ナビゲーションリストをブロックに */
div.nav ol,div.nav ol li{
list-style-type:none;
dispaly:block;
margin:0;padding:0;
line-height:2em;
text-align:center;
}
div.nav ol li{
border:red 1px solid;
position:relative;
height:2em;
}
div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;}
/* headerのナビゲーションは横並び */
div.header div.nav ol{height:2em;}
div.header div.nav ol li{width:24%;float:left;}
/* わかりやすい様に着色 */
body{background-color:gray;}
div.header,div.section,div.footer{background-color:silver;}
div.section div.nav,div.section div.aside{background-color:yellow;}
div.section div.section,div.section h2,div.section p{background-color:white;}
div.nav ol li a{background-color:green;}
div.nav ol li a:hover,div.nav ol li a:focus{background-color:lime;}
-->
＿</style>

[HTML5]
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
＿<link rel="stylesheet" href="css/style.css">
＿<style media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
header,section,footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
section{position:relative;min-height:300px;}
section section{min-height:0;width:auto;min-width:0;margin:0 170px;}
section h2,section p{margin:0 170px;}
section section p,section aside p{margin:0;}
section nav,section aside{position:absolute;width:160px;top:0;height:100%;}
section nav{left:5px;}
section aside{right:5px;}
nav ol,nav ol li{
list-style-type:none;
dispaly:block;
margin:0;padding:0;
line-height:2em;
text-align:center;
}
nav ol li{
border:red 1px solid;
position:relative;
height:2em;
}
nav ol li a{display:block;width:100%;height:100%;text-decoration:none;}
header nav ol{height:2em;}
header nav ol li{width:24%;float:left;}
body{background-color:gray;}
header,section,footer{background-color:silver;}
section nav,section aside{background-color:yellow;}
section section,section h2,section p{background-color:white;}
nav ol li a{background-color:green;}
nav ol li a:hover,nav ol li a:focus{background-color:lime;}
-->
＿</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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

　ずばり言うと、videoやaudio要素、あるいはSVGが必要でない限り、IE対策が必要ならHTML5を使用するのは適切ではありません。

(javascriptを無効にしていたら効かない)

　理由など、ちょっと時間をとって整理してみました。大事なことなので、よく読んでいただけると幸いです。

HTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どのバージョンのHTMLも、コンテンツプロバイダの投資が無駄にならないよう、また短期間で文書が読み取り不能となったりすることがないよう、産業界の幅広い賛同を反映するようにされてきた。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　古い仕様でも最新のブラウザで利用できることがブラウザに求められていますから安心してHTML4.01を使えます。

以下、必ずリンク先を参照しながら読んで理解すること!!

　それはさておき、スタイルシートを期待通り動作させるためには
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
　が必要なのです。
<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-html4 … )」が叫ばれながら、HTML4.01には文書構造を示す要素が用意されていなかったため、検索エンジンなどが文書の内容を理解する手立てがなかったからです。
　あなたのソースにある
article(sarticleじゃない), aside, details, figcaption, figure, footer, header, hgroup, menu, nav, sectionは、すべてHTML5から導入された「文書をよりよく構造化するため( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」の要素です。それぞれに重要な意味があります。

　そもそも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-html4 … )］より

　以上からIE対策が必要なウェブサイトでしたら、HTML5を見据えてHTML4.01strictで作成されることをお勧めします。transitionalやframesetじゃない。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有り難うございます。
難しすぎて意味が分かりません(´；ω；｀)

通報する
お礼日時：2014/03/29 00:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報