みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

以下のソース(市販の本のもの)について質問です。

このソースをブラウザ表示して頂きたいのですが、ヘッダーの上のメニューはdisplayのinlineが使われているのですが、これをfloatのメニューに変えることはできますか?私が試しにfloatでやってみると、回り込みが起きてしまいます。clear both等も試しましたが・・・

シュチエーションとしては、最初はヘッダーの下にfloatを使った横並びのメニューをヘッダーの上のメニューに変更するというものです。画像は表示されませんので、悪しからずご了承ください。

- - - - - - - - - - - - - - - - - - - - - - - -ソ ー ス - - - - - - - - - - - - - - - - - - - - - -
<html>
<head>
<title>SAMPLE</title>
<style type="text/css">

a{color: #017acd}

/* コンテナ */
div#container{width: 760px;
margin-left: auto;
margin-right: auto
}

/* ヘッダー */
div#header{background-color: #017acd;
background-image: url(sky.jpg);
padding: 28px 20px 100px;
margin-bottom: 30px}

div#header h1{margin: 0}

div#header p{color: #ffffff;
font-size: 0.75em;
margin: 0}

/* メニュー */
ul#menu{font-size: 0.75em;
margin-left: 0;
padding-left: 0;
margin-bottom: 7px;
text-align: right;}

ul#menu li{list-style-type: none;
display: inline;
}

ul#menu li a{text-decoration: none;
border-left: solid 1px #005087;
padding: 3px 10px}

ul#menu li.menulast a{border-right: solid 1px #005087}


/* コンテンツ */
div#content{width: 564px;
margin-left: auto;
margin-right: auto}

div#content h2{background-color: #014471;
background-image: url(bar-darkblue.png);
background-repeat: no-repeat;
font-size: 1em;
color: #ffffff;
line-height: 45px;
padding-left: 12px;
margin-bottom: 0}

div#content h3{background-color: #ffffff;
background-image: url(maru-skyblue.png);
background-repeat: no-repeat;
background-position: 0px 2px;
font-size: 0.875em;
line-height: 22px;
padding-left: 26px;
margin-top: 30px;
margin-bottom: 0;
margin-left: 12px;
margin-right: 12px}

div#content p{font-size: 0.75em;
line-height: 1.6;
margin-top: 10px;
margin-left: 12px;
margin-right: 12px}


/* フッター */
div#footer{background-image: url(line-blue.png);
background-repeat: repeat-x;
margin-top: 25px;
padding-top: 8px}

address{font-size: 0.75em;
font-style: normal;
text-align: center}


</style>
</head>
<body>

<!-- コンテナ -->
<div id="container">

<!-- メニュー -->
<ul id="menu">
<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 id="header">
<h1><img src="logo.gif" alt="Green Leaf" /></h1>
<p>生活を楽しくする情報をもっと身近にお届けします</p>
</div>


<!-- コンテンツ -->
<div id="content">

<h2>サービス案内</h2>

<p>Green Leafは生活を楽しくするサービスを、もっと身近にお届けするために活動している企業グループです。情報サイトやショッピングサイトを通じてさまざまなサービスの提供を行い、みなさまをサポートいたします。</p>

<h3>情報サイト「Green Leaf」</h3>

<p>情報サイト「Green Leaf」では、「生活を楽しくするサービスをもっと身近に」をテーマに、日常生活で役に立つサービスの情報をお届けします。生活を楽しくするためには、「衣」「食」「住」を満たすことが大切です。そのために必要な情報を充実させました。最新のファッション事情から洋服のリサイクル情報、安全でおいしい食材にレシピ、それを味わえるレストラン、住まいを快適にアレンジするテクニック、職人に支えられた伝統の技などなど… 楽しみながら活用していただければと思います。</p>

<p>また、「遊」を充実させる情報として、関東、関西圏を中心としたレジャーや癒しのスポットを紹介します。名所・旧跡に温泉、日帰り旅行からちょっとした贅沢な旅まで取り揃えていく予定です。</p>


<h3>ショッピングサイト「Green Shop」</h3>

<p>ショッピングサイト「Green Shop」では、情報サイト「Green Leaf」で紹介した "いいもの" や "おもしろいもの" を購入していただけるようにしています。</p>

<p>そのほかにも、ショップ内のToy Boxコーナーではヨーロッパやアフリカの遊び心にあふれる玩具を、Candy Boxコーナーではカラフルでおいしいお菓子をたくさん扱っています。また、地域ごとの地場産野菜の宅配も承っておりますので、ぜひご利用ください。</p>

</div>


<!-- フッター -->
<div id="footer">
<address>Copyright (C) Green Leaf, All rights reserved.</address>
</div>

</div>

</body>
</html>

投稿日時 - 2011-12-16 19:53:16

QNo.7193469

暇なときに回答ください

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

随分と凝ったデザインにされているので手こずりましたが・・
・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%;
}

投稿日時 - 2011-12-17 10:54:52

お礼

ありがとうございました。前回のご回答と今回のご回答を使ってテラパッドでブラウザ表示したところ、ばっちりうまくいきました。回答者様は1951年生まれ(?)ということで、私の父より年上なんですね。ですが、Dreamweaverの画面を見て「Excelの勉強?」と言う父とはえらい違いです。

投稿日時 - 2011-12-17 18:36:17

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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もずっと簡単になります。そして、後で何をどうしたかわかるはず・・

投稿日時 - 2011-12-17 00:40:36

あなたにオススメの質問