• 締切済み

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

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

画像を拡大する
  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

用語を正確に・・ インラインフレーム(iframe)もフレームの一種です。 　⇒16.5 行内フレーム: IFRAME要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#h-16.5 ) 　擬似フレームは、ブロックに幅、高さを指定して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をウィンドウトップへ フッターをウィンドウ右上 ナビゲーションは本文の左に 本文は、その余白に 　とスタイルシートでデザインしていきます。 　こうしておけば、将来デザインを一新することも可能ですし、本文内容を修正するのも簡単です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSでの擬似フレームでのフレームのスクロールバーのサイズについて

    CSSで擬似フレームとしてoverflowのautoなどを使う方法がありますが、 そこで出来たフレームの枠にスクロールバーがあり、このスクロールバーのサイズをウインドウサイズの大小に合わせて可変させる事はできるものなのでしょうか？ 通常のiframeを使用したインラインフレームであれば、ウインドウサイズを大きくしたり小さくしたりするとそれに合わせてスクロールバーの大きさも変わるのですが、CSSでの擬似フレームの場合、それが出来るのかどうか知りたいです。 分かる方、いらっしゃいましたらお願いいたします！

  • フレームと擬似フレーム

    以前、フレームを使わずにフレームに表示する方法をここでお聞きし、擬似フレームというものがあることを知りました。 CSSとjavascriptを使う擬似フレームと、フレームの場合やはり擬似フレームを使うべきなのか迷っています。 （SSIやphpは使えません） 更新は楽にしたいのと、対応しないブラウザがある→未対応ブラウザ向けにサイトマップをつくる 、という点では一緒かな、と思ったのですが・・・。

    • ベストアンサー
    • HTML
  • 擬似フレームとPHP

    今までHTMLとCSSで主にホームページを作ってきたのですが、最近メニューナビをどうにかして常に表示させとくことは出来ないだろうかと思い（フレームのような感じで）色々調べて擬似フレームという方法があるというのを知って作ってみたのです。 で、また最近PHPをちょっと勉強しだして、ほんとーに、かじり程度しか分かってないのですが、擬似フレームでナビ部分をincludeで呼び出せば、すごく便利だなぁ、と思ったわけですが。 一般的にあまり普及してない印象があります。 私も調べるまで擬似フレームというのがあることさえ知らなかったので（CSSも未熟なもので・・）。 まぁ、PHPの使えないサーバもあるので、使われないのかも知れないのですが。 そこで気になったのが、擬似フレームとPHPを使うことによって、なにかデメリットってあるのでしょうか？ メンテナンス作業で考えるとフレームと変わりないくらいに楽だなぁ、と関心してしまったもので。 ちょっと気になったことで、特に切羽詰まった事ではないのですが・・。 少しでも関心があればよろしくお願いします。

    • ベストアンサー
    • PHP
  • ＨＴＭＬタグでフレームが思うように作れなくて・・・

    　ＨＴＭＬタグ辞典を参考にしながら、 フレームを作っていますが、うまくできません。 　縦２分割にしたいんです。 たま～に　思うようなフレーム分割にできた画面が 出てくると、 背景画像が出てこなくなります。 　どうやって書けばいいのか 具体的に教えていただけると嬉しいです。 よろしく　お願いします。

  • cssの擬似フレームで外部URL表示できますか？

    普通のフレームだと、"frame src="などで外部urlを表示できますが、 CSSの擬似フレーム（overflowを使ったもの）だと無理なのではないのでしょうか？ 私の認識間違ってますか？

    • ベストアンサー
    • CSS
  • 擬似フレーム

    フレームだらけのHPを，擬似フレームを使用したHPに改造しようと色々と試行錯誤していますが，JavaScript等が良く判らず，難儀しております． 理想としているのは，「擬似フレーム（疑似フレーム）」の作り方（IE6 にも対応、スタイルシート(CSS)、JavaScript使用）」http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html のサイトです． このサイトを参考にした，「高密度商業地域 - 擬似フレーム」http://komitsudo.blog70.fc2.com/blog-entry-32.html にある 「実際に動作しているサンプルページ」http://blog-imgs-27-origin.fc2.com/k/o/m/komitsudo/index.html と同様の本文がスクロールするHPは作れたのですが，ヘッダー・サイトマップ・フッターの共用の仕方がわかりません． よろしくお願い致します．

    • ベストアンサー
    • HTML
  • CSSの擬似フレームでのリンク方について

    今まではHTMLでフレームを使っていたのですが、勉強になりそうなので、CSSを使って擬似フレームでサイトを作ってみることにしました。 だいたいのカタチは出来たのですが、リンク時に疑問が。 HTMLの時のように、リンク先をどこに表示するか名前指定でリンクすればいいと考えていたのですが、CSSでは実際は1つのページなので、名前指定というわけにはいきませんよね？ リンクするときは新しいページに飛ぶ時・ページ内にリンクするとき以外は、擬似フレームのメニュー部を同じように記載したページを複製して、メイン部分を変えていくという解釈で良いのでしょうか？ 回答、お願いします。

    • ベストアンサー
    • HTML
  • ホームページ作成　これはフレーム？疑似フレーム？

    http://www.geocities.co.jp/CollegeLife-Lounge/4621/page002.html ↑たまたまみていて見つけたのですが、 これは普通のフレームを用いたサイト？ それとも疑似フレームですか？ 疑似フレームを作ろうと思っていたのですが、挫折しました。 そこで↑のサイトのようにフレームだと感じさせないフレームをつくりたいと思うのですが、 どうすればいいのでしょうか？

  • DIVタグでの擬似インラインフレーム

    <DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS：WindowsXP　SP１ ブラウザ：IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • ソースの見えるフレームは擬似フレームですか？

    HTMLを勉強しているので、 暇があると色々なページのソースを見ています。 そこで気づいたのですが フレームページはソースを表示させると 大元のフレームソースしか表示されませんよね？ でも一見、フレームのような作りでも 普通にメイン画面のソースが表示されるページも あるようです。メニュー側でソース表示すると そちらもきちんと見えます。 例えば・・・ http://www.solon-saga.jp/ ソースにJavaScriptの記述がありますが、 こうしたページは擬似フレームになるのですか？ それともindex.htmなどをフレームにしてページをいれ、 通常どおりフレームセットを作りながら何かの方法で 普通にソースを表示させる方法などがあるのですか？ DynamicHTMLやスタイルシートなどもチラッと 調べてみたのですがいまいち判りません。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する