- ベストアンサー
ヘッダーメニューの表示方法の変更について
- ヘッダーの上のメニューをfloatのメニューに変更する方法について質問です。回り込みが起きてしまい、うまく表示されません。
- メニューの表示方法を変更しても回り込みが起きず、うまく表示されない場合があります。floatのメニューに変更する方法について教えてください。
- ヘッダーの上のメニューをfloatで表示しようとしたが、回り込みが発生してしまいます。適切な方法を教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
随分と凝ったデザインにされているので手こずりましたが・・ ・HTMLが文書構造を示すものでしたら、スタイルシートで自由にデザインできます。ナビゲーションリンクを上に置こうが左右に置こうが、途中に置こうが、fixedで固定しようがHTMLをいじる必要はありません。 ・また、アンカーの標的として機能するIDと、デザインのためのclass名を分けることで、一つのスタイルシートをすべてのページで共有できます。containerとかcontetとか、酷いのになるとwrapperとかのclass名は文書構造上意味がありません。HTML5になったときどうするのでしょう。 →3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ★あまり細かい部分はいじってません。後は適当に修正してください。わかりやすいと思います。 /* タイプセレクタ・グローバル */ a{color: #017acd} p{text-indent:1em;} /* 表示区画 */ div.header,div.section,div.footer{ ＿width:760px;margin:0 auto;padding:0; } /* ヘッダ */ div.header{ ＿margin-top:2em; ＿background: #017acd url(sky.jpg);height:100px; } div.header h1,div.header p{ ＿margin:0 20px; } div.header h1{margin:0;} div.header p{color:white;font-size:0.75em;} /* 本文 */ div.section{color:black;} div.section h2,div.section p,div.section div.section{ ＿width: 564px;margin:0 auto; } div.section div.section p{margin:0;} div.section h2{ ＿background: #014471 url(bar-darkblue.png) no-repeat; ＿font-size: 1em; ＿color: #ffffff; ＿line-height: 45px; ＿padding-left: 12px; } div.section div.section h3{ ＿background: #ffffff url(maru-skyblue.png) no-repeat 0px 2px; ＿font-size: 0.875em; ＿line-height: 22px; ＿padding-left: 26px; ＿margin: 30px 12px 0 12px; } div.section div.section p{ ＿font-size: 0.75em; ＿line-height: 2em;/* 単位必要 */ ＿margin: 0 12px; } /* フッタ */ div.footer{ ＿background: url(line-blue.png) repeat-x; ＿margin-top: 25px; ＿padding-top: 8px } address{ ＿font-size: 0.75em; ＿font-style: normal; ＿text-align: center } /* ナビゲーション */ div.footer div.nav{ ＿position:absolute; ＿top:0;left:0; ＿width:100%; ＿line-height:2em; } div.footer div.nav ul,div.footer div.nav ul li{ ＿display:block;list-style:none;margin:0;padding:0;height:2em; } div.footer div.nav ul{ ＿width:760px;margin:0 auto;font-size: 0.75em;border-left:solid 1px #005087 ; } div.footer div.nav ul li{ ＿width:10em;float:left;text-align:center;padding: 0 10px;border-right:solid 1px #005087; } div.footer div.nav ul li a{ ＿display:block;text-decoration:none;width:100%;height:100%; }
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML部分はご自身で書かれましたね。headerの後に表示するため？ HTMLは文書構造を記述するもので、デザインを考えてHTMLを書いてしまうと ・文書構造がわからなくなります。 ・スタイルを変更するとき、HTMLまで書き直さなければならなくなり、スタイルシートの「スタイルシートを変更することでデザインを一挙に変更できる」という特性を失います。 class名は、文書構造を補完するために適切なものをつけましょう。HTML5で導入される要素名が参考になるでしょう。HTML5では見出しはセクションと密接に対応しています。これも参考になるでしょう。 ・ナビゲーションリンクは、この文書の内容以外ですから、header内でないほうが良いでしょう。footerに入れるか、それ以外。 headerに入れるときは、本文(section)が長いときの目次でしょうね。 ・headerやfooter、sectionはHTML5ではセクショニングコンテントとなるブロック要素ですから、idよりclass名とするほうが良いでしょう。そのまま要素となります。 <div class="header">→<header> <div class="section">→<section> (注)sectionは見出し<h1>～<h6>を原則としてひとつ持ちます。階層が増えるときは<section>を入れ子にする。 <div class="nav">→<nav> [HTML]は下記程度で良いです。こうすると、将来ナビゲーションをどこに移動することも、横並びにすることも、たてならびにすることも自由です。 ＿<body> ＿<div class="header" id="Top"> ＿＿<h1><img src="logo.gif" alt="Green Leaf" /></h1> ＿＿<p>生活を楽しくする情報をもっと身近にお届けします</p> ＿</div> ＿<div class="section" id="container"> ＿＿<h2>サービス案内</h2> ＿＿<p>Green Leafは生活を楽しくするサービスを、もっと身近にお届けするために活動している企業グループです。情報サイトやショッピングサイトを通じてさまざまなサービスの提供を行い、みなさまをサポートいたします。</p> ＿＿<div class="section"> ＿＿＿<h3>情報サイト「Green Leaf」</h3> ＿＿＿<p>情報サイト「Green Leaf」では、「生活を楽しくするサービスをもっと身近に」をテーマに、日常生活で役に立つサービスの情報をお届けします。生活を楽しくするためには、「衣」「食」「住」を満たすことが大切です。そのために必要な情報を充実させました。最新のファッション事情から洋服のリサイクル情報、安全でおいしい食材にレシピ、それを味わえるレストラン、住まいを快適にアレンジするテクニック、職人に支えられた伝統の技などなど… 楽しみながら活用していただければと思います。</p> ＿＿＿<p>また、「遊」を充実させる情報として、関東、関西圏を中心としたレジャーや癒しのスポットを紹介します。名所・旧跡に温泉、日帰り旅行からちょっとした贅沢な旅まで取り揃えていく予定です。</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>ショッピングサイト「Green Shop」</h3> ＿＿＿<p>ショッピングサイト「Green Shop」では、情報サイト「Green Leaf」で紹介した "いいもの" や "おもしろいもの" を購入していただけるようにしています。</p> ＿＿＿<p>そのほかにも、ショップ内のToy Boxコーナーではヨーロッパやアフリカの遊び心にあふれる玩具を、Candy Boxコーナーではカラフルでおいしいお菓子をたくさん扱っています。また、地域ごとの地場産野菜の宅配も承っておりますので、ぜひご利用ください。</p> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<div class="nav"> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="link.html">トップページ</a></li> ＿＿＿＿＿<li><a href="link.html">会社情報</a></li> ＿＿＿＿＿<li><a href="link.html">サービス案内</a></li> ＿＿＿＿＿<li><a href="link.html">お問い合わせ</a></li> ＿＿＿＿＿<li class="menulast"><a href="link.html">ブログ</a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<address>Copyright (C) Green Leaf, All rights reserved.</address> ＿＿</div> ＿</body> 【スタイルシート】 今日は遅いので明日の夜にでも・・。 HTMLもCSSもずっと簡単になります。そして、後で何をどうしたかわかるはず・・
お礼
ありがとうございました。前回のご回答と今回のご回答を使ってテラパッドでブラウザ表示したところ、ばっちりうまくいきました。回答者様は1951年生まれ(？)ということで、私の父より年上なんですね。ですが、Dreamweaverの画面を見て「Excelの勉強？」と言う父とはえらい違いです。