• ベストアンサー

今、依頼されてフレームで区切って上にロゴ、さらに下半分の左をメニュー、

今、依頼されてフレームで区切って上にロゴ、さらに下半分の左をメニュー、下半分の右をメインページにしたサイトを作っています。 例えば、blogの様に760ピクセル程度に収めてブラウザ中央に表示させたく思い、調べましたが、tableでする方法等ある様ですが、うまく行きません。単一のページだとうまく行くようですが、フレームを使ったサイトでそれを実現するのが出来ないのです。 私はHTMLは分かるのですが、CSSはよく知りません。どうかよろしくお願い致します。

noname#256107
noname#256107

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

　もちろん、tableでもできますが、頼まれるくらいなので失礼ですが・・・下記はご存知ですよね。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。 　・・・・【中略】・・・ 　・ ページレイアウトの目的で表を用いる。 　・・・【中略】・・・ 　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ・・・【中略】・・・ こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より よって、tableはなしです。 　また、フレームも フレーム 問題 ホームページ - Google 検索 ( http://www.google.co.jp/search?hl=ja&source=hp&q=%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0+%E5%95%8F%E9%A1%8C+%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq= ) 　のように問題が多く、現在新しいサイトで見かけることはなくなりました。 　以上のことから、フレームは無論、tableも使わない。本来の方法で作成すべきです。 　すくなくとも、他人のサイトなら、最低限W3Cの勧告に準じた・・ウェブ標準仕様で作成すべきです。 下記に、基本的なHTML4.01Strictでのサンプルを上げておきます。<body></body>内はシンプルなHTMLで、スタイルシートを読まないブラウザや検索エンジンは、これだけの情報で必要十分でしょう。 　ウィンドウの幅に関わらず適当に表示されるはずです。ウィンドウの幅を変えて確認してください。CSSも単純ですから、ブラウザによる差もほとんどないでしょう。 ★ソースはタブ１個を全角スペース２個で置換してあります。元に戻してください。 ★いちおう、最低限のお約束として、IE8,Opera9.25,safari4,firefox3.6および 　Another HTML-lint gateway ( ​http://openlab.ring.gr.jp/k16/htmllint/htmllint.html​ ) 　The W3C Markup Validation Service ( ​http://validator.w3.org/#validate_by_input​ ) 　W3C CSS 検証サービス ( ​http://jigsaw.w3.org/css-validator/#validate_by_input​ ) で検証しておきました。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> 　　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> 　　<title>サンプル</title> 　　<meta http-equiv="Content-Style-Type" content="text/css"> 　　<link rev="MADE" href="mailto:hoge@hoge.com"> 　　<style type="text/css"> <!-- 　　html,body{padding:0px;margin:0px;} 　　body{ background-color: rgb(180,180,180);} 　　h1{text-align:center;} 　　div#top{ 　　　　width:100%;background-color:blue;color:white; 　　　　margin:0px;height:60px;border:solid 1px blue; 　　} 　　div#bodyText,div#info{ 　　　　position:relative;width:60%;margin-left:auto; 　　　　margin-right:auto;border: solid 1px red; 　　　　background-color: white;padding: 2px 1em; 　　} 　　ul#nav,div.note{ 　　　　font-size: 0.9em;position: absolute; 　　　　top:0px;width: 24%;margin: 0px;height:100%; 　　　　border: solid green 1px; 　　} 　　ul#nav{ 　　　　display:block;padding:5px; 　　　　right: 101%;border-color: blue; 　　　　background-color: rgb(255,180,180); 　　} 　　ul#nav li{ 　　　　padding:0px;margin:0px;display:block;list-style:none; 　　} 　　div.note{ 　　　　padding:5px;left: 101%; 　　　　background-color: rgb(180,180,255); 　　} 　　div.note h2{margin: 0.2em;font-size: 1.2em;} --> 　　</style> 　　<link rel="START" href="../index.html"> </head> <body> 　　<div id="top"> 　　　　<h1>見本</h1> 　　</div> 　　<div id="bodyText"> 　　　　<h2>サンプル</h2> 　　　　<p>ここから本文</p> 　　　　<ul id="nav"> 　　　　　　<li>目次1</li> 　　　　　　<li>目次2</li> 　　　　　　<li>目次3</li> 　　　　</ul> 　　　　<div class="note"> 　　　　　　<h2>ノート</h2> 　　　　　　<p>脚注</p> 　　　　</div> 　　</div> 　　<div id="info"> 　　<h2>文書情報</h2> 　　　　<h3>更新履歴</h3> 　　　　<dl id="document-version"> 　　　　　　<dt id="first-published">First Published</dt> 　　　　　　<dd>2010-01-28</dd> 　　　　</dl> 　　</div> </body></html> ＞私はHTMLは分かるのですが、CSSはよく知りません。どうかよろしくお願い致します。 　なら、今からなら遅くない・・ はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )あたりから・・・

noname#256107
質問者

お礼

ご丁寧なご回答、ありがとうございます。 フレームを使った場合、検索で来た方が困る事が分かりました。 載せて頂いたソースを表示してみてびっくりしました。 やはりCSSを覚えようと思います。 載せて頂いたソースをいじったり、「はじめてのWebドキュメントづくり」 を勉強します。ありがとうございます。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • 左メニューを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ファイルで表示させたい

    使用ソフトは、DreamWheaverです。 某ショッピングサイトのトップページを作成していますが、左のカテゴリメニューや特集欄などは、中央のページが変わる際に違うHTMLファイルを読み込むわけですが、左メニューが同じだと、同じ記載がされているのでファイルが重くなるのと、変更時にすべてのHTMLファイルの左部分を変更しないといけない、ということになります。 左フレームだけ別HTMLファイルにして、一個だけ変えたらすべてのページで左フレームが変わるようにしたいです。どうすればいいのでしょうか・・・？

  • メニューをフレーム以外で呼び出すことは可能？

    全ページにメニューを書き込むと手直しとかが大変なので、メニュー用のHTMLを作ってそこから呼び出したいです。 フレームでできるのはわかりませんが、個人的にフレームが好きではないので他の方法があったらそちらにしたいです。 何かいい手段はないでしょうか？

    • ベストアンサー
    • HTML
  • 上と左にフレームわけされているメニューボタン画像の切り替えについて

    フレームをまたいだメニューボタンの動作で困っています。 現在作成しているページは、3フレームにわかれていて、 上と左フレームにメニューがあり、右側にメインフレームという構成です。 上と左にあるメニューボタンをクリックすると、 メインフレームに該当htmlが表示されるタイプです。 それぞれのメニューボタンはGIFで作っていて、 OFFの状態とONの状態の２種類を用意しています。 メニューボタンをクリックすると、 メインフレームに該当htmlが表示され、 クリックしたメニューボタンのGIFがONの状態になり、 その他のメニューボタンはOFFの状態になる、 というものが作りたいのですが、 左フレームは左フレームだけならうまくいくのですが、 上フレームのメニューと左フレームのメニューの連携がうまくいきません。 （例えば、左フレームのあるメニューボタンをクリックしたら、 上フレームのメニューもOFFの状態に戻したいんです。） もし何か解決策をご存知の方がいらっしゃいまいしたら、 どうかご教授ください。 よろしくお願いいたします。

  • フレームを使わずに、左側にメニューを表示したい

    目的：フレームを使わずに、左側にメニューを表示したい。 最近、多くのサイトで見られるのですが、フレームを使っていないのに、左側にメニューが表示されています。このメニューは各ページで同じになっています。これはどのようにして作るのでしょうか。HTML作成ツールを使っているのでしょうか。私は手書きでページを作成していますが、メニュー部分が変更した時の修正が大変そうです。

    • ベストアンサー
    • HTML
  • 上フレームページと下フレームページが共にページのTOP（一番上）の位置

    上フレームページと下フレームページが共にページのTOP（一番上）の位置が見えるよなリンクの仕方を教えてください。 HTML初心者です。上下2つに分けたフレームページを作っています。 下フレームページの下の方の位置のリンクボタンをクリックすると上フレームページが見えなくなってしまいます。また下フレームページも下の方の位置へリンクしてしまいます。 下フレームページのどの場所のリンクボタンをクリックしても常に 上フレームページと下フレームページが共にページのTOP（一番上）の位置が見えるよなリンクの仕方をご教授ください。初心者ですのでなるべく簡単で具体的なHTMLの書き方を教えてください。 どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • フレームメニューからの移動リンク

    縦の三段フレームにしまして、一番下のフレームをメニュー 中段をメインとしたいのですが、一番下のメニューのリンクを中段フレームに表示させるにはどうしたらいいでしょうか。

  • フレームを使って細いメニューを作りたいです。

    フレームを使って細いメニューを作りたいです。 フレームを使って下のほうに細いメニューを表示したいと思っています。 しかし文字の上に一行分くらいの隙間が開いてしまい、 メニューの文字がスクロールしないと表示されません。 メニューの作り方も調べましたが、ここまで細いものについてはわかりませんでした。 どうしたら上手く表示できるでしょうか。 完成ページ↓ <html> <head> <title></title> </head> <frameset rows="*,3%" frameborder="NO" border="0"> <frame src="PageTop.html"> <frame src="Menu.html" noresize scrolling="NO"> <norames><P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </frameset> </html> PageTop.html↓ <html> <head> <title></title> </head> <body></body> </html> Menu.html↓ <html> <head> <title></title> <style type="text/css"> <!-- p { text-decoration: none; } --> </style> </head> <p> <body bgcolor="#696969" link="#696969" alink="#696969" vlink="#696969"> <font face="Kartika"><div style="font size:20px;"> 　　 <target="1" href="">Top</a> 　　　 <target="1" href="">About</a> 　　　<target="1" href="">Main</a> 　　　<target="1" href="">Blog</a> 　　　<target="1" href="">Link</a> 　　　<target="_top" href="">Index</a> </font></p> </body> </html> 至らない点がありましたらご指摘ください。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • HTML＋フレーム構成のページを、HTML+CSSで書き換えるには？

    HTML＋フレーム構成のページを、HTML+CSSで書き換えるには？ コンテンツはそのままに、HTML＋フレーム構成のページを、HTML+CSSで書き換えることになりました。 ヘッダー、フッター、上部に画像ロゴ、左にメニューを配置したいと思ってます。 メインコンテンツ部分以外はSSIでインクルードしたいと思っています。 案外簡単だと思ったのですが・・・すぐ配置が崩れて悩んでます。 さらに、CromeとIEで確認をするたびに配置が違ってしまいます。 merginとpadsdingを0にしてから始めるらしいことまでは調べたのですが、 そうするととても配置が変で面倒になります。 現在はFFFTPと秀丸とブラウザで作業してます。 ほかに、PhotoShop6とホームページビルダー14とMicrosoftExpressionweb3は手元にライセンスがあります。 HTMLは分かりますが、CSSは初めてです。多少がんばれば、javaScriptも使えるかもしれません。 お薦めの本や、作り方、フリーウェアなどありましたらご指導ください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • フレームでポップアップメニュー

    FWMXとDWMXでページを作っています。 ポップアップメニューのあるページをフレームでメニューバーとして作りたいのです。 例えば、上下のフレームで上フレームにメニューバー下フレームにはそれぞれ違うページのようにフレームを使用します。 なぜフレームかと言うと100ページのサイトだったとして、メニューの項目が増えた場合100ページの修正とアップロードが必要になります。このようなことが無いようなページを作りたいのです。 1つのファイルを修正したら全てのページにも自動で反映されるような…このような方法が有ればベストです。 そこで、フレームを使用する事にしました。 （他に方法があれば、フレームを使用しなくても良いです。何か方法があればこれも教えてください。） 話は戻りますが、このとき、上フレームと下フレームの境界でポップアップが隠れてしまいます。 これを回避する方法として、１つはマクロメディアのサイトを参考に見ました。 http://www.macromedia.com/jp/support/fireworks/ts/documents/fw0133.html これは、それぞれのページ全てに記述しなければならないので結局100ページの修正が必要になります。 その他Javascriptを外部ファイルにする。 という方法も試しました。 これは一見成功したと思いましたが、ポップアップメニューの表示する場所を指定する為、（下フレームページの一番上0の座標に表示する命令を書きました。）ページをスクロールした時にポップアップの内容が無くなってしまいます。 これを回避する方法があれば、それでも良いのですが… 何か良い方法を知っている方は、是非知恵を貸して頂けないでしょうか。 宜しくお願いします。 (*- -)(*_ _)ペコリ

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する