• 締切済み

今HPを作り始めたのですが、初心者で本を見たり調べたりしてもわからない

今HPを作り始めたのですが、初心者で本を見たり調べたりしてもわからないことだらけです。 そこで質問があるのですが、 <div>で上からヘッド・メイン・フッターと3つに仕切ってヘッド部分にメニューを入れています。 そのメニューをクリックするとヘッド・フッターは固定のまま真ん中のメインの部分がリンク先に飛ぶと言うものです。 そういった事は可能でしょうか。 可能でしたらどういった指示をしたらいいのでしょうか。 そもそも<div>以外でどういった構成に向いている方法がありますでしょうか。 よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数19

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

それは、インラインフレーム<iframe>じゃないでしょうか。 javascriptを使わないとすると メニュ－のリンクの表示先(target属性)を、インラインフレームの 名前にすればよいかと．． <body> <div>header <ul>menu <li><a href="hoge" target="kore">hoge</a></li> <li><a href="fuga" target="kore">fuga</a></li> </ul> </div> <div>main <iframe name="kore" src="about:blank"></iframe> </div> <div>footer </div> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 【初心者】ＣＳＳリンクについて

    外部ＣＳＳのあるテンプレートをダウンロードしました。 今まではＨＴＭＬだけでＨＰを作ってたのでＣＳＳについては全くわかりません>< ヘッダー、左にメニュー、右にメイン、そして下にフッターがあるものなんですが、 メニューをクリックして内容をメインに表示させるというのがどうやっているのかわかりません--; 本当に初歩的なことですみません。。 今までだとフレームを使ってターゲット指定でメインにリンクする方法ですがＣＳＳだと？？ 自分で本も買ってきて勉強もしてますが外部呼出しＳＣＣ…難しいですT_T

    • ベストアンサー
    • HTML
  • こんにちは、ＨＰ作成をある初心者向けの本で練習していますが、

    こんにちは、ＨＰ作成をある初心者向けの本で練習していますが、 まずdivというのが範囲指定というのはわかるのですがそもそもdivというのは どういう意味なのでしょうか？あとdiv idとdiv classの使い分けがいまいちわかりません。 それとわかりにくいかもしれませんがある画像の上に、重ねるように(大きさは下のほうが若干大きいです） もう一つの画像を張るにはどうすればいいでしょうか？よろしくおねがいします。

  • 【HP制作】２カラムを3カラムに変更したい！

    現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。 現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。 ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、 画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。 因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、 どうしても(1)→(2)→(3)の順番になりません。 独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。 お分かりの方がいらっしゃったら、どうかよろしくお願いします。 初心者レベルなので、分かり易く教えて頂けると助かります。 どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right;　←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/　　←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div> <!--***** メイン部分 *****--> <div id="main"> </div> <!--*****// メイン部分 *****--> <!--***** 左サイドメニュー *****--> <div id="leftside"> </div> <!--*****// 左サイドメニュー *****--> <!--***** 右サイドメニュー *****-->　←ここを追加しました。 <div id="rightside"> </div> <!--*****// 右サイドメニュー *****-->

    • ベストアンサー
    • CSS
  • divをつかった2段組について教えてください。

    すみませんが、思うように段組ができないので、教えてください。 divを使って、次のようなレイアウトを実現させようとしています。 「メインとサブからなる2段組で、メインは幅400px以上、サブは幅200px固定、スクリーンにあわせてメインは大きくなる」(このサイトのようなレイアウトです。) メインを固定でならできるのですが、スクリーンの大きさに合わせる方法が分かりません。 たたき台のコードを添付します。どこを直せばよいのか、教えていただけると幸いです。 -------------------------------------------html------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="/style.css" type="text/css"> </head> <body> <div id="header"> ヘッダ </div> <div id="box"> <div id="boxMain"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> <div id="boxSub"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> </div> <div id="footer"> フッタ </div> </body> </html> ------------------------------css-------------------- div#header { width: 600px; } div#box { } div#boxMain { float: left; margin: 0px; } div#boxSub { width: 200px; float: right; } div#footer { clear: both; width: 100%; }

    • ベストアンサー
    • HTML
  • CSSで微妙にずれる

    CSSで微妙にずれる こんにちは、最近HPを作成するようになった初心者です。 あるフリーサイトのCSSを雛形としてHPを作成したのですが、 （TOPとMENUとMAIN（コンテンツ）とFOOTERの４構成 MENUは左でMAINが右） ブラウザの枠の中にFOOTER部分が表示されると （上下に短いコンテンツ） 微妙に左（多分３PXぐらい）に、ずれて表示されてしまいます。 この様な、場合原因の部位を特定するには、どの様なアプローチを 行えばよろしいのでしょうか？ 教えていただけるとありがたいです。 ちなみに、FOOTERのHTMLは <div id="footer"> <address>Copyright &copy; 2010 XXXXX All Rights Reserved.</address> </div> で、 CSSは div#footer { clear:both; margin:0 20px 0 20px; } です

  • 範囲指定印刷での位置（css)

    media printを使って、印刷範囲を指定したいです。 サイトは大きく以下のように構成されています。 サイト全体を囲む　div#base（サイズ固定、センターぞろえ） div#baseの中に、 ヘッダ　#header（上段、左右いっぱい） メニュー　.area_menu（中央段左。float:left） メイン　.main（中央段右。float:right） フッタ　#footer（下段、左右いっぱい） となっています。 上記各要素の中に子要素は諸々入っていますが、上記の大箱たちはこれ以上入れ子になってはいません。 ※例えば、「メニューとメイン」を合わせて別の箱でくくったりはしていません。 このうちの、メイン部分のみ、印刷したいです。 現在、 @media print{ .area_menu{display:none;} #footer{display:none;} #header{display:none;} .main{width:100%; float:none; color:#666;} } としています。 確かにメイン以外の部分は消えるのですが、本当にそのままの位置で消えただけという感じで、メインの左側に大きな余白ができてしまっています。 印刷サイズを拡大・縮小してみてもやはり同じで、左側の白い部分（メニューがあった部分）も「印刷物」として認識してしまっています。 印刷範囲からはみ出るくらい拡大すると、左に余白を残した状態で、右側は印刷可能範囲からはみ出て次ページに行ってしまいます。 どうすれば、「メイン部分だけ」を左に持ってこれるでしょうか？ 検索したのですが見つからなかったため、 適当に指定のfloatの部分を右や左にしてみたり、clearを入れてみたり、「div#baseを読んでるのか？」と思い、div#baseをdisplay:noneしてみたり…。 初心者なりに色々試してはみたのですが、どうにもうまくいきません。 float:rightがかかっているボックスを、左寄せにして印刷する方法をお願いします（＞＜

    • 締切済み
    • CSS
  • ホームページ作成中です。《初心者です》

    現在ホームページを作成しています。 初心者なのですが、勉強の為、フレームに挑戦 してます。 現在のホームページの構成は3分割で上に 『メニュー欄』左に『項目欄』残りに『メイン画面』 をおいています。 この際、上の『メニュー欄』をクリックすることで 『項目欄』が変更になります。 しかしながら、この作りにすると『メイン画面』 が変らず残ってしまいます。 『メニュー欄』をクリックしたと同時に『項目欄』 と『メイン画面』を同時（時間差OK）に切り替える 方法はございませんでしょうか？（つまり、 『メニュー欄』を１クリックで『項目欄』と 『メイン画面』を切り替えたいです。） 初歩的な質問かも知れませんがよろしく お願い致します。 <ホームページ構成> TOP 　TOP　　　　←TOP画面（HPのメイン画面） 　自己紹介 　HP紹介 Aメニュー 　AメニューTOP←Aメニュークリックでメイン表示 　A1項目 　A2項目 Bメニュー 　BメニューTOP←Bメニュークリックでメイン表示 　B1項目 　B2項目 　　・ 　　・

  • スタイルシートでのレイアウトについて

    スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。 　-HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド上部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド下部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="footer"> フッター部分 </div><!-- end footer --> </div><!-- end outline --> 　-CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？ あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか？ スタイルシートの段組みで、非常に困っています。 助けて下さいm(_ _)m

  • 左メニューをCSSで固定したい

    左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。 固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。 これをフレームを使わずに作ることはできないでしょうか？ できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu　　■　main　　　　　　■ ■　 　　 　■　　　　　　 　　　■　　　 ■ 　 　　 　■　　　　　　 　　　■ ■　　 　 　■　　　　　　 　　　■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる ・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール 【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }

    • ベストアンサー
    • HTML
  • ヘッダー・フッター固定HTMLに関して

    ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0;　padding:0;　overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0;　height: 100%;　width: 100%;} body > #flashcontents {height:100％;　position: absolute;} #contents {　position: fixed;　overflow:hidden;　bottom:0;　他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する