疑似フレーム（CSS使用）のタグについて

締切済

質問者：sakurayokocho
質問日時：2013/04/10 20:55
回答数：1件

画像の様な感じにタグを組みたいのですがインラインフレームの高さが100％にできません。フレームでやるとなると背景画像をフレームを超えて表示できないので出来る限り疑似フレームでやりたいのですがどうすれば上手くいくでしょうか。

通報する

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

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2013/04/10 23:12

用語を正確に・・

インラインフレーム(iframe)もフレームの一種です。
　⇒16.5 行内フレーム: IFRAME要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　擬似フレームは、ブロックに幅、高さを指定してoveflow:auto;でデータが多い場合にスクロールさせる方法です。

＞背景画像をフレームを超えて表示できないので
　は、擬似フレームもフレームもまったく関係ないです。

　そもそも、HTMLはデザインのために書くものではありません。ここを間違えている初心者がとても多いです。そのように説明しているサイトや参考書が多いからでしょうが、HTMLは文書構造をマークアップするもので、デザインするのはスタイルシートの仕事です。
　この構造とプレゼンテーションの分離は、とても重要です。

　文書構造が
<body>
　<div class="header">
　　ヘッダ
　</div>
　<div class="section">
　　本文
　　<div class="nav">
　　　ナビゲーション
　　</div>
　</div>
　<div class="footer">
　　文書情報
　</div>
</body>

HTML5だと
<body>
　<header>
　　ヘッダ
　</header>
　<section>
　　本文
　　<nav>
　　　ナビゲーション
　　</nav>
　</section>
　<footer>
　　文書情報
　</footer>
</body>
という文書構造であるとき
headerをウィンドウトップへ
フッターをウィンドウ右上
ナビゲーションは本文の左に
本文は、その余白に
　とスタイルシートでデザインしていきます。

　こうしておけば、将来デザインを一新することも可能ですし、本文内容を修正するのも簡単です。