CSSのレイアウトについてのアドバイスをお願い出来ましたらと思います。m(_ _)m 添付画像の様なレイアウトがしたく、いろいろやってみましたが、何時間かかっても上手く行かなくて。。 A(画像）、（B ○の部分がテキストでリスト）、（C ○の部分が画像を三段重ね）、D（画像）という様に、float: left;で配置していき、 Bの○のテキストはリストで左頭揃えにしながら、 Bのブロックごとは右寄せで右にパディングで余白を取る。 Cの○の画像は左頭揃えにしながら三段重ね、 Cのブロックごとは左寄せでパディングはゼロにしたいという部分で上手く行かずに悩んでいます。。元から書かれた物を直すという作業の上で、戸惑っています。自分では下記の様にやってみて途中やり直しを繰り返しして混乱して頭が止まってしまいました。。よろしければ、アドバイスの方をお願い致します。m(_ _)m ☆ HTML テキストテキストテキスト Dの部分は省略。 ☆CSS #header { margin: 0 10px 0; padding: 28px 0 0; width: 950px; height: 102px; position: relative; line-height: 1; } #header h1{ float: left; } #header .g_navi{ margin: 8px 0 0; padding: 0 32px 0 0; float: left; width: 270px; height: 70px; text-align: right; } #header .s_navi{ margin: 8px 0 0; padding: 0 0 0; float: left; width: 238px; height: 70px; line-height: 1; font-size: 1px; } #header .s_navi li{ margin: 0 0 10px; } ------- 以下D部分は略－－－－－－－－－

助けてください。。　CSSのレイアウトについて。

解決済

質問者：daisy8888
質問日時：2013/06/11 01:42
回答数：2件

CSSのレイアウトについてのアドバイスをお願い出来ましたらと
思います。m(_ _)m

添付画像の様なレイアウトがしたく、いろいろやってみましたが、
何時間かかっても上手く行かなくて。。

A(画像）、（B ○の部分がテキストでリスト）、（C ○の部分が
画像を三段重ね）、D（画像）という様に、float: left;で配置して
いき、

Bの○のテキストはリストで左頭揃えにしながら、
Bのブロックごとは右寄せで右にパディングで余白を取る。

Cの○の画像は左頭揃えにしながら三段重ね、
Cのブロックごとは左寄せでパディングはゼロにしたいと
いう部分で上手く行かずに悩んでいます。。

元から書かれた物を直すという作業の上で、
戸惑っています。

自分では下記の様にやってみて途中やり直しを繰り返し
して混乱して頭が止まってしまいました。。
よろしければ、アドバイスの方をお願い致します。m(_ _)m

☆　HTML

<div id="header">

<h1><img src="hogehoge.gif" alt="" width="175" height="64" /></h1>


<p class="g_navi"><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br>
<a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br>
<a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a>
</p>
<ul class="s_navi">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>


Dの部分は省略。

</div>

☆CSS

#header {
margin: 0 10px 0;
padding: 28px 0 0;
width: 950px;
height: 102px;
position: relative;
line-height: 1;
}

#header h1{
float: left;
}

#header .g_navi{
margin: 8px 0 0;
padding: 0 32px 0 0;
float: left;
width: 270px;
height: 70px;
text-align: right;
}

#header .s_navi{
margin: 8px 0 0;
padding: 0 0 0;
float: left;
width: 238px;
height: 70px;
line-height: 1;
font-size: 1px;
}

#header .s_navi li{
margin: 0 0 10px;
}

-------　以下D部分は略　－－－－－－－－－

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/06/12 11:24

文書構造で不明な点

・ID/class名からサブメニューだと思いますが、その親メニューはどれです？
　<ol>
　　<li>
　　　<ol>
　　　　<li></li>
　　　　<li></li>
　　　</ol>
　　</li>
　</ol>
なはずですが？？

★floatは、floatは出現した位置が基準になるなど、色々面倒くさくなるので使わないほうが良いでしょう。
★headerでメインナ情報はナビゲーションだと思いますので、それを基準にしたブロックとして考える。
★サイズは、標準ではpadding辺の内側ですが、IEが互換モードで動作するとboreder辺までがサイズになります。標準モードで起動するように<DOCTYPE>を記述します。

・さすがにXHTMLはここ数年使ってませんので、HTML4.01strict+CSS2.1のサンプルです。
・サイズはリキッド(480px～1000px)にしてあります。スマホからワイドディスプレイまでOK
・class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )とその用途を参考にしてあります。<div class="header"></div>⇒<header></header>のように、簡単にHTMLに変更できるように。

(注意)タブは＿に置換してあります。

<!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 rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1><img src="./images/title.gif" alt="" width="175" height="64"></h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="@"><img src="./images/hoge1.gif" alt="" width="42" height="10"></a></li>
＿＿＿＿<li><a href="@"><img src="./images/hoge2.gif" alt="" width="42" height="10"></a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="">テキスト</a></li>
＿＿＿＿＿＿<li><a href="">テキスト</a></li>
＿＿＿＿＿＿<li><a href="">テキスト</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="@"><img src="./images/hoge3.gif" alt="" width="42" height="10"></a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="">テキスト</a></li>
＿＿＿＿＿＿<li><a href="">テキスト</a></li>
＿＿＿＿＿＿<li><a href="">テキスト</a></li>
＿＿＿＿＿＿<li><a href="">テキスト</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="aside">
＿＿＿<p>Dの部分は省略</p>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>・・・</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

とても参考になりました。m(_ _)m

どちらさまもベストアンサーとさせてください。

通報する

お礼日時：2013/06/12 20:26

No.1

回答者： weakweak
回答日時：2013/06/11 16:21

HTML/CSS素人ですが。

。。
わかりにくくなるかと思ったので、フレームのみ作りました。
各サイズやマージンなどはご自身で指定していっていただければと思います。
画像を三段にしているところも意味合い的にリストの方がいいと思ったのでリストにしてます。
imgのdisplayをblockにしたので、ulを使わず、単に<img~ /><img~ />...と並べても表示は同じになります。
--HTML---------------
<div id="header">
<h1><img src="hogehoge.gif" alt="" width="175" height="64" title="A" /></h1>
<div class="g_navi"><ul>
<li>Bテキスト</li>
<li>Bテキスト</li>
<li>Bテキスト</li>
</ul></div>
<div class="s_navi"><ul>
<li><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a></li>
<li><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a></li>
<li><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a></li>
</ul></div>
<div class="D">D部分</div>
</div>

--CSS-----------------
/* リセットCSS */
p, h1,ul {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
img {
vertical-align: text-bottom;　/*画像の下の隙間を消す*/
}
/* リセットCSSここまで */

#header {
overflow: hidden; /* float要素の高さを、親要素に認識させる */
background: cornflowerblue;
}
h1 {
float: left;
background: lightpink;
}
.g_navi {
float: left;
background: khaki;
}
.s_navi {
float: left;
background: palegreen;
}
.s_navi img {
display: block;　/* 小さい画像をリストにした際の隙間を削除 */
}
.D {
float: left;
}