- ベストアンサー
HTML5 iframe の代わり
HTML5でiframeが認められなくなりました。 今まで下記のように ボタン１ボタン２ボタン３ボタン４ボタン５ボタン６ <旧iframe></旧iframe> ボタンは表示し続け下にボタンに応じたページを 表示させたい場合一般的にどうすればよいのでしょうか？ javascriptに頼らざるをえませんでしょうか？ 皆様のよきご回答をお待ちしております。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞<li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょう ブラウザの表示メニューから「スタイルシートなし」を選択してみたら、極めてシンプルなHTMLだと言うことがわかると思います。 単純にページ内アンカーに飛んでいるだけです。 HTML5では、HTML4.01以上に、文書構造に従ったマークアップが求められています。実はHTML4.01もそうであったが、 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 しかし、その部分はまったく守られていなかったために、HTML5では、文書構造を示すタグが追加されたにすぎません。！！！！ ソースを見られてもお分かりのように、スタイルシートを除けば、わかりやすいマークアップがされています。あなたにも検索エンジンにもわかる。 デザイン、どのように見せるかと、文書構造は独立して考えるべきです。まず、デザインは後回しにして、HTMLの基本をしっかりと学んでください。HTML5はまだ勧告の段階ではありませんから、HTML4.01strictを身につけること。 ★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) とか。・・・HTML4.01ですが、HTML5は、HTML4.01strictの改訂版です。transitinalなんて知らなくて良い。 その後、スタイルシートを学んでください。
その他の回答 (4)
- tracer
- ベストアンサー率41% (255/621)
html5のheaderやnavi、sectionやarticleなどにframeの効果を期待されているのであれば、それは間違いですよ。 サンプルページがメニュー以外の箇所だけが変更されているように見えるのは、単にキャッシュなどで高速に表示されているだけです。実際は、ページ全体が更新されています。また、html5のheaderやnavi、sectionやarticleのタグの働きは、論理構造上の意味づけであり、特別な機能はありませんよ。正しいマークアップをすることで、正しくマークアップされていないページと比較して、将来的に検索エンジンなどで有利になるかもしれませんね。
補足
ありがとうございます。理解できました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いえ、それは、frameで読み込む予定の記事を含めて一枚にしたら？と言うことです。 _はタブに戻す。 <!doctype html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA1951"> <style media="screen"> <!-- html,body{margin:0;padding:0;background-color:silver;} header,article,footer{ ＿width:70%; ＿margin:0 auto;padding:0; ＿background-color:white; ＿border:white 1px solid; ＿border-radius: 10px; } body>header{ ＿position:fixed; ＿width:80%; ＿left:10%;top:0; ＿background-color: gray; ＿color:white; ＿text-align:center; ＿height:100px; } #contentTable{ ＿position:fixed; ＿left:0;top:100px; ＿width:14%; ＿border:solid aqua 1px; ＿background-color:aqua; } article{ ＿min-height:600px; ＿border:solid gray 1px; ＿margin-bottom:100px; ＿padding-top:100px; ＿position:relatove; } article header,article section,article footer{ ＿margin: 10px; } --> </style> </head> <body> ＿<header> ＿＿<h1>見出し</h1> ＿＿<div id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#article1">記事1</a></li> ＿＿＿＿<li><a href="#article2">記事2</a></li> ＿＿＿＿<li><a href="#article3">記事3</a></li> ＿＿＿＿<li><a href="#documentInfo">文書情報</a></li> ＿＿＿</ol> ＿＿</div> ＿</header> ＿<article id="article1"> ＿＿<header> ＿＿＿<h1>見出し1</h1> ＿＿</header> ＿＿<section> ＿＿＿記事本文 ＿＿</section> ＿＿<footer> ＿＿</footer> ＿</article> ＿<article id="article2"> ＿＿<header> ＿＿＿<h1>見出し2</h1> ＿＿</header> ＿＿<section> ＿＿＿記事本文 ＿＿</section> ＿＿<footer> ＿＿</footer> ＿</article> ＿<article id="article3"> ＿＿<header> ＿＿＿<h1>見出し3</h1> ＿＿</header> ＿＿<section> ＿＿＿記事本文 ＿＿</section> ＿＿<footer> ＿＿</footer> ＿</article> ＿<footer id="documentInfo"> ＿＿<h2>文書情報</h2> ＿</footer> </body> </html>
補足
<li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょうか？ ぐぐってもぐぐってもさっぱりわからないです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5では、HTML4.01で非推奨であったiframeが認められるようになりました。 が正解です。 そうであっても、iframeを使う限り、frameが必然的に持っている問題が、なくなるわけではありません。 数ページなら、 <header> <h1>見出し</h1> <div id="contentTable"> <ol> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ol> </div> </header> <article> <header> <h1>見出し</h1> </header> <section> 記事本文 </section> <footer> </footer> </article> <article> <header> <h1>見出し</h1> </header> <section> 記事本文 </section> <footer> </footer> </article> <article> <header> <h1>見出し</h1> </header> <section> 記事本文 </section> <footer> </footer> </article> <footer> </footer> のようにマークアップして、 header div.contentTable{ position:fixed; width:20%; top:100px; left:0; } とかで、マークアップするほうが良いでしょう。 また、ページを動的に作成する方法も良いでしょう。・・・この方がベスト・・・
補足
header nav タグが追加されていて 時代の変化に戸惑っております。 <header> <ol> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ol> </header> こうやって<header>の中でリストにすればリンクをクリックすると <section>に表示されるのかと思いやってみましたがならず <nav>タグをつけないとだめなのかと思い つけてみましたがなりませんでした。 難しいですね。
- hitomura
- ベストアンサー率48% (325/664)
> HTML5でiframeが認められなくなりました。 ……えーと、誰からそんなことを聞いたのでしょうか？ 確かにHTML5ではフレームに関するタグはiframe以外が非推奨になりました。 iframe「以外」が、です。 つまり、iframeはHTML5でも使用できます。 参考URL：W3CによるHTML5とHTML4との違いに関する文書の上記該当部分 http://www.w3.org/TR/2011/WD-html5-diff-20110525/#absent-elements （日本語訳） http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#absent-elements
お礼
ご回答いただきありがとうございます。 ただ、疑問が別に出てきました。 http://www.coolwebwindow.com/temp/source/public/pub001/src/ このサンプルのように上のメニューをクリックすると メニューを残しつつ下の表示が変わるようにすればどうすればいいのでしょうか？ ソースを見ても <div id="menu"> <ul> <li><a href="index.html">MENU1</a></li> <li><a href="sample.html">MENU2</a></li> <li><a href="index.html">MENU3</a></li> <li><a href="index.html">MENU4</a></li> <li><a href="index.html">MENU5</a></li> <li><a href="index.html">MENU6</a></li> </ul> </div> このように書いてリンクしているだけなので どういうメカニズムかよわかりません。
補足
・・・読み間違えました。 お恥ずかしい限りです・・・・。 hitomuraさん愛想を尽かさず今後もお相手していただければ幸いです。
補足
ありがとうございます。CSSを勉強します。