締切済み

フレームの作りかたについて

2009/04/11 22:47

すみません。商品販売ホームページの左側にフレームで分けて商品一覧を作りたいのですが、どのようにすれば宜しいでしょうか。また、このホームページはフレームなしはできあがっており（私が作ったのではないです）、現在よりも商品数を増やしたいと考えています。具体的にどのようにしたら完成するか、教えてください。

3578desu
お礼率37% (6/16)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

みんなの回答

noname#119508

2009/04/12 15:36 回答No.4

3つのページが必要になります。まず、index.html <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <title>タイトル</title> </head> <frameset cols="200, *"> <frame src="menu.html" name="menu"> <frame src="main.html" name="main"> <noframes> <body> フレームに対応しているブラウザで見てください。 </body> </noframes> </frameset> </html> その次にmenu.html <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="robots" content="none"> <title>タイトル</title> </head> <body> <a href="profile.html" target="main">プロフィール</a> <a href="link.html" target="main">リンク</a> </body> </html> その次にmain.html <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="robots" content="none"> <title>タイトル</title> </head> <body> メニューをクリックしてください。 </body> </html> こんな感じ。あとは、先に回答された方の言うとおりにすればたぶん。

tgook
ベストアンサー率48% (96/198)

2009/04/12 15:05 回答No.3

>上記サイトみたいな形が理想で、左側にインデックスを付けたいのですが、これもフレームでしょうか。 No.1さんの回答にあるリンク先で見られる「■ ブラウザでの表示」のことであれば、回答はフレームです。左右にフレームを分割し、左側フレームにあるインデックスから、右側フレームの表示を変更したいのでしたら、以下のようにします。ちなみにhtmlファイルは3個作成する必要があります。以下ではトップページは「index.html」で、「index.html」ファイルをブラウザで開くと、左側に「menu.html」を表示し、右側に「main.html」の内容を表示することを前提に書きます。その際、3個のhtmlファイルは同じフォルダ上に置く必要があります。・「index.html」の例 <html> <head> <title> index.html </title> </head> <frameset cols="20%,80%"> <frame name = "menu" src="menu.html"> <frame name = "main" src="main.html"> <noframes> <body> このページはフレームを使用しています。 お使いのブラウザがフレームに対応していないため、表示されません。 </body> </frameset> </html> ・「menu.html」の例 <html> <head> <title> menu.html </title> </head> <body> <a href = "profile.html" TARGET="main">profile</a> <a href = "photo.html" TARGET="main">photo</a> </body> </html> ・「main.html」の例特に、これといった設定はありません。「menu.html」の「a href」で TARGET に "main" とあるのは、「index.html」の「frame name」で右側のフレーム(main.html)の名前を "main" と設定しているからです。例えば、左側フレーム(menu.html)に表示される、profileというリンクをクリックすると、右側のフレーム(main.html)には "Profile.html" の内容が表示されるようになります。ちなみに上記「index.html」と「menu.html」のコードは私が作っているサイトのソースコードの一部をコピペしたものですので、上記コードをメモ帳とかにコピペして使いまわすことも可能です。