フレームの作り方

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ID:T1TxiQHO
初めまして、霜月檜芽と申します。
フレームの作り方について質問させていただきます。

現在の状況は、フレームを作りたいのですが『このタグは３ページ全部にはるの？？』という感じでちんぷんかんぷんな感じです。

やってみたのは、とりあえずタグを全ページに貼ってみたり(タグサイトに載っていたものをコピーして)
『～～１』とそのページの部分を自分のページに変えてみたりしました。

備考は、以前フレームを使っているサイト様にメールで質問してみたので、その回答を載せたいなと思います。

①3つページを作る
②ページに名前を作る
③3つ中の2つ名前をつけたページを片方にブットブようにする（名前で）
完了♪・・・・（最悪・・・；；

という回答をもらいました。

詳しく教えていただける方、回答お願いします！

ちなみに、作るサイトはFC2です。

1   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/27（日） 17:05  ［URL］  ID:O5hEMlpW
フレームページとは、要するに「複数のページを表示するページ」を作ることです。

以下のサンプルは、
・http://www.google.co.jp/
・http://www.yahoo.co.jp/
を表示するフレームページの例です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
	"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja" dir="ltr">
<head>
<title>霜月檜芽のページ</title>
</head>
<frameset cols="30%,*">
	<frame src="http://www.google.co.jp/" name="google">
	<frame src="http://www.yahoo.co.jp/" name="yahoo">
	<noframes>
		<!-- フレームを無視する環境のために、必ず代替のページを書く -->
		<body>
			<h1>霜月檜芽のページ</h1>
			<ul>
				<li><a href="http://www.google.co.jp/">google</a></li>
				<li><a href="http://www.yahoo.co.jp/">yahoo</a></li>
			</ul>
		</body>
	<noframes>
</frameset>
</html>


2   名前： Fumi ： 2006/08/27（日） 17:05  ID:sWSxmTim
この回答は必要ないかもしれませんが一応。
フレームページを作る時に必要な(最低)3つのページというのは、
１、フレームの枠を果たすページ（見た目はわかりません）
２，３、たて（よこ）2つわりなら2ページ、（3つわりなら3ページがいります。）

１のページは何と何のページを幅はどのくらいの割合で表示するとか、境目はどうするか、などのことを記すページです。
２，３のページはフレームページの中身で、例えばたて二つ割なら、左に表示するページ（メニューなど）、右に表示するページ(メニューのリンクの中身など)のことです。

>③3つ中の2つ名前をつけたページを片方にブットブようにする（名前で）

というのは、例えば左に表示するページのリンクをおしたら右にリンク先のページが表示されるようにするという意味ではないでしょうか。
>2つ名前をつけたページ
（言い換えると2つのページに名前を付ける）
方法は、http://www.tagindex.com/html_tag/frame/frame_name.htmlで、
>片方にブットブようにする
方法は、http://www.tagindex.com/html_tag/frame/a_target.htmlの【フレームを使用した場合のリンクパターン】を見るといいと思います。
3   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ID:T1TxiQHO
あ！一応フレーム本体(？)は作れました！！http://simoduki.web.fc2.com/newdir/index.html
でもやっぱり質問になっちゃうんですが、このページの左から右側に絵を飛ばせるのはどうしたらいいんでしょうか？
やっぱりタグごとリンクしちゃうんですか？
4   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ID:T1TxiQHO
あっ！回答載ってた・・・(更新押してなくてカヅサツ様・Fumi様の回答見る前に３を投稿してしまいました。)
カヅサツ様、わざわざ名前入りのタグまでありがとうございます！！

Fumi様、『この回答は必要ないかもしれませんが一応。』という文章までつけていただいて
　　　　　　１～１０まで分かりやすい回答ありがとうございます！
5   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ID:T1TxiQHO
こんにちは、霜月です。えっと、メニューから右へ項目移動(？)っぽい奴のタグは分かったんですが、そのタグだとどうしても新規のページで出てきてしまいます；；ちなみに、そのタグは
<body bgcolor="#ffcccc">
<BR><BR>
<A href="profire.html" target="MAIN">PROFIRE</A>
</body>

なのですが、間違っているところなどあるのでしょうか？

載っていたＨＰには『これで右へ載る』みたいなことが描かれていたのですが・・・。

ご指導お願いします。
6   名前： 匿名 ： 2006/08/27（日） 17:05  ID:zqn32COP
a要素のtarget属性値とframe要素のname属性値が合致してないのでは？
といいますか、問題のページのソースかURIを提示してもらった方が適切な回答を得られるでしょう。
7   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ID:T1TxiQHO
匿名様、回答ありがとうございます。さっそく問題のページのＵＲＩを提示させていただきました。

a要素のtarget属性値とframe要素のname属性値が合致していないのですか・・・。早速改善させていただきます。
また分からないことが出てきたら質問させていただきます。
8   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ［URL］  ID:T1TxiQHO
問題ページ(フレーム)のＵＲＩです。

http://simoduki.web.fc2.com/newdir/newdir/index.html
9   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ［URL］  ID:T1TxiQHO
えっと、いろいろいじってるうちにアドレス変わっちゃったので、また貼り付けます。

http://simoduki.web.fc2.com/newdir/newdir/top.html
10   名前： ぼつ ◆WaaKujzHFY ： 2006/08/27（日） 17:05  ID:dOaBmoUO
あなたが設定し忘れているのはこれ。
http://www.tagindex.com/html_tag/frame/frame_name.html

フレームに関して、ここに書いてあるのだからよく読んでみてくださいな。
http://www.tagindex.com/html_tag/frame/index.html

# 突っ込みたい部分が多々あるけれどやめておこ。
11   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/27（日） 17:05  ［URL］  ID:f0UXxXRM
top.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
	<title>sweet blueberry</title>
</head>
<frameset cols="200,*">
	<frame src="./sample3.html" name="menu" />
	<frame src="./sample4.html" name="main" />
	<noframes>
		<body>
			<h1>sweet blueberry</h1>
			<ul>
				<li><a href="./sample3.html">Menu</a></li>
			</ul>
		</body>
	</noframes>
</frameset>
</html>


sample3.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
	<title>menu / sweet blueberry</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body class="menu">
<ul class="menu">
	<!-- profire ではなく profile です -->
	<li><a href="./profire.html" target="main">PROFILE</a></li>
	<!-- irasuto ではなく illust(ration) です -->
	<li><a href="./irasuto.html" target="main">GALLERY</a></a>
	<li><a href="./sample4.html" target="main">HISTORY</a></a>
</ul>
</body>
</html>

12   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/27（日） 17:05  ［URL］  ID:f0UXxXRM
sample4.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
	<title>menu / sweet blueberry</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
<marquee>本日よりこっそりオープンです☆</marquee>
<h1>* 更新情報 *</h1>
<div id="history">
	<table>
		<tbody>
			<tr>
				<th>12/24</th>
				<td>オープン☆(予定)</td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>


style.css：
/* 基本要素 */
body{
	color: black;
	background-color: white;
	font-size: medium;
}
/*ブロック要素 */
h1{
	text-align: center;
	font-weight: normal;
	font-size: 100%;
}
/* 特定の class/idを持つ要素 */
/* メニューページ背景 */
body.menu{
	background-color: #ffcccc;
}
/* メニュー */
ul.menu{
	margin: 1em 0em;
	padding: 0em;
	list-style-type: none;
}
ul.menu li{
	margin: 1em 0em 3em 0em;
}
/* 更新履歴 */
div#history{
	border-width: 1px;
	border-style: solid;
	border-color: gray;
	width: 20em;
	height: 4em;
	margin: 1em auto;
}

13   名前： 霜月檜芽 ： 2006/08/27（日） 17:05  ID:T1TxiQHO
沢山の回答ありがとうございます。

ぼつ様　　設定し忘れているページのアドレスありがとうございます。早速やってみます。


カヅサツ様　　今回も沢山のタグをありがとうございます。上の方にページの名前も書いてあってとても分かりやすいです！！
　　　　　　　早速ページごとに貼り付けてみます。
一覧へ戻る