いつもお世話になっております。
フレームについて質問させてください。

<frame name="header" src="header.html" title="メニュー" scrolling="no">
<frame name="main" src="main.html" title="コンテンツ" scrolling="auto">

現在、上記のようにフレーム分けを行い、ヘッダー(メニュー)部分は固定にして、メイン(コンテンツ)部分のみスクロールするようにしているのですが、これをフレーム分けせず、1枚のhtmlで同じように行う事は出来るのでしょうか。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

iframeをつかうとか?



そうでないならたとえばこんな感じ。
<head>
<style>
#header{
background-Color:red;
}
#main{
height:80%;
background-Color:yellow;
overflow-y:scroll;
}
</style>
</head>
<body>
<div id="header">
メニュー
</div>
<div id="main">
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test</div>
</body>

この回答への補足

サンプルまで表示して頂き、ありがとうございます。
色々試してみたのですが、解決できない事がありますので、
質問させてください。

提示頂いたサンプルを下記のように少し変更してみたのですが、
画面サイズを小さくしてみた所、一番下の
"見えなくなる"という行が下にスクロールしても見えなくなってしまいました。

フレームで分けた場合は大丈夫だったのですが、
こちらなんとかする方法はありますでしょうか。
よろしくお願いします。

<head>
<style>
#header{
background-Color:red;
}
#main{
height:80%;
background-Color:yellow;
overflow-y:scroll;
}
</style>
</head>

<body scroll="no">
<div id="header">
メニュー1<br>メニュー2<br>メニュー3<br>メニュー4<br>メニュー5<br>メニュー6<br>メニュー7<br>
</div>
<div id="main">
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
見えなくなる
</div>

</body>

補足日時:2009/05/13 21:35
    • good
    • 0

> 全く同じ風にする事


スタイルシートや
必要なら画像を使って
がりがり作り込むしかないわね。

この回答への補足

ご回答いただき有難うございます。

下にも記入させて頂きましたが、

下のhtmlを画面サイズを小さくしてみた所、一番下の
"見えなくなる"という行が下にスクロールしても見えなくなってしまいました。

フレームで分けた場合は大丈夫だったのですが、
こちらなんとかする方法はありますでしょうか。
よろしくお願いします。

<head>
<style>
#header{
background-Color:red;
}
#main{
height:80%;
background-Color:yellow;
overflow-y:scroll;
}
</style>
</head>

<body scroll="no">
<div id="header">
メニュー1<br>メニュー2<br>メニュー3<br>メニュー4<br>メニュー5<br>メニュー6<br>メニュー7<br>
</div>
<div id="main">
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
見えなくなる
</div>

</body>

補足日時:2009/05/14 13:24
    • good
    • 0

#4 です。


ごめんなさい、
>div#menu {......top : 15em ; .....}
は、div#menu {......top : 7em ; .....}です。数字を間違えました。
    • good
    • 0

こんばんは。


所謂、スクロールしてもメニューの部分だけ固定させたいと言うことですね。
それならば、固定したい メニュー に position 要素を使い、値を fixed にします。

CSS の一例
簡単に、メニューを左上にして固定させてみましょう。
位置は 左に 2em トップ 7em メニュー枠の色は teal メニュー幅は 10 em 他
body {margin : 1em 5em 2em 14em ;}
div#menu {position : absolute ; left : 2em ; top : 15em ;
width : 10em ; border : dotted 2px teal ; float : left ;}
body > div#menu {position : fixed ; }

position : fixed ; は Windows 版 IE 6 まで対応していません。
Windows 版 IE 7 ~ 及び Mac 版 IE 5.x , Firefox や Opera ,
Safari , SeaMonky , Shiira など私が確認したブラウザでは対応しています。

上記のことを踏まえて Windows IE 6 まではスクロールしてしまうメニューにして、
position : fixed ; に対応しているブラウザにはメニューを固定しよう、
と言うことで、
div#menu {position : absolute ; .......} にして、
body > div#menu {position : fixed ; }
を使いました。
これは、 Windows IE 6 までは子供セレクターに対応していないことを利用しています。
(子供セレクターについては、ご存じですよね)

では html の一例
リストの <ul> を使って、メニューを作ります。
文書型宣言や <body> <html> 等は省略

<h1>メニューを固定するページを作る</h1>
<div id="menu">
<ul>
<li><a href="menu01.html" title="メニュー1">メニュー1</a></li>
<li><a href="menu02.html" title="メニュー2">メニュー2</a></li>
<li><a href="menu03.html" title="メニュー3">メニュー3</a></li>
........
</ul>
</div>
<p>このテキストは、メニューの右側に表示されます。
ここに、好きなコンテンツを書いてみましょう。</p>

もしこの要素をお使いになるのならば、Windows 版 IE 6 までは
対応していない、と言うことを念頭に置いてください。
    • good
    • 0
    • good
    • 0

<div id="header">


header.htmlの内容
</div>
<div id="main">
main.htmlの内容
</div>

としてheaderとmainにそれぞれ
overflow:none、overflow:scroll
をスタイルシートとして設定するといいわ。
もちろん、widthとheightも忘れずにね。

この回答への補足

ありがとうございます。
微妙なのですが、どうしても若干違う風になってしまうようなのです。
全く同じ風にする事は難しいのでしょうか。

補足日時:2009/05/13 17:35
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qかわいい無料素材サイトを教えてください

フェアリー系、パステル系、ネオン系、80srockの無料素材サイトを教えてください!!

背景画、デコメもあると嬉しいです♪

Aベストアンサー

無料でデコメから動く待ち受け合成や自分で作れるデコメ作成アプリなど何でもあります。メール送受信画像が作れたり、顔文字辞典、セリフ画、など無料とは思えないくらいの機能が揃ってます。
マイページには自分が作った画像が保存できます。

無料版
http://m.gal-deco.com/

公式サイトの方はもっと凄いです。
どちらを選択するかはおまかせします。
公式サイト
http://gal-deco.com/

参考URL:http://gal-deco.com/

Qインラインフレームの中のページを時間差でページを変更したい

<iflame src="">インラインフレームの中のページを時間差でページを変更したいのですがどうすればいいでしょうか?


<iframe src="ページA" width="300" height="100" frameborder="0" scrolling="no">

だけが表示されているのですが
ここに、10秒後にページB、さらに30秒後にページCと表示させたいのですが、どうすればよいでしょうか?

Aベストアンサー

こんにちは

こんな感じのやつですか?

<script type="text/javascript"><!--
window.onload=function() {
setTimeout("ifrch('ページBのパス')",10000);
setTimeout("ifrch('ページCのパス')",30000);
}

function ifrch(url) {
document.getElementById("ifr").src=url;
}
//--></script>

<iframe src="ページA" width="300" height="100" frameborder="0" scrolling="no" id="ifr">

Qかわいい女の子のイラスト素材集(もしくは書いてくれる人)

かわいい女の子のイラストを探してます。

サンプルがなく説明しずらいですが、
風俗求人誌やバイト雑誌に使われているような、
かわいいアニメ調のイラストが希望です。

広告やwebに掲載したいので、
フリーでもかまいませんが、
イラストレータなどでのデータ化していればベストです。

ネットで素材集やリンク先をめぐってみましたが、
納得するものがなく。
イラスト書きを請け負っていただける方でもいいのですが・・・

イラスト集の入手方法や手配方法を、
なにかご存知の方いらっしゃればよろしくお願いいたします。

使用環境は、
WinXPで、
Illustrator 9・10 です。
前にそんなイラストレータ素材を見たことがあるので、
どこかにあるかとはおもうですが・・・

Aベストアンサー

こんにちは。

ここでは「人探し・求人」は残念ながら出来ないのですよ…。
私は、実際かけますが(プロです)、だからと言ってどうやって連絡取るのでしょう?個人同士での連絡は取れない規約です。

では、キャラクターの素材集のサイトをご紹介します。
http://www.dex.ne.jp/mantan/frame.cgi?rtn=3&tmptype=/mantan/search/std2_search_redirecter.jhtml&channel=10&db=d&ldtype=t&n_list=12&ctgptn=1&ctg=10171214

ここの素材は有名で、あちこちでよく使われています(女の子のイラストでなくても)。
会員になれば、DLし放題ですので、一度ごらんになってみてください。

参考URL:http://www.dex.ne.jp/mantan/frame.cgi?rtn=3&tmptype=/mantan/search/std2_search_redirecter.jhtml&channel=10&db=d&ldtype=t

こんにちは。

ここでは「人探し・求人」は残念ながら出来ないのですよ…。
私は、実際かけますが(プロです)、だからと言ってどうやって連絡取るのでしょう?個人同士での連絡は取れない規約です。

では、キャラクターの素材集のサイトをご紹介します。
http://www.dex.ne.jp/mantan/frame.cgi?rtn=3&tmptype=/mantan/search/std2_search_redirecter.jhtml&channel=10&db=d&ldtype=t&n_list=12&ctgptn=1&ctg=10171214

ここの素材は有名で、あちこちでよく使われています(女の子のイラストでなくても)...続きを読む

Q

が場所をとってしまい表示スペースに空白ができてしまい配置が乱れてしまいます
どうしたら'hidden'のサイズが0であるかのように振舞わせることができるでしょうか?
テーブルの中に使っているのでテーブル枠が不必要に広がってしまいました
折り返しが起こりtrの高さが増えてしまったのです

Aベストアンサー

タグの前後で改行している(<br>タグではなくソース上で)、ということはありませんか?
もしそうなら削除してみてください。

Qかわいい無料レンタル掲示板のあるサイトを知りませんか

たくさん探してみたのですが、無料のレンタル掲示板はあまりかわいいものがなく、あっても登録を締め切っています。背景や文字に凝っているかわいい掲示板のあるサイトを知っている方いらっしゃいませんか?

Aベストアンサー

こちらで探してみたことはありますか?
http://www.freeservice.jp/contents/bbs.html
http://www.kooss.com/bbs/

使ってたことがあるのは、参考URLの「UIC」です。

今のBBSの多くが色々設定が変更できるので、デフォルト以外に背景も可愛いのにかえられたりしますよ。

参考URL:http://uic.to/cgi/all_list.html

Q親ページからインラインフレーム内のリンクへ飛ばしたときのIEの動きについて

例えば、IEで

<html>
<head><title>index.html</title>
</head>
<body><center>
<p style="margin: 100px auto 50px auto">サンプル</p>
<p><a href="a.html#a" target="frame">リンク</a></p>
<iframe src="a.html" width="640" height="500" name="frame" style="margin-bottom: 400px">
</iframe></center>
</body>
</html>

というソースのindex.htmlに、

<html><head><title>インフレーム・a.html</title></head>
<body><p style="margin-top: 500px">余白</p>
<p><a name="a">NAME A</a></p>
<p style="margin-top: 500px">余白</p>
</body></html>

というソースのa.htmlというファイルをインラインフレームで読み込み、
index.htmlの「<p><a href="a.html#a" target="frame">リンク</a></p>」をクリックした場合、
インラインフレーム内のa.htmlの「<p><a name="a">NAME A</a></p>」がブラウザの一番上に表示されるよう、
index.htmlのページ全体が上に動いてしまいますよね。
これを、(同じものをOperaで動作させたときのように、)
index.htmlのページ全体ではなくインラインフレーム内のa.htmlだけが
動くように表示させたいのですが、何かいい解決策はあるでしょうか?

最初はIEのバグかと思ったのですが、FirefoxでもMozillaでも
同様なので、Operaの解釈のほうが特殊なのかもしれませんが…。

例えば、IEで

<html>
<head><title>index.html</title>
</head>
<body><center>
<p style="margin: 100px auto 50px auto">サンプル</p>
<p><a href="a.html#a" target="frame">リンク</a></p>
<iframe src="a.html" width="640" height="500" name="frame" style="margin-bottom: 400px">
</iframe></center>
</body>
</html>

というソースのindex.htmlに、

<html><head><title>インフレーム・a.html</title></head>
<body><p style="margin-top: 500px">余白</p>
<p><a name="a">NAME...続きを読む

Aベストアンサー

HTML をまともに書いてそれであればどうしようもないと思います。
多分仕様でしょう…。

Q無料レンタルできるかわいい日記を探してます。

無料レンタルで検索して調べたら
たくさーんでてきて、困ってます。

これはかわいいって感じの日記ないですか?
使っておられる方教えて下さい。

Aベストアンサー

私が前使っていたトコロです。
かわいい…けどちょっと小さいかな~
まぁ参考までに☆

参考URL:http://cgi.ts-japan.net/

Qの一括指定

ファイルの中に、<img src=** border=0>のタグが複数あり、
少しでも、ページを軽くしたいので、
cssなどを使用して、border=0というのを一括指定することは可能でしょうか?
わかる方が居りましたら、ぜひ、教えて下さい。
それでは、宜しくお願いします。

Aベストアンサー

できます
参考URLを参照(画像に枠線をつける)なさって下さい。

ただし!!
ネスケ4.7系を使用されている方々には、このCSSでは画像の周りに
青く太い線が表示されてしまいます。
もし、万人向けに作成されるのでしたら、border="0"は指定された方が
いいかと思います。

参考URL:http://www.tees.ne.jp/~maruo/webpage/css/css-html.html

Qアイコンがかわいい無料レンタル掲示板

無料レンタル掲示板に関する質問はたくさんありましたが、かわいいアイコンで検索を絞りこむとほとんど出てきませんでしたので質問させていただきます。
以下を満たすレンタル掲示板がありましたら教えてください。

・かわいいアイコンをたくさん選べる
・無料
・ツリー型でないもの

・できれば管理者へのメール送信フォームつき
・できれば過去ログをたくさん残せるもの

その他もしおすすめで使いやすい掲示板がありましたら教えてくだい。

Aベストアンサー

http://www.ardor.jp/bbs/

 私が利用してるのは、これです。条件は大丈夫の筈

参考URL:http://www.ardor.jp/bbs/

Q最近、HTMLのヘッダーをIDで定義(id="header")しているサイトが多いですが、なぜclassでなくIDで定義するのでしょうか?

最近、CSSレイアウトを採用しているサイトの多くが、HTMLページのヘッダー部分やフッター部分をIDで定義(id="header"、id="footer")しています。

私は、IDというと、例えば身近には、住所や電話番号、免許書番号や銀行の口座番号等の、多くの場合は連番を用いた固有な値を使用するイメージがあります。

ところがHTMLでは、IDの値にheaderやfooter、さらにはwrapperやcontainer等の、通常ならIDの値として相応しくないような一般的な名詞が頻繁に使用されています。

classの値であれば、そのような一般的な名詞もうなづけますし(というよりclassに固有な値は逆に奇妙かも)、スタイルシートを適用するだけなら、classだけでも十分可能だと思いますが、なぜIDを使用するのでしょうか?とても不思議です。

Aベストアンサー

HTMLページのヘッダー部分やフッター部分をIDで定義(id="header"、id="footer")していることについては、有識者の間でも議論の元になることがしばしばありますね。
確かに、headerやfooter、wrapper、containerの属性値が示唆する意味を考えると(大抵はdiv要素に付加され中のものをグループ化する目的でつけられていますよね)、idよりもclassのほうが妥当な気もします。

ただ、headerやfooter、wrapper、containerというものは1ページの中では1回しか使われることがないのが現状です。
このことを優先して「一回しか使われない=固有値=id属性」という考え方でコーディングする方が多いのではないでしょうか。

また、単純に「トップへ戻る」などのアンカーとしても使用できるのでid属性にしていることも考えられます。

headerやfooter、wrapper、containerがidかclassかというのは結局コーダーの考え方によるものが大きいのでどちらが正しいかと言うのは私には一概には言えません。
また、XHTML Role 属性というものがW3Cの草案で発表されたので、この先そのようなid属性・class属性は淘汰されていくかもしれないですね。

参考までに、
class属性とid属性に関する議論リンク集 - 徒委記
http://www.akatsukinishisu.net/wiki.cgi?class%C2%B0%C0%AD%A4%C8id%C2%B0%C0%AD%A4%CB%B4%D8%A4%B9%A4%EB%B5%C4%CF%C0%A5%EA%A5%F3%A5%AF%BD%B8
web製作者がそれぞれのブログなどで「headerやfooter、wrapper、containerがidかclassか」について考察しているページのリンク集です。

XHTML Role 属性モジュール
http://standards.mitsue.co.jp/resources/w3c/TR/2007/WD-xhtml-role-20071004/
作成者が要素に役割を与えるための属性、Role 属性モジュールについてのW3C草案の邦訳です。

HTMLページのヘッダー部分やフッター部分をIDで定義(id="header"、id="footer")していることについては、有識者の間でも議論の元になることがしばしばありますね。
確かに、headerやfooter、wrapper、containerの属性値が示唆する意味を考えると(大抵はdiv要素に付加され中のものをグループ化する目的でつけられていますよね)、idよりもclassのほうが妥当な気もします。

ただ、headerやfooter、wrapper、containerというものは1ページの中では1回しか使われることがないのが現状です。
このことを優先し...続きを読む


人気Q&Aランキング

おすすめ情報