ホームページ製作中ですが3カラムの体裁崩れに付いて

Question

3カラムのホームページで画像を挿入して、img { float: left; }を使いテキストの回りこみをすると全体の体裁が崩れます。なにぶん初心者なので、解りやすくお願いします。 SCCは @charset "shift_jis"; body { background-image: url(gif/kabe.gif); margin-top: 25ot; margin-left: 50pt; font-family: Osaka, "ヒラノギ角ゴ　Pro W3","小塚ゴシック　Std B","MS P ゴシック",; } h1 { font-size: 32pt; color: #006600; text-align: center; } h2 { font-size: 24pt; color: #ff3300; text-align: center; } p { color: #0000cc; } img { float: left; } p.kesu { clear: both; } div.box_a { width: 700px; margin-left: auto; margin-right: auto; } div.box_b1 { width: 10%; height: 480px; float: left; } div.box_b { width: 70%; height: 480px; overflow: auto; float: left; } div.box_b2 { width : 20%; height: 480px; float: left; } div.box_c { width: 100%; text-align: center; clear: both; } これです。 HTMLはガラスの世界

最初
完成

ガラス細工製作です

簡単な物から

熱帯魚は簡単なので、まずガラス玉を作ります。

黄色のガラスを縦に4本付けます。

ねじるとこうなります。

それを潰すとこうなります。

尾ひれを付けます。

背びれを付けます。

ムナビレを付けます。

前のガラスを溶かし取って、目を付けて完成です。

熱帯魚完成

TOPページへ戻る
工具
作業

これです。 img { vertical-align: bottom; }は使えない文法のようです。宜しくお願いします。

ORUKA1951 · Accepted Answer

＞やっと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のすみわけをしっかり理解してください。

私も、長い道のりを脇道にそれながら十数年歩んできました。

ORUKA1951 · Answer

４種類、永続的(固定)スタイルシートを含めて５種類です。印刷用は共用。
ブラウザの「表示メニュー」→「スタイル(シート)」で切り替える。

[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;}

ORUKA1951 · Answer

　どうも週明けまでかかりそうなので・・別のHTMLを書いておきました。基本的に「5カラムでの写真の文字の回りこみに付いて質問です。 - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/6889908.html )」と同じものです。HTMLは示されたものを、根本的に書き換えています。　普通はここまでサービスしない(仕事の糧ですから)・・しっかり読んで理解してください。　HTMLは文書構造をマークアップするもので、HTMLを作成する時点ではデザインは考えない。(実際には考えますが、文書構造もこうなるはず--と考える)出来上がったHTMLは、後日、誰(人も機械も)が見ても文書構造がわかるように。　そしてAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )などでしっかりチェックすること　★スタイルシートは４種類用意してあります。 [HTML] ＿＿＿floatの使い方＿＿＿＿＿＿＿＿＿

＿＿

floatの使い方

＿＿

＿＿＿

＿＿＿＿floatは便利そうですが、本来は[図]の周囲に長い文章を回りこませるためのもので、２コマや３コマ配置のコマ配置に使うと、本文中で本来の使い方が出来なくなります。floatを使うときは、コマの配置にfloatは使いません。もちろん本文でfloatを使わないときもです。＿＿＿

＿＿＿

＿＿＿＿floatを指定されると、それは強制的にブロックになり他の要素と独立してしまいます。そのためclearを指定してもそれ以前のfloatの回り込みは解除されません。(IEはバグのため解除されるようです。)そのため、一階層上のブロックや兄弟要素などでclearします。 ＿＿＿

＿＿

＿

＿＿

ガラス細工

＿＿

＿＿＿

簡単な物から

＿＿＿

＿＿＿＿いきなり難しいものではなく、簡単なものからはじめましょう。ここでは熱帯魚に挑戦します。＿＿＿

＿＿＿

＿＿＿＿＿＿＿＿＿＿
まずガラス玉を作ります。
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
(段落が長い場合のテスト)黄色のガラスを縦に4本付けます。両方とも加熱して温度を均一にして行います。
＿＿＿＿＿
段落が２行になると・・
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
ねじるとこうなります。
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
それを潰すとこうなります。その後いったん加熱して全体の温度を均一にします。
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
尾ひれを付けます。
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
背びれを付けます。
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
ムナビレを付けます。
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
前のガラスを溶かし取って、目を付けて完成です。
＿＿＿＿
＿＿＿＿＿＿＿＿＿＿
熱帯魚完成
＿＿＿＿

＿＿

＿＿＿

＿＿＿＿

このページの目次

＿＿＿＿

最初
完成

＿＿＿

＿＿＿＿

サイトマップ

＿＿＿＿

TOPページへ戻る
工具
作業

＿＿＿

＿＿

＿

ORUKA1951 · Answer

　HTMLは審査がすむまでちょっと待ってください。(^^)「メールアドレスもどき」が引っかかっちゃったらしい。　本文中でfloatを使うなら(使わなくても)、コンテナブロックをfloatで配置したらだめです。これは前回もサンプルを示したはず。前回のサンプルをしっかり見ていたら、解決できたはず。せっかく書いたのですから・・読んでほしい。　また、floatが指定された時点でその要素は強制的にブロック化されるので、それ自身にclearを書いても利きません。たまたまIEだと有効なバグがあるから、錯覚しますが、IEの動作が間違いです。　(英文)9.5 Floats ( http://www.w3.org/TR/CSS2/visuren.html#floats ) 　だからといって、

は禁じ手です。　ナビゲーションリンクは、正しくナビゲーションリンクとしてマークアップしましょう。検索エンジンは「

はナビゲーションだ」と正しく解釈してサイト内をクロールしてくれます。同様に、「

は本文」「

は独立した記事」と正しく解釈してくれます。 HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 　HTML4.01の時代に、文書構造に従ったマークアップをしっかり身に着けましょう。HTML5になったら嫌でもそうする必要が出てきます。たぶん

は使われなくなる。　なお、先の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 · Answer

CSSです。 ★XHTMLですから、html,body{margin:0;padding:0}は入れておく ★clearは親要素が無難 ★
は使わない。(住所とか段落は同じだけど行を変えたいときのみ) ★デザインのために意味のないマークアップはしない。デザインが欲しているということは、文書構造上、何らかの意味があるはず、それをマークアップしましょう。 @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 · Answer

期待しているものはどんなものであり、どう崩れるのかがさっぱりわかりません。ただ、HTMLの記述にいくつか重要な誤りがあります。文法上は誤りでなくてもHTMLの仕様では誤りも・・　transitionalで作成されているようですが、内容的にtrasitinalの必要はありませんから、必ずstrictで作成する癖をつけましょう。XHTML1.1はstrictと同じものですし、HTML5もstrictの拡張です。Transitionalは、あくまでブラウザが対応しなければならないが著者は使うべきでありません。　その上で、前にも書きましたように、文書構造にしたがって正しくマークアップされていれば、すきなようにデザインできます。サンプルのHTMLは簡単でしょ!! ※
は段落内強制改行で、段落が変わるときは使わない。line-heightとmargin、およびtext-indentで指定する。 ※中身のないデザインのためだけの

があります。こんなものは書かない!! ※は行内要素です。前後に

があると、匿名ブロックとして扱われるため扱いが面倒になります。 ※divのclass名はセマンティクな(意味のある)ものをつけましょう。一般的なものにしておくと検索エンジンは理解しくれますし、後で自分が見直すときとっても楽になります。box_b1だと、いちいちHTMLを開いて読み返さないとわからないでしょう。　header,section,navはHTML5では、構造化要素として独立します。　

→となります。class名はこの様につける。 ★なお、工程ですから、本来なら

ガラスの世界

＿＿

ガラス細工製作です

＿＿

＿＿＿

簡単な物から

＿＿＿

＿＿＿＿floatを指定されると、それは強制的にブロックになります。そのとき、自身と同じ階層にclearを指定しても回り込みは解除されません。(IEはバグのため解除される。) ＿＿＿

＿＿＿

＿＿＿＿そのため、一階層上のブロックなどでclearします。＿＿＿

＿＿＿

＿＿＿＿

＿＿＿

熱帯魚は簡単なので、まずガラス玉を作ります。

＿＿＿

＿＿＿＿

＿＿＿

黄色のガラスを縦に4本付けます。両方とも加熱して温度を均一にして行います。

＿＿＿

＿＿＿＿

＿＿＿

ねじるとこうなります。

＿＿＿

＿＿＿＿

＿＿＿

それを潰すとこうなります。その後いったん加熱して全体の温度を均一にします。

＿＿＿

＿＿＿＿

＿＿＿

尾ひれを付けます。

＿＿＿

＿＿＿＿

＿＿＿

背びれを付けます。

＿＿＿

＿＿＿＿

＿＿＿

ムナビレを付けます。

＿＿＿

＿＿＿＿

＿＿＿

前のガラスを溶かし取って、目を付けて完成です。

＿＿＿

＿＿＿＿

＿＿＿

熱帯魚完成

＿＿

＿＿＿

最初
完成

＿＿

＿＿＿

TOPページへ戻る
工具
作業

＿＿

＿

ycqxs765 · Answer

こんにちは、サンタと申します。

画像がないのでちょっとわからない所があるのですが、
CSSの
bodyと h1の間に、
hr {
clear:both;
}
を入れてみたらどのようになりますでしょうか？

ホームページ製作中ですが3カラムの体裁崩れに付いて

＞やっとSCCとHTMLをコピーすれば良い事が分かり、無事作動を確認しました。

４種類、永続的(固定)スタイルシートを含めて５種類です。

どうも週明けまでかかりそうなので・・別のHTMLを書いておきました。

HTMLは審査がすむまでちょっと待ってください。

CSSです。

期待しているものはどんなものであり、どう崩れるのかがさっぱりわかりません。

こんにちは、サンタと申します。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　どうも週明けまでかかりそうなので・・別のHTMLを書いておきました。

　HTMLは審査がすむまでちょっと待ってください。