- ベストアンサー
CSSレイアウトのアドバイスをお願いします！
- CSSのレイアウトについてのアドバイスをお願いします。添付画像のレイアウトがうまくいかず、困っています。
- Bのテキストを左頭揃えのリストにしたいですが、うまくいきません。また、Cの画像を三段重ねにしたいですが、パディングがうまくいかず悩んでいます。
- HTMLとCSSを書き直す作業で戸惑っています。途中でやり直しを繰り返し、混乱してしまいました。アドバイスをお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
文書構造で不明な点 ・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/html5-diff/#new-elements )とその用途を参考にしてあります。<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"> <!-- html,body{margin:0;padding:0;background-color:gray; } h1,h2,h3,h4,p{margin:0;line-height:1.6em;} div.header,div.section,div.footer{ width: 98%; margin:0 auto; min-width:480px;max-width:1000px; background-color:white; } div.header{ position: relative; background-color:yellow; } div.header h1,div.header div.aside{ position:absolute; width:18%; left:0;top:0; margin:0; } div.header div.aside{ right:0;left:auto; } div.header h1 img{ display:block; width:100%; height:auto; } div.header div.nav{ margin: 0 18%; width: 64%; min-height:90px; position:relative; background-color:fuchsia; } div.header div.nav ol,div.header div.nav li,div.header div.nav ul{ display:block;list-style:none; margin:0;padding:0; } div.header div.nav li a{margin:5px;} div.header div.nav ol li ul li{text-align:right;} div.header div.nav ol li ul{ position:absolute; top:0;right:0; height:100%; width:50%; } div.header div.nav ol li:hover{ background-color:lime; } div.header div.nav ol li+li ul{ z-index:-10; } div.header div.nav ol li:hover ul{ z-index:10; background-color:lime; } --> ＿</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>
その他の回答 (1)
- weakweak
- ベストアンサー率34% (350/1003)
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; }
お礼
ありがとうございます。 とても参考になりました。m(_ _)m どちらさまもベストアンサーとさせてください。
お礼
ありがとうございます。 とても参考になりました。m(_ _)m どちらさまもベストアンサーとさせてください。