締切済み

サイトの画面の分割

2006/12/15 21:53

サイトの上と左部分がメニュー等出来ていて、次のページに行ってもそこは固定されていて変わらず、残りの部分だけが新しくなるデザインのサイトの場合、その変わる部分にFC2のショッピングカートのページを丸ごと組み込みたいのですがどうすればいいですか？

baki69
お礼率5% (2/37)

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

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

みんなの回答

abacabu
ベストアンサー率37% (250/663)

2006/12/17 11:52 回答No.2

趣味でHPを作成している者です。 NO,1さんの回答でほぼ完璧ですが、補足を少し。まず「その変わる部分にFC2のショッピングカートのページを丸ごと組み込みたい」との事ですが、これは一応著作物ですので製作者に許可を貰うか、ページ内にOKが記述されていれば問題ないでしょう。フレームは表示しないブラウザがあるのでフレームの様にサイトの上と左下にメニューと右下にインラインフレームをお勧めします。その画面分割自体はCSS(スタイルシート)で作成します。段組み(だんぐみ)で検索すると色々ヒットすると思います。が参考までに書きます。 style.cssという外部スタイルシートファイルを作る html{ overflow:hidden; ←全体にスクロールバーが出るのを阻止 height:100%; } body{　　　　　　　　←画面表示を全ブラウザで100％表示 height:100%;　　　　　見た目の違いを解消 width: 100%; } #wrapper{　　　　　　←段組みスタート width:760px; } #header{ height:70px; } #container{ position:relative; margin:10px 0; width:100%; } #right{ overflow:auto; margin-left:190px; width:570px; height:400px; } #left{ position:absolute; left:0px; top:0px; width:180px; height:400px; } ここからがHTMLファイルです。インラインフレームはTransitionalで宣言します <!DOCTYPE html PUBLIC"-//W3C//DTD HTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style.css"> </head>　　　　　　↑これは外部CSSを呼び出してます <body scrool="no">　　　←念のためこちらでもスクロール解除 <div id="wrapper"> <div id="header">ここにヘッダー(上部分)内容記述</div> <div id="container">　　　←ここがした２個始まり <div id="right"><iframe src="最初に表示させるURL" width="570px" height="400px" name="sub" scrolling="auto"></iframe></div>　　 ↑ここが右下インラインフレーム <div id="left">ここにメニュー(左下)部分を書く例：<a href="お好きなURL" target="sub">表示される名前</a> 　　　　　　　　　　　　　↑iframeにターゲット指定しています。　　　　　　　　　　　　　　これにより右側に表示されます </div> </div> </body> </html> こんな感じです。やってみて下さい。私もこんな感じのレイアウトですので殆どコピペで書けたので楽でした。