CSSで作ったHP。左のメニューを選んだら右に表示したい。

2023/08/09 02:41

このQ&Aのポイント

ホームページ作りの初心者ですが、左にあるメニューを選択すると、右のウィンドウ枠に表示されるようにしたいです。
フレームとは異なる方法を使って、CSSでホームページを作成しています。 target属性を使えば実現できると聞きましたが、どのようにすればいいのかわかりません。
具体的な例を使って説明します。テスト１を選択すると、test1.htmがcontents2に表示されるようにしたいです。

ベストアンサー

cssで作ったHP。左のメニューを選んだら右に表示したい。

2009/12/18 15:31

ホームページ作りの初心者です。左にあるメニューを選択したら、右のウィンドウ枠に表示されるようにしたいのですが、志向錯誤しても思うようになりません。フレーム、という構造にしていれば、targetを使ってできるというのは分かったんですが、cssで作っています。これは別ものですよね？それも良く分からなくなっています。私の下手な説明よりも見ていただく方がいいかと思いますので、例を載せさせてもらいます。やりたいことは、テスト１を押したら、test1.htmがcontents2に表示されるようにしたいのです。 ――――― <div id="wrapper"> 　　<div id="header"></div> 　　<div id="inner"> 　　　　<div id="contents1"> 　　　　　　<a href="./test1.htm">　●テスト</a><br><br> 　　　　　　<a href="./test2.htm">　●テスト２</a><br><br> 　　　　　　<a href="./test3.htm">　●テスト３</a><br> 　　　　</div> 　　　　<div id="contents2"> 　　　　　　　/*ここに表示したい*/ 　　　　</div> 　　</div> 　　<div id="footer"></div> 　　</div> </div> ―――――――――――― よろしくお願いいたしますm(__)m

noname#118337

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

質問者が選んだベストアンサー

ベストアンサー

torayoshi
ベストアンサー率62% (910/1449)

2009/12/18 18:13 回答No.1

あくまで「擬似フレーム」なので、基本的には一つのページにすぎません。メニューは同じにして、それぞれのリンク先に応じたページを複数用意するしかないと思います。

質問者

お礼 2009/12/30 04:18

そうですかΣ(*_*) では、複数用意することにします。ありがとうございました！！

関連するQ&A

HPのCSSについて
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する第４歩</title> <style type="text/css"> html { 　height:100%; } body { 　margin:0px; 　height:100%; } #body { 　width:700px; 　margin:0px auto; } #header { 　background:#ccffcc; 　height:100px; /*　width:100%;*/ 　width:700px; 　position:fixed; } #main { 　padding-top:100px; 　background:#ffff99; } #footer { 　background:#ffcc99; 　height:80px; } </style>  </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
XHTML+CSSによるデザインをしています。
XHTML+CSSによるデザインをしています。 divボックスによる３段組レイアウトをして、左サイドバーの中にdivボックスを、縦に複数設置しようとしたら、２個目のボックスが表示されずメインボックスと右サイドバーが詰まってレイアウトが崩れてしまいました。コーディングミスをご指摘いただけるのでしたらお願いします。 <div id="wrap"> <div id="header"> <div id="header_top"> <div id="logo"> <img src="image/logo.jpg" alt="" /> </div> <div id="header_right"> <div id="logo2"> Lost Book World </div> <div id="header_right_txt"> Yu </div> </div> </div> <div id="header_bottom"> <a href=".html"><img src="image/navi_global01.jpg" alt="" /></a><a href=".html"><img src="image/navi_global02.jpg" alt="" /></a><a href=".html"><img src="image/navi_global03.jpg" alt="" /></a><a href=".html"><img src="image/navi_globa4.jpg" alt=" /></a><a href=".html"><img src="image/navi_global05.jpg" alt="" /></a> </div> </div> <div id="inner"> <div id="largeWrap"> <div id="mainWrap"> </div> <div class="sideAlphaWrap"> <div id="form_nv"> <img src="image/form-n.jpg" alt="" /><a href=""><img src="image/form-gen.jpg" alt="" /></a> </div> <div id="form"> </form> </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> <br /> <div id="form_nv"> <div id="form"> ああああ </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> </div> <div class="clear"><hr /></div> </div> <div class="sideBetaWrap"> 右サイドバー </div> <div class="clear"><hr /></div> </div> <div class="footer"> <p>ヘッダー<br /> Copyright © 2004-2010 abc co.,Ltd., All rights reserved.</p> </div> </div>
- ベストアンサー
- HTML
フロートするとメニューが落ちる　IE6で不可
以下のようなhtmlを作成し、CSSを適用しました。メニューを作成する為に、120×50のメニューボタンを横並びにする為、フロートを使ったのですが、 FireFoxでは正常に表示されるのですが、 IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。どうすればいいのでしょうか。 ■html <div id="wrapper"> <div id="header"> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </div> <div id="left"> </div> <div id="right"> </div> <div id="footer"> </div> </div> ■CSS body { text-align:center; font-size:small; } #wrapper { text-align:left; margin:0 auto; width:600px; } #header { } #left { float:left; width:200px; } #right { float:left; width:400px; } #footer { clear:both; } #header li a { display:block; float:left; width:120px; height:50px; }
- ベストアンサー
- HTML
CSSで「float: left;」の次にフッタをうまく表示させるには？
http://okwave.jp/qa5450892.html にて、CSSの段組に関する疑問が無事に解決されました。が、実はもう一つ、新たに表示に際して困ったことが起きています。現在のデザインは、<div id="menu">の右側に<div id="contents">を表示させるようになっておりまして、メニューブロック及びコンテンツブロックは、コンテンツブロックの表示法をもう少し改良するくらいで大丈夫な段階まできました。さて。このページに、新たにフッタを追加したいと考え、<div id="contents">の下に、幅100%のフッタを、<div id="head">のような感じでつけてみたいと考えているのですが、実際にそのようにしてみようとしたところ、 <div id="contents">のさらに右側にfooterが表示されるようになります。この状態を、コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、スタイルシートでは、どのように記せばいいのでしょうか。もちろん、フッタを排除してヘッダ部分にいろいろと書いておくのが簡単な方法ではあるのですが。ご指導、よろしくお願いします。
- 締切済み
- HTML
cssで3カラムを実現したいのですが・・・
cssで3カラムを実現したいのですが、左メニューがカラム落ちします。素人なので、あるサイトを見本にした所、左メニューがカラム落ちしてしまいます。原因がわかりませんので、わかる方どうか助けてください。 -------html--------- <body> <div id="page"> <div id="header"> <div class="inner"> <p>#header</p> </div> </div> <div id="container"> <div id="contents"> <div id="main"> <div class="inner"> <h2>#main</h2> <p>メイン</p> <p>testてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> </div> </div> <div id="sub"> <div class="inner"> <h2>#sub</h2> </div> </div> </div> <div id="ex"> <div class="inner"> <h2>#ex</h2> </div> </div> </div> <div id="footer"> <div class="inner"> <h2>#footer</h2> </div> </div> </div> </body> </html> -------css--------- body { margin:30px 0 0 0; background:#EEE; color:#000; line-height:1.5; text-align:center; font-size:small; font-family:verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳＰゴシック","MS PGothic",Sans-Serif; } *:first-child + html body { font-family:"メイリオ","Meiryo","ＭＳＰゴシック","MS PGothic",Sans-Serif; } html { overflow-y:scroll; } h1,h2,h3,h4,h5,h6 { font-size:medium; letter-spacing:.1em; } p { margin:0 0 10px; } img,fieldset { border:0; } .inner { padding:10px; } /* by */ .by { position:absolute; bottom:10px; right:10px; margin:0; padding:5px; background:#FFF; } /*----------------------------------------------- __page -----------------------------------------------*/ #page { width:90%; min-width:600px; margin:0 auto; text-align:left; } /*----------------------------------------------- __header -----------------------------------------------*/ #header { background:#000; color:#FFF; } /*----------------------------------------------- __container -----------------------------------------------*/ #container { float:left; width:100%; background:#999999; } /*----------------------------------------------- __contents -----------------------------------------------*/ #contents { } /* __main ------------------------------------------*/ #main { float:left; width:100%; } #main .inner { margin:0 200px 0 180px; background:#FFF; } /* __sub ------------------------------------------*/ #sub { float:left; width:150px; margin-left:-200px; background:#009999; } /* __ex ------------------------------------------*/ #ex { float:left; width:150px; margin-left:-100%; background:#CCCC00; } /*----------------------------------------------- __footer -----------------------------------------------*/ #footer { clear:both; background:#000; color:#FFF; }
- ベストアンサー
- HTML
CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div> <div id="footer"> footer </div> </div> </body> </html>
- ベストアンサー
- HTML
CSSによる3カラムレイアウト
CSSによる3カラムレイアウト以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!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" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー　　　　　　　　　　　　　　　　　　　　　| |ナビゲーション｜コンテンツ｜ウィジェット| |フッター　　　　　　　　　　　　　　　　　　　　　| 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
CSS #containerについて
えっと、CSSについての質問です。最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。最初は伸びていたのですが、ヘッダーとフッターを横に１００％にしてから様子がおかしくなりました。減ったーフッターは横に全部伸ばしたくて、コンテイナーは横は余白つけて下にのばしたいのです＞＜どなたか原因がわかる方、対処法わかる方いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div> </div> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div> <div id="sidebar"> </div> </div> <div id="footerbg"> <div id="footer">Footer</div> </div> </div> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
cssでの高さの調整がうまくいきません
はじめまして。当方css初心者です。現在DreamWeaver8でCSS+XHTMLでホームページを作成しているのですが、どうもうまくいかないことがあります。よければご意見下さいませ。以下のソースでmaincontentsに情報を盛り込み、bodyで背景に色をつけてるため、wrapperの背景を白にしてコンテンツ部を白にしたいのですが、maincontentsの情報が少し増えるとwrapperの枠を飛び出してしまいます。wrapperの高さを指定しておけばその範囲では大丈夫なのですが、ページによってmaincontentsの情報量が異なるので「高さ：自動」にすると、contentsの高さまでしか広がってくれません。各ページの情報量が異なるためwrapperの高さも自動で広がって欲しいのですが、どのようにすればよろしいでしょうか。ソースの間違えあると思います。お手数ですが、よろしくお願い致します。 html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="file:///E|/testweb/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> id "header" の内容がここに入ります</div> <div id="contents"> <div id="maincontents"> <p>id "maincontents" の内容がここに入ります</p> </div> <div id="sidenavi"> id "sidenavi" の内容がここに入ります</div> id "contents" の内容がここに入ります</div> id "wrapper" の内容がここに入ります</div> </body> </html> css #wrapper { height: auto; width: 850px; } #header { height: 50px; width: 850px; } #contents { width: 850px; } #contents #maincontents { width: 680px; float: left; } #contents #sidenavi { float: right; width: 90px; }
- ベストアンサー
- HTML
CSSを使用したHPの左メニューとフッターについて
CSSを使用したホームページを作成しています。左メニューとメインコンテンツ部分があります。 2点ほど、ご教授頂けますと幸いです。 1.左メニューの背景色について現在、左メニューの背景色がメニュー周りのみとなっています。これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。 2.ブラウザのサイズ縮小によるフッターの表示について現在、フッターを常に最下部で表示するように対応してみた所です。ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？以下ソースとなります。宜しくお願い致します。 HTML --------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="test.css" type="text/css" /> <title></title> </head> <body> <div id="container"> <div id="header"> </div> <div id="main"> <div class="category"> <h1>テスト</h1> <div class="entry_body"> 本文本文本文本文本文本文本文本文本文本文本文本文 </div> </div> </div> <div id="side"> <div class="category"> <h3>メニュー</h3> <ul> <li><a href="../test1/">test1</a></li> <li><a href="../test2/">test2</a></li> <li><a href="../test3/">test3</a></li> <li><a href="../test4/">test4</a></li> <li><a href="../test5/">test5</a></li> </ul> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- CSS --------------------------------------------------------------- html, body { height: 100%; font-size:80%; line-height: 140%; letter-spacing:1px; color: #333333; background-color:#cccccc; text-align: center; margin: 0px auto; padding: 0px; } a:hover { text-decoration: none; } #container { width:900px; min-height:100%; height:auto !important; height:100%; position: relative; margin: 0px auto; background-color:#FFFFFF; text-align: left; } #header { border-top:#003366 solid 10px; margin: 0px 0px 0px 0px; clear:both; } #main { float:right; width:688px; background: #FFFFFF; margin: 0px 5px 0px 0px; padding: 0px 0px 0px 0px; display: inline; } #main .category { width:688px; margin: 0px 0px 15px 0px; } #main h1 { font-size:105%; border-left:#003366 solid 6px; border-bottom:#cccccc solid 1px; height:17px; font-size:120%; font-weight:bold; margin: 10px 10px 10px 10px; padding: 11px 10px 10px 20px; } #main .entry_body { margin: 15px 24px 15px 24px; padding: 0px 0px 0px 0px; } #main ul { margin: 0px 30px 0px 28px; padding: 0px 0px 10px 0px; } #main ol { margin: 0px 30px 0px 35px; padding: 0px 0px 10px 0px; } #main li { line-height: 140%; margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; } #side { float:left; font-size:12px; width:200px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background:#336699; color:#FFFFFF; } #side .category { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; } #side h3 { color:#FFFFFF; background:#003366; font-size:12px; text-align:left; font-weight:bold; margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; border:#6699cc 1px solid; } #side .entry_body { margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; background: #6699cc; } #side ul { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; background: #6699cc; } #side li { line-height: 120%; list-style:none; margin: 5px 0px 5px 0px; border:#336699 1px solid; } #side li a, #side li a:link, #side li a:visited { color:#FFFFFF; text-decoration:none; display:block; padding: 10px 10px 10px 10px; } #side li a:hover { color:#333333; background:#99ccff; text-decoration: none; padding: 10px 10px 10px 10px; } #footer { width:900px; height:10px; background:#003366; margin: 0px 0px 0px 0px; position: absolute; bottom: 0; } ---------------------------------------------------------------
- ベストアンサー
- HTML