- ベストアンサー
HTML、CSSでのHP作成で質問
- 初心者がHTMLとCSSを使ってホームページを作成しています。ページの上部にタイトルバー、左側に縦のサイドメニューを配置したいと思っていますが、メニューの下に表示されてしまいます。解決策を教えてください。
- HTMLとCSSを使い始めた初心者です。タイトルバーとサイドメニューを配置しようとしていますが、サイドメニューがメニューの下に表示されてしまいます。どうすればうまく配置できるでしょうか？
- ホームページ制作の初心者です。タイトルバーとサイドメニューを配置したいのですが、サイドメニューがメニューの下に表示されてしまいます。解決策を教えてください。
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
divの使い方が間違ってますね。 「タイトル」「サイドメニュー」「内容」をそれぞれdivで区切らないとダメです。 この上で、CSSで各DIVのClassに対して、それぞれの表示位置を定義します。 HTMLにすると以下の様な感じになります。 コピペして表示してみてください。 <html> <head> <title>sample</title> <style TYPE="text/css"> <!-- div.main { MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 800px; } div.titlebar { position: relative; background-color: #6699FF; } div.menu { float: left; width: 300px; background-color: #99FF66; } div.contents { float: right; width: 500px; background-color: #FFFF66; } --> </style> </head> <body> <div class="main"> <!-- タイトル --> <div class="titlebar"> <p class="title">サイトの名前</p> </div> <!-- メニュー --> <div class="menu"> <ul> <li>項目1</li> <li>項目2</li> <li>SAMPLE</li> <li>SAMPLE</li> <li>SAMPLE</li> </ul> </div> <!-- 内容 --> <div class="contents"> <p>ここに内容を書く</p> </div> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
順番が違います。 HTMLでは、その文書全体を、それを構成する要素に分解して、その構成要素一つ一つをマークアップしていきます。デザインは一切(というくらい)考えたらダメです。今から始められるのでしたら、この点だけは徹底的に理解してください。HTML5では、とても厳しくなります。 ＞このように書きたいということになります。 そのためにHTMLを書いてはダメ!!!それはHTMLの仕事じゃない!! 通常の文書は最低限 <body> <div class="header"> <h1>ページの見出し</h1> <p>このサイトは・・・</p> </div> <div class="section"> <h2>本文記事見出し</h2> <p>記事・・</p> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> のような構造はしているはずです。HTML5だと <body> <header> <h1>ページの見出し</h1> <p>このサイトは・・・</p> </header> <section> <h2>本文記事見出し</h2> <p>記事・・</p> </section> <footer> <h2>文書情報</h2> </footer> </body> となります。 <ul> <div class="menu"><li>項目1</li></div> ・・・【中略】・・・ <div class="menu"><li>SAMPLE</li></div> </ul> はナビゲーションですから、 <div class="nav"> <ul> <li>項目1</li> <li>項目2</li> <li>SAMPLE</li> <li>SAMPLE</li> <li>SAMPLE</li> </ul> </div> とマークアップして、それを本文中にでも入れておきます。 ※ulの中には<li>以外は存在してはなりません。 ※BRは、通常は使わない要素です。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HTML5だと <nav> <ul> <li>項目1</li> <li>項目2</li> <li>SAMPLE</li> <li>SAMPLE</li> <li>SAMPLE</li> </ul> </nav> でよいのです。 ★あくまで、HTMLは、文書を構成している要素(エレメント)をマークアップするものです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★その文書構造を元にスタイルを指定していきます。たとえば本文中のナビゲーションでしたら div.section div.nav{} という指定方法になります。デザインのためにclass名をつけるのではありません。また、いちいち書かなくても、 div.section div.nav{}で、本文(section)内の<div class="nav">だとわかります。!!! 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より ★下記はHTML4.01strictです。今から始めるなら、HTML4.01strictから始めましょう。Transitionalではありません。HTML5はstrictしかありません。 ★書いたら、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックする。 ★スタイルシートはその後 ★HTML5 における HTML4 からの変更点の「新しい要素」 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を読むとclass名にどんなものが良いかわかります。 ★下のソースでタブは＿に置換してあるので戻すこと。 文書構造とプレゼンテーションを分けなければならない意味がよくわかると思います。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} p{margin:0 1em;text-indent:1em;line-height:1.4em;} h1,h2,h3{margin:0;line-height:1.4em;text-align:center;} body{background-image:url(./images/background/stone.jpg);} div.header, div.section, div.footer{ ＿width:80%; ＿min-width:480px;max-width:900px; ＿margin:0 auto; ＿border:solid 1px gray; } div.section{min-height:400px;position:relative;} div.section>*{margin-left:200px;} div.nav{ position:absolute; top:0; width:200px; margin-left:0; height:100%; background-color:white; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページの見出し</h1> ＿＿<p>このサイトは・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文記事見出し</h2> ＿＿<p>記事・・</p> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>項目1</li> ＿＿＿＿<li>項目2</li> ＿＿＿＿<li>SAMPLE</li> ＿＿＿＿<li>SAMPLE</li> ＿＿＿＿<li>SAMPLE</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
- colorwallhg
- ベストアンサー率0% (0/2)
floatをcssでかますか、 htmlだとframeやtableなんかを使うことになるのでしょうか。
