アプリ版：「スタンプのみでお礼する」機能のリリースについて

HTML5 iframe の代わり

解決済

  • 質問者：timespace
  • 質問日時：
  • 回答数：5件

HTML5でiframeが認められなくなりました。
今まで下記のように

ボタン１ボタン２ボタン３ボタン４ボタン５ボタン６
<旧iframe></旧iframe>

ボタンは表示し続け下にボタンに応じたページを
表示させたい場合一般的にどうすればよいのでしょうか？
javascriptに頼らざるをえませんでしょうか？
皆様のよきご回答をお待ちしております。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

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

＞<li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょう



　ブラウザの表示メニューから「スタイルシートなし」を選択してみたら、極めてシンプルなHTMLだと言うことがわかると思います。
　単純にページ内アンカーに飛んでいるだけです。

　HTML5では、HTML4.01以上に、文書構造に従ったマークアップが求められています。実はHTML4.01もそうであったが、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

　しかし、その部分はまったく守られていなかったために、HTML5では、文書構造を示すタグが追加されたにすぎません。！！！！

　ソースを見られてもお分かりのように、スタイルシートを除けば、わかりやすいマークアップがされています。あなたにも検索エンジンにもわかる。

　デザイン、どのように見せるかと、文書構造は独立して考えるべきです。まず、デザインは後回しにして、HTMLの基本をしっかりと学んでください。HTML5はまだ勧告の段階ではありませんから、HTML4.01strictを身につけること。
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
　とか。・・・HTML4.01ですが、HTML5は、HTML4.01strictの改訂版です。transitinalなんて知らなくて良い。

　その後、スタイルシートを学んでください。

この回答への補足

ありがとうございます。CSSを勉強します。

補足日時：2011/12/04 22:28
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： tracer
  • 回答日時：

html5のheaderやnavi、sectionやarticleなどにframeの効果を期待されているのであれば、それは間違いですよ。


サンプルページがメニュー以外の箇所だけが変更されているように見えるのは、単にキャッシュなどで高速に表示されているだけです。実際は、ページ全体が更新されています。また、html5のheaderやnavi、sectionやarticleのタグの働きは、論理構造上の意味づけであり、特別な機能はありませんよ。正しいマークアップをすることで、正しくマークアップされていないページと比較して、将来的に検索エンジンなどで有利になるかもしれませんね。

この回答への補足

ありがとうございます。理解できました。

補足日時：2011/12/04 22:27
通報する
    • good
    • 0
    • 件
通報する

No.3

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

いえ、それは、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>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょうか？
ぐぐってもぐぐってもさっぱりわからないです。

補足日時：2011/11/29 21:32
通報する
    • good
    • 0
    • 件
通報する

No.2

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

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>タグをつけないとだめなのかと思い
つけてみましたがなりませんでした。

難しいですね。

補足日時：2011/11/29 17:19
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： hitomura
  • 回答日時：

> HTML5でiframeが認められなくなりました。


……えーと、誰からそんなことを聞いたのでしょうか？

確かにHTML5ではフレームに関するタグはiframe以外が非推奨になりました。
iframe「以外」が、です。
つまり、iframeはHTML5でも使用できます。

参考URL：W3CによるHTML5とHTML4との違いに関する文書の上記該当部分
http://www.w3.org/TR/2011/WD-html5-diff-20110525 …
（日本語訳）
http://standards.mitsue.co.jp/resources/w3c/TR/h …

この回答への補足

・・・読み間違えました。
お恥ずかしい限りです・・・・。
hitomuraさん愛想を尽かさず今後もお相手していただければ幸いです。

補足日時：2011/11/29 14:05
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきありがとうございます。

ただ、疑問が別に出てきました。

http://www.coolwebwindow.com/temp/source/public/ …

このサンプルのように上のメニューをクリックすると
メニューを残しつつ下の表示が変わるようにすればどうすればいいのでしょうか？
ソースを見ても

<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>

このように書いてリンクしているだけなので
どういうメカニズムかよわかりません。

通報する
お礼日時：2011/11/29 15:48

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報