- 締切済み
可変すると、画像は重なり行も増えてしまいます
初めまして。 リキッドデザインについて、どうぞ宜しくお願い致します。 画像をご覧いただきながら、読んでいただけますと幸いです＞＜ 通常、画像(1)のように表示し、可変した際には(2)のようにしたいと思っているのですが、 何故か(3)のように―― 画面を小さくするに連れ、【B】は2行に崩れ、その影響で下のimg［1］～［10］が重なり合ってしまいます。 何か決定的な間違い等があるのでしょうか？ お分かりの方がいらっしゃいましたら、是非ともご指南下さいませ！ どうぞ宜しくお願い致します。 /* CSS設定 */ body { margin: 0 auto 0; padding: 0; } .bg01 { width: 100%; height: 30px; background-color: #C96; display: inline-block; clear: both; } .A { width: 400px; float: left; } .B { width: 400px; float: right; } .bg02 { width: 100%; height: 30px; background-color: #9cf; text-align: center; display: inline-block; } .bg02 ul { width: 80%; margin: 5px auto 0; text-align: center; } .bg02 ul li { list-style-type:none; width: 8%; border: solid #09C 1px; float:left; } <!-- HTMLソース --> <div class="bg01"> <div class="A">ああああああああああああああああああああ</div> <div class="B">いいいいいいいいいいいいいいいいいいいい</div> </div> <div class="bg02"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div>
- chimin-chimin
- お礼率87% (27/31)
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
色々使えそうなので、ちょっと遊んでみた <!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" media="screen"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:80%;min-width:480px;max-width:980px;margin:0 auto;} div.header{background-color: #C96;height:30px;position:relative;height:60px;} div.header h1,div.header p,div.header div.nav{ ＿text-align:center;line-height:30px;margin:0; ＿position:absolute; ＿font-size:14px; } div.header h1 a,div.header p a,div.header div.nav ol li a{text-decoration:none;} div.header h1 a,div.header p a{display:block;width:100%;height:100%;background-color:rgb(128,64,0);color:yellow;} div.header h1 a:hover,div.header p a:hover{color:orange;} div.header h1,div.header p{min-width:20em;top:0;} div.header h1{left:0;} div.header p{right:0;} div.header div.nav{top:30px;width:100%;background-color:aqua;} div.header div.nav ol,div.header div.nav ol li{display:block;list-style-type:none;margin:0;padding:0;} div.header div.nav ol li{width:9%;display:inline-block;position:relative;} div.header div.nav ol li a{display:block;border:solid 1px gray;background-color:rgb(220,220,255);margin:2px;} div.header div.nav ol li a:hover{border-color:red;background-color:rgb(60,60,255);color:yellow;} div.header div.nav ol li ol{position:absolute;top:32px;width:100%;display:none;} div.header div.nav ol li ol li{width:95%;} div.header div.nav ol li ol li a{margin:0;} div.header div.nav ol li:hover ol{display:block;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><a href="/">会社名</a></h1> ＿＿<p><a href="./contactUs">なんたらかんたら</a></p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./1">1</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="./1/1">1-1</a></li> ＿＿＿＿＿＿<li><a href="./1/2">1-2</a></li> ＿＿＿＿＿＿<li><a href="./1/3">1-3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="./2">2</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="./2/1">2-1</a></li> ＿＿＿＿＿＿<li><a href="./2/2">2-2</a></li> ＿＿＿＿＿＿<li><a href="./2/3">2-3</a></li> ＿＿＿＿＿＿<li><a href="./2/4">2-4</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="./3">3</a></li> ＿＿＿＿<li><a href="./4">4</a></li> ＿＿＿＿<li><a href="./5">5</a></li> ＿＿＿＿<li><a href="./6">6</a></li> ＿＿＿＿<li><a href="./7">7</a></li> ＿＿＿＿<li><a href="./8">8</a></li> ＿＿＿＿<li><a href="./9">9</a></li> ＿＿＿＿<li><a href="./10">10</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLに文書構造以外を記述したらダメです。 ・文書構造(文脈のこと)とプレゼンテーションの分離が大原則です。 わかり易く言うと、HTMLがなくても、スタイルシートが書ける様に・・ ★リキッドデザインで、width:400pxはありえないでしょう。この時点で放棄している。 まあ、ユーザーエージェントがscreen(PC用の一般的なブラウザ)を対象にするとして 「あああ・・」「いいい・・・」がページタイトルや説明で、<li></li>がナビゲーションだとして、 <body> <div class="heade"> <h1><a href="/">会社名</a></h1> <p><a href="./contactUs">なんたらかんたら</a> <div class="nav"> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> </div> <div class="section"> </div> <div class="footer"> </div> </body> だとして、スタイルシートは /* ヘッダのサイズをウィンドウ幅に合わせる。 */ html,body{margin:0;padding:0;} /* header,section,footerのサイズの最小最大幅を指定しておく */ div.header,div.section,div.footer{width:80%;min-width:480px;max-width:900px;margin:0 auto;} /* ヘッダー内の見出しと説明を左右上部に */ div.header h1,div.header p{font-size:20px;line-height:30px;margin:0;position:absolute;top:0;} div.header h1{left:0;} div.header p{right:0;} /* header内のナビゲーションリストの配置 */ div.header div.nav ol,div.header div.nav ol li{display:block;list-style-type:none;margin:0;padding:0;} div.header div.nav ol li{width:10%;display:inline-block;} [ごく簡単な例］ ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みの HTML4.01strict+CSS2.1 [ウエブ標準]です。 ※screenのみ(スマホ含む)対応・・印刷や携帯電話は素のまま・・印刷プレビューで確認 ※ワイドスクリーンでは900pxまで、最小はスマホの縦画面までのリキッドデザイン ※タブは＿に置換してあるので戻すこと!! <!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" media="screen"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:80%;min-width:480px;max-width:980px;margin:0 auto;} div.header{background-color: #C96;height:30px;position:relative;height:60px;} div.header h1,div.header p,div.header div.nav{ ＿text-align:center;line-height:30px;margin:0; ＿position:absolute; ＿font-size:12px; } div.header h1,div.header p{ ＿min-width:20em;top:0;background-color:rgb(128,64,0); } div.header h1{left:0;} div.header p{right:0;} div.header div.nav{top:30px;width:100%;background-color:aqua;} div.header div.nav ol,div.header div.nav ol li{display:block;list-style-type:none;margin:0;padding:0;} div.header div.nav ol li{width:8%;display:inline-block;} div.header div.nav ol li a{display:block;border:solid 1px gray;background-color:rgb(220,220,255)} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><a href="/">会社名</a></h1> ＿＿<p><a href="./contactUs">なんたらかんたら</a></p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./1">1</a></li> ＿＿＿＿<li><a href="./2">2</a></li> ＿＿＿＿<li><a href="./3">3</a></li> ＿＿＿＿<li><a href="./4">4</a></li> ＿＿＿＿<li><a href="./5">5</a></li> ＿＿＿＿<li><a href="./6">6</a></li> ＿＿＿＿<li><a href="./7">7</a></li> ＿＿＿＿<li><a href="./8">8</a></li> ＿＿＿＿<li><a href="./9">9</a></li> ＿＿＿＿<li><a href="./10">10</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
- DrFell
- ベストアンサー率55% (305/551)
可変した際って、用語の認識がずれていますよ。理解度が用語に反映されるのでしょうが……。 小さな画面で見た方には、可変しなくても、崩れて見えてます。(2)にした場合は、隠れてみない人も居られます。 a + b = 800px なので、aやbの親は800ｐｘ以上ないと、floatの場合は落っこちます。 なので親である bg01 の幅指定を少し追加します。 今 width:100% ですがそれは800px以上あるとき。無い時用に、最低、800pxは確保する指定を入れます。 width:100%; min-width:800px; これで要望のことはできると思います。ただし、古すぎるcss2を解さないブラウザには対応できません。
補足
質問者です。 用語の使い方を間違えてすみません。 できるだけタイトルに詳細を入れようと思ったのですが、 「可変『デザインに』すると」と入れると、タイトル文字制限に引っ掛かので； 意味は通じるかと思って略してしまいました。 ありがとうございます。
お礼
詳細に回答を下さりありがとうございます。 上部左右に配置しているものが、実際は「あああああ」「いいいいい」だけではなく、 listなども含んだブロック＋インラインの組合わせだったので、<h1><p>ではなく一括りにボックス（div）で表記しました。position:absoluteを使わずにいきたかったので、floatを使いつつ下段に影響を及ぼさないような方法はないものかと思い質問致しました。 でも、書いていただいたソースで実験させていただいたのですが、 position:relativeやposition:absoluteを使うのが結局いちばん早いのかも知れませんね＾＾； ※わたしの説明が足りなかったのかも知れませんが、 今回は、（SEOや優先度なども含めた）文書構造的なweb標準の話ではなく、 あくまでも、質問時に記載した部分の「レイアウトが崩れないようにする為」にいちばんシンプルなプロパティや数値設定に関してお伺いしていました。 ありがとうございました。