- ベストアンサー
ホームページ製作中で3カラムの体裁崩れに悩んでいます
- 初心者が3カラムのホームページで画像を挿入し、テキストの回りこみをすると体裁が崩れます。解決方法を教えてください。
- SCCの設定に問題がある可能性があります。具体的には、img要素に対するfloat:leftの設定が原因となっている可能性が考えられます。
- HTMLのコードも確認してみてください。特に、特定のCSSクラスに対する設定が問題を引き起こしている可能性があります。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＞やっとSCCとHTMLをコピーすれば良い事が分かり、無事作動を確認しました。 了解です。ただHTMLの <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt … はシステムの都合で、書き換わっていますから <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "httｐ://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ★httｐ:はhttp:と直すこと・・↑↑↑ ^^^^^^^^^^^^^ ですね。 No.6のソースを、CSSなしでよく読んでみてください。難しいところや無駄なものはありません。class名のheader,footer,section,navは、HTMLで良く使われるclass名です。(box_a)なんてのは使わないものです。--オーサリングツールのせいでしょうが-- HTML4(XHTML1.0,XTHML1.1も)では文書構造を示す要素(を示すタグ)が、決定的に不足していたため、文書構造に従ったマークアップが普及しなかった反省から、次期バージョンのHTML5(勧告予定は2022年)で導入される要素名でもあります。 annotation[=注釈,脚注]は、私が良く使うもの。 そのうえで、HTMLだけをしっかり読み解いてください。文書構造に従ったマークアップの意味をしっかり理解してください。HTML4.01の仕様書を合わせて読んでおくとよいです。 そのうえで、CSSを読んでください。今回の質問はfloatの制御方法ですが、floatの本来の使い方も理解できると思います。古いIEのためにfloatを使うブロック配置もありますが、将来は無用になる方法です。 あなたが、最短ルートで頂上にたどり着けるよう、私の思いつく限りのHTMLでありCSSです。もっぱら文書構造に従ったHTMLと、そのプレゼンテーション(表現)を指示するCSSのすみわけをしっかり理解してください。 私も、長い道のりを脇道にそれながら十数年歩んできました。
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
４種類、永続的(固定)スタイルシートを含めて５種類です。印刷用は共用。 ブラウザの「表示メニュー」→「スタイル(シート)」で切り替える。 [CSS] style.css @charset "Shift_JIS"; html,body{margin:0;padding:0;line-height:1.4em;} p{text-indent:1em;margin:0;} h1,h2{text-align:center;} div.section hr{clear:both;visibility:hidden;} div.section div.section h2{margin-left:1em;text-align:left;} [CSS] styleA.css @charset "Shift_JIS"; /* 外枠の設定 */ div.header, div.footer, div.section{ width:100%;max-width:900px;margin:0 auto;position:relative;clear:both; } div.section div.section,div.section h2{ position:static;width:68%;margin-left:11%; } /* 本文の設定 */ div.section ol li{ clear:right; } div.section ol li#kansei{float:none;list-style:none;display:block;} img.figure{padding:5px;float:right;width:260px;} /* 注釈の設定 */ div.section div.contentTable,div.section div.nav{ position:absolute;height:100%;top:0; background-color:silver; font-size:0.9em; } div.section div.contentTable{width:10%;left:0;} div.section div.nav{width:20%;right:0;} div.annotation div ul{ display:block;margin:0.5em;padding:0;list-style:none; } div.annotation div ul li{margin:0 1em;} [CSS] styleB.css @charset "Shift_JIS"; /* 外枠の設定 */ div.header, div.footer, div.section{ width:100%;max-width:900px;margin:0 auto;position:relative;clear:both; } div.section div.section,div.section h2{ position:static;width:78%;margin-left:21%; } /* 本文の設定 */ div.section ol li{ clear:right; } img.figure{padding:5px;float:right;width:260px;} #kansei{display:block;float:none;clear:both;width:100%;border:none;text-align:center;} #kansei img.figure{width:auto;float:none;} /* 注釈の設定 */ div.section div.annotation{ position:absolute;height:100%;top:0; background-color:silver; font-size:0.9em; } div.section div.anotation{width:20%;left:0;} div.annotation div ul{ display:block;margin:0.5em;padding:0;list-style:none; } div.annotation div ul li{margin:0 1em;} [CSS] styleC.css @charset "Shift_JIS"; /* 外枠の設定 */ div.header, div.footer, div.section{ width:100%;max-width:900px;margin:0 auto;position:relative;clear:both; } div.section ol,div.section ol li{display:block;list-style:none;margin:0;padding:0;text-indent:1em;} div.section ol li{page-break-inside:avoid;width:280px;float:left;height:390px;margin:0 5px 5px 0;border:solid gray 1px;border-width:1px 3px 3px 1px;} div.section ol li p{margin:1ex 1em;} #kansei{float:none;clear:both;width:100%;border:none;text-align:center;} div.annotation{clear:both;} div.contentTable{display:none;} div.annotation div.nav ul{display:block;list-style:none;text-align:center;} div.annotation div.nav ul li{display:inline;margin:0 10px;} [CSS} styleD.css @charset "Shift_JIS"; /* 外枠の設定 */ div.header, div.footer, div.section{ width:100%;max-width:900px;margin:0 auto;position:relative;clear:both; margin-top:60px; } div.section div.section,div.section h2{ position:static;width:78%;margin-left:21%; } /* 本文の設定 */ div.section ol li{ clear:right; } img.figure{padding:5px;float:right;width:260px;} #kansei{display:block;float:none;clear:both;width:100%;border:none;text-align:center;} #kansei img.figure{width:auto;float:none;} /* 注釈の設定 */ div.annotation div ul{ display:block;margin:0.5em;padding:0;list-style:none; } div.section div.contentTable{ position:absolute;height:100%;top:0; background-color:silver; font-size:0.9em; width:20%;left:0; } div.annotation div.contentTable ul li{margin:0 1em;} div.annotation div.nav ul{margin:0;position:absolute;top:-50px;width:80%;padding-left:10%;} div.annotation div.nav ul li{display:block;line-height:40px;width:28%;height:40px;float:left;text-align:center;border:solid red 1px;} div.annotation div.nav ul li a{display:block;text-decoration:none;width:100%;height:100%;} div.annotation div.nav ul li a:hover{background-color:yellow;}
お礼
大変お待たせしました、特別なサービス有り難うございます。 私は、なにぶん初心者ですので最初何が書かれているか分からなくて、やっとSCCとHTMLをコピーすれば良い事が分かり、無事作動を確認しました。その結果現在悪戦苦闘中ですもう暫くお待ちください。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どうも週明けまでかかりそうなので・・別のHTMLを書いておきました。基本的に「5カラムでの写真の文字の回りこみに付いて質問です。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q6889908.html )」と同じものです。HTMLは示されたものを、根本的に書き換えています。 普通はここまでサービスしない(仕事の糧ですから)・・しっかり読んで理解してください。 HTMLは文書構造をマークアップするもので、HTMLを作成する時点ではデザインは考えない。(実際には考えますが、文書構造もこうなるはず--と考える)出来上がったHTMLは、後日、誰(人も機械も)が見ても文書構造がわかるように。 そしてAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )などでしっかりチェックすること ★スタイルシートは４種類用意してあります。 [HTML] <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head lang="ja" xml:lang="ja"> ＿<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> ＿<meta http-equiv="content-style-type" content="text/css" /> ＿<title>floatの使い方</title> ＿<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> ＿<link rel="stylesheet" href="styleA.css" type="text/css" media="screen" title="標準" /> ＿<link rel="Alternate stylesheet" href="styleB.css" media="screen" type="text/css" title="狭いウィンドウ用" /> ＿<link rel="Alternate stylesheet" href="styleC.css" media="screen,print" type="text/css" title="印刷および、一覧用" /> ＿<link rel="Alternate stylesheet" href="styleD.css" media="screen" type="text/css" title="狭いウィンドウ・トップメニュー" /> ＿<link rel="stylesheet" href="styleC.css" media="print" type="text/css" /> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" /> ＿<link rel="index" href="../index.html" /> </head> <body> ＿<div class="header"> ＿＿<h1>floatの使い方</h1> ＿＿<div class="abstruct"> ＿＿＿<p> ＿＿＿＿floatは便利そうですが、本来は[図]の周囲に長い文章を回りこませるためのもので、２コマや３コマ配置のコマ配置に使うと、本文中で本来の使い方が出来なくなります。floatを使うときは、コマの配置にfloatは使いません。もちろん本文でfloatを使わないときもです。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿floatを指定されると、それは強制的にブロックになり<strong>他の要素と独立してしまいます</strong>。そのためclearを指定してもそれ以前のfloatの回り込みは解除されません。(IEはバグのため解除されるようです。)<em>そのため、一階層上のブロックや兄弟要素などでclearします。</em> ＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>ガラス細工</h2> ＿＿<div class="section"> ＿＿＿<h2>簡単な物から</h2> ＿＿＿<p> ＿＿＿＿いきなり難しいものではなく、簡単なものからはじめましょう。ここでは熱帯魚に挑戦します。 ＿＿＿</p> ＿＿＿<ol> ＿＿＿＿<li id="saisiyo"> ＿＿＿＿＿<img src="siyasin/hajimenoitupo.jpg" class="figure" width="250" height="250" alt="ガラス玉" /> ＿＿＿＿＿<p>まずガラス玉を作ります。</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="siyasin/moyoumae.jpg" class="figure" width="250" height="250" alt="黄色のラインをつけたところ" /> ＿＿＿＿＿<p>(段落が長い場合のテスト)黄色のガラスを縦に4本付けます。<strong>両方とも加熱して温度を均一にして行います。</strong></p> ＿＿＿＿＿<p>段落が２行になると・・</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="siyasin/yojiru.jpg" class="figure" width="250" height="250" alt="ねじる" /> ＿＿＿＿＿<p>ねじるとこうなります。</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="siyasin/tubusu.jpg" class="figure" width="250" height="250" alt="平らに" /> ＿＿＿＿＿<p>それを潰すとこうなります。その後いったん加熱して全体の温度を均一にします。</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="siyasin/ohire.jpg" class="figure" width="250" height="250" alt="尾ひれ" /> ＿＿＿＿＿<p>尾ひれを付けます。</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="siyasin/sebire.jpg" class="figure" width="250" height="250" alt="背びれ" /> ＿＿＿＿＿<p>背びれを付けます。</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="siyasin/kanseitemae1.jpg" class="figure" width="250" height="250" alt="胸ヒレ" /> ＿＿＿＿＿<p>ムナビレを付けます。</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="siyasin/kansei1.jpg" class="figure" width="250" height="250" alt="目玉" /> ＿＿＿＿＿<p>前のガラスを溶かし取って、目を付けて完成です。</p> ＿＿＿＿</li> ＿＿＿＿<li id="kansei"> ＿＿＿＿＿<img src="siyasin/netutaigiyo.jpg" class="figure" width="300" height="250" alt="完成" /> ＿＿＿＿＿<p>熱帯魚完成</p> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="annotation"><!-- 付録 --> ＿＿＿<div class="contentTable"> ＿＿＿＿<h3>このページの目次</h3> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="#saisiyo">最初</a></li> ＿＿＿＿＿<li><a href="#kansei">完成</a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<div class="nav"> ＿＿＿＿<h3>サイトマップ</h3> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="index.html">TOPページへ戻る</a></li> ＿＿＿＿＿<li><a href="kougu.html">工具</a></li> ＿＿＿＿＿<li><a href="sagiyou.html">作業</a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<p>© 2011 ガラスの世界</p> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLは審査がすむまでちょっと待ってください。(^^)「メールアドレスもどき」が引っかかっちゃったらしい。 本文中でfloatを使うなら(使わなくても)、コンテナブロックをfloatで配置したらだめです。これは前回もサンプルを示したはず。前回のサンプルをしっかり見ていたら、解決できたはず。せっかく書いたのですから・・読んでほしい。 また、floatが指定された時点でその要素は強制的にブロック化されるので、それ自身にclearを書いても利きません。たまたまIEだと有効なバグがあるから、錯覚しますが、IEの動作が間違いです。 (英文)9.5 Floats ( http://www.w3.org/TR/CSS2/visuren.html#floats ) だからといって、<p class="kesu"></p>は禁じ手です。 ナビゲーションリンクは、正しくナビゲーションリンクとしてマークアップしましょう。検索エンジンは「<div class="nav">はナビゲーションだ」と正しく解釈してサイト内をクロールしてくれます。同様に、「<div class="section"></div>は本文」「<div class="article"></div>は独立した記事」と正しく解釈してくれます。 HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) HTML4.01の時代に、文書構造に従ったマークアップをしっかり身に着けましょう。HTML5になったら嫌でもそうする必要が出てきます。たぶん<div>は使われなくなる。 なお、先のCSS/HTMLでhrが目障りなら div.section hr{ clear:both; visibility:hidden; } としてください。HTML5ではhrは 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから The hr element now represents a paragraph-level thematic break. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML 5 differences from HTML 4( http://www.w3.org/TR/2008/WD-html5-diff-20080122/#changed-elements )］より ・・段落のように主題が変わるマークとなります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSです。 ★XHTMLですから、html,body{margin:0;padding:0}は入れておく ★clearは親要素が無難 ★<br/>は使わない。(住所とか段落は同じだけど行を変えたいときのみ) ★デザインのために意味のないマークアップはしない。デザインが欲しているということは、文書構造上、何らかの意味があるはず、それをマークアップしましょう。 @charset "Shift_JIS"; html,body{margin:0;padding:0;line-height:1.4em;} p{text-indent:1em;margin:0;} h1,h2{text-align:center;} div.header, div.footer, div.section{ ＿width:100%;max-width:900px;margin:0 auto;position:relative;clear:both; } div.section hr{clear:both;} div.section div.section,div.section h2{ ＿position:static;width:68%;margin-left:11%; } div.section div.contentTable,div.section div.nav{ ＿position:absolute;height:100%;top:0; ＿background-color:gray; ＿font-size:0.9em; } div.section div.contentTable{width:10%;left:0;} div.section div.nav{width:20%;right:0;} div.figure{clear:left;} div.figure img{padding:5px;float:left;width:260px;} div.section div.section p.line1{margin-top:120px;} div.nav ul,div.contentTable ul{ ＿display:block;margin:0.5em;padding:0;list-style:none; } div.nav ul li,div.contentTable ul li{margin:0;padding:0;}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
期待しているものはどんなものであり、どう崩れるのかがさっぱりわかりません。 ただ、HTMLの記述にいくつか重要な誤りがあります。文法上は誤りでなくてもHTMLの仕様では誤りも・・ transitionalで作成されているようですが、内容的にtrasitinalの必要はありませんから、必ずstrictで作成する癖をつけましょう。XHTML1.1はstrictと同じものですし、HTML5もstrictの拡張です。Transitionalは、あくまでブラウザが対応しなければならないが著者は使うべきでありません。 その上で、前にも書きましたように、文書構造にしたがって正しくマークアップされていれば、すきなようにデザインできます。 サンプルのHTMLは簡単でしょ!! ※<br />は段落内強制改行で、段落が変わるときは使わない。line-heightとmargin、およびtext-indentで指定する。 ※中身のないデザインのためだけの<p>があります。こんなものは書かない!! ※<img>は行内要素です。前後に<p>があると、匿名ブロックとして扱われるため扱いが面倒になります。 ※divのclass名はセマンティクな(意味のある)ものをつけましょう。一般的なものにしておくと検索エンジンは理解しくれますし、後で自分が見直すときとっても楽になります。box_b1だと、いちいちHTMLを開いて読み返さないとわからないでしょう。 header,section,navはHTML5では、構造化要素として独立します。 <div class="header"></div>→<heder></header>となります。class名はこの様につける。 ★なお、工程ですから、本来なら<ol>でマークアップするのが良いでしょう。 ★ガラス細工ですか・私は硼珪酸ガラスの吹きガラスで動物を作って遊んでます。 ★下記のソースの＿はタブに戻すこと ★いつもながら、下記で検証済み W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) googleお勧めのLynxでチェックしてもよいですね。 技術に関するガイドライン ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 ) <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head lang="ja" xml:lang="ja"> ＿<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> ＿<meta http-equiv="content-style-type" content="text/css" /> ＿<title>ガラスの世界</title> ＿<link rel="stylesheet" href="style1.css" type="text/css" /> ＿<link rev="made" href="mailto:hoge@hoge.com" /> ＿<link rel="index" href="../index.html" /> </head> <body> ＿<div class="header"> ＿＿<h1>ガラスの世界</h1> ＿</div> ＿<div class="section"> ＿＿<h2>ガラス細工製作です</h2> ＿＿<div class="section"> ＿＿＿<h2>簡単な物から</h2> ＿＿＿<p> ＿＿＿＿floatを指定されると、それは強制的にブロックになります。そのとき、自身と同じ階層にclearを指定しても回り込みは解除されません。(IEはバグのため解除される。) ＿＿＿</p> ＿＿＿<p> ＿＿＿＿そのため、一階層上のブロックなどでclearします。 ＿＿＿</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/hajimenoitupo.jpg" width="250" height="250" alt="ガラス玉" /> ＿＿＿</div> ＿＿＿<p id="saisiyo" class="line1">熱帯魚は簡単なので、まずガラス玉を作ります。</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/moyoumae.jpg" width="250" height="250" alt="黄色のラインをつけたところ" /> ＿＿＿</div> ＿＿＿<p class="line1">黄色のガラスを縦に4本付けます。<strong>両方とも加熱して温度を均一にして行います。</strong></p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/yojiru.jpg" width="250" height="250" alt="ねじる" /> ＿＿＿</div> ＿＿＿<p class="line1">ねじるとこうなります。</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/tubusu.jpg" width="250" height="250" alt="平らに" /> ＿＿＿</div> ＿＿＿<p class="line1">それを潰すとこうなります。その後いったん加熱して全体の温度を均一にします。</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/ohire.jpg" width="250" height="250" alt="尾ひれ" /> ＿＿＿</div> ＿＿＿<p class="line1">尾ひれを付けます。</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/sebire.jpg" width="250" height="250" alt="背びれ" /> ＿＿＿</div> ＿＿＿<p class="line1">背びれを付けます。</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/kanseitemae1.jpg" width="250" height="250" alt="胸ヒレ" /> ＿＿＿</div> ＿＿＿<p class="line1">ムナビレを付けます。</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/kansei1.jpg" width="250" height="250" alt="目玉" /> ＿＿＿</div> ＿＿＿<p class="line1">前のガラスを溶かし取って、目を付けて完成です。</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="siyasin/netutaigiyo.jpg" width="300" height="250" alt="完成" /> ＿＿＿</div> ＿＿＿<p class="line1" id="kansei">熱帯魚完成</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<ul> ＿＿＿＿<li><a href="#saisiyo">最初</a></li> ＿＿＿＿<li><a href="#kansei">完成</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="index.html">TOPページへ戻る</a></li> ＿＿＿＿<li><a href="kougu.html">工具</a></li> ＿＿＿＿<li><a href="sagiyou.html">作業</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<hr /> ＿</div> ＿<div class="footer"> ＿＿<p>© 2011 ガラスの世界</p> ＿</div> </body> </html>
- ycqxs765
- ベストアンサー率44% (34/77)
こんにちは、サンタと申します。 画像がないのでちょっとわからない所があるのですが、 CSSの bodyと h1の間に、 hr { clear:both; } を入れてみたらどのようになりますでしょうか？
お礼
有り難うございます。 上の方の書き込みが参考になりましたので、そちらを使わせていただくことにしました。
お礼
HTML、SCC、デザインを少し変えて使わせていただくことにしました。 HTML、SCCともに、もっと勉強してまともに作れるようにしたいと思っています。 有り難うございました。 私は、ガラスの水の中のような透明感が好きでガラス細工を作っています。仕事ではありません。