• ベストアンサー
  • すぐに回答を!

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

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は <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ガラスの世界</title> <link rel="stylesheet" href="style1.css" type="text/css" /> </head> <body> <div class="box_a">   <img src="gif/tatoru.gif"> </div> <hr /> <div class="box_b1"> <a href="#saisiyo">最初</a><br /> <a href="#kansei">完成</a> </div> <div class="box_b"> <h1>ガラス細工製作です</h1><br /> <h2>簡単な物から</h2> <img src="siyasin/hajimenoitupo.jpg" width="250" height="250" /> <p><a id="saisiyo">熱帯魚は簡単なので、まずガラス玉を作ります。</a></p><p class="kesu"></p> <img src="siyasin/moyoumae.jpg" width="250" height="250" /> <p>黄色のガラスを縦に4本付けます。</p><p class="kesu"></p> <img src="siyasin/yojiru.jpg" width="250" height="250" /> <p>ねじるとこうなります。</p><p class="kesu"></p> <img src="siyasin/tubusu.jpg" width="250" height="250" /> <p>それを潰すとこうなります。</p><p class="kesu"></p> <img src="siyasin/ohire.jpg" width="250" height="250" /> <p>尾ひれを付けます。</p><p class="kesu"></p> <img src="siyasin/sebire.jpg" width="250" height="250" /> <p>背びれを付けます。</p><p class="kesu"></p> <img src="siyasin/kanseitemae1.jpg" width="250" height="250" /> <p>ムナビレを付けます。</p><p class="kesu"></p> <img src="siyasin/kansei1.jpg" width="250" height="250" /> <p>前のガラスを溶かし取って、目を付けて完成です。</p><p class="kesu"></p> <img src="siyasin/netutaigiyo.jpg" width="300" height="250" /> <p><a id="kansei">熱帯魚完成</a></p> </div> <div class="box_b2"> <a href="index.html">TOPページへ戻る</a><br /> <a href="kougu.html">工具</a><br /> <a href="sagiyou.html">作業</a><br /> </div> <div class="box_c"><hr /> (c) 2011 ガラスの世界</div> </body> </html> これです。 img { vertical-align: bottom; }は使えない文法のようです。 宜しくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数7
  • 閲覧数320
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.8

>やっと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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    ★http:は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のすみわけをしっかり理解してください。  私も、長い道のりを脇道にそれながら十数年歩んできました。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

HTML、SCC、デザインを少し変えて使わせていただくことにしました。 HTML、SCCともに、もっと勉強してまともに作れるようにしたいと思っています。 有り難うございました。 私は、ガラスの水の中のような透明感が好きでガラス細工を作っています。仕事ではありません。

関連するQ&A

  • cssでボックスを横並びにし、横幅指定してもくっついてしまう。

    こんにちわ! 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真(A)、テキスト(B)、写真(C)、テキスト(D)、と並べたいのですが、(B)に横幅指定しているにもかかわらず、(C)がIEではOKなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、IEでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか? ご教授願いませんでしょうか~? 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • お世話になっております。fc2でblogを運営しているものです。

    お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML: <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS: #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01~navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。

  • 初歩的かもしれませんが回り込みが上手くできません

    初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを4つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか?? <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>

    • ベストアンサー
    • CSS

その他の回答 (6)

  • 回答No.7

4種類、永続的(固定)スタイルシートを含めて5種類です。印刷用は共用。 ブラウザの「表示メニュー」→「スタイル(シート)」で切り替える。 [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をコピーすれば良い事が分かり、無事作動を確認しました。その結果現在悪戦苦闘中ですもう暫くお待ちください。

  • 回答No.6

 どうも週明けまでかかりそうなので・・別の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 )などでしっかりチェックすること  ★スタイルシートは4種類用意してあります。 [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は便利そうですが、本来は[図]の周囲に長い文章を回りこませるためのもので、2コマや3コマ配置のコマ配置に使うと、本文中で本来の使い方が出来なくなります。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>段落が2行になると・・</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>&copy; 2011 ガラスの世界</p> _</div> </body> </html>

共感・感謝の気持ちを伝えよう!

  • 回答No.5

 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 )]より ・・段落のように主題が変わるマークとなります。

共感・感謝の気持ちを伝えよう!

  • 回答No.4

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

共感・感謝の気持ちを伝えよう!

  • 回答No.3

期待しているものはどんなものであり、どう崩れるのかがさっぱりわかりません。 ただ、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>&copy; 2011 ガラスの世界</p> _</div> </body> </html>

共感・感謝の気持ちを伝えよう!

  • 回答No.1

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

有り難うございます。 上の方の書き込みが参考になりましたので、そちらを使わせていただくことにしました。

関連するQ&A

  • IE5*でもCSSで画像を横に並べる方法を・・・

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="Shift_JIS" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><style type="text/css"> <!-- .box_a{ } .box_b{ } .box_c{ float:left; width:80px; background-color:#c8ffdb; } .box_d{ float:left; width:10px; background-color:#c8ffdb; } --> </style> </head> <body> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> </body> </html> 上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。 IE5*でもCSSで画像を横に並べる方法をご存じの方、教えてください。 お願いします (_ _)人。

  • IEとFirefoxの表示の違い

    テーブルを使わずCSSで枠を作り、中に画像を入れてその右側に文章を表示させたいのですが、ブラウザによって表示が異なり困っています。 外部スタイルシートに以下を記載して、 body {width:600px;} .img{float:left;} div.box { border: 1px solid #000 ; padding:10px; margin:10px; } 以下のHTMLをブラウザで表示すると、枠が重なって表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test</title> </head> <body> <div class="box"> <h4>title</h4> <div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> <div class="box"> <h4>title</h4> <div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> </body> </html> そこで、 スタイルシートのdiv.boxに height:100% ; を追加すると、IEでは画像の高さまで枠が広がりますが、Firefoxでは重なったままで変化しません。 画像の高さをpxで指定してやれば両方表示できますが、高さの設定を特にしないでIEとFirefoxで同じように表示する方法がありましたら教えてください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • firefoxで

    会社のHPをHPビルダーで作成しています、 <div class="content">要素の中に2つのBOX「左配置<div class="text09">・右配置<div class="text10">」を作成して左右に並べてみたのですがIE6,7,8では希望通り表示されるのですがfirefoxでは左text09のBOX下にtext10が配置されてしまいます、CSS初心者ですが右配置text10のwidth幅を指定しなければfirefixでも左右ならんで表示されるのですが、右配置text10の記字が左text09の下側に廻り込んでしまうのです? どうしたら良いでしょうか?どなたかご指導いただけませんでしょうか、宜しくお願いします。 ※サイドメニューの右側にcontentを配置 ※<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <ソース記述> <div class="content"> <div class="text09"> <img src="img/industria01.jpg" width="331" height="272" alt="工業団地" title="工業団地" /><br />       Partnershipの工業団地</div> <div class="text10"><a href="01.html"><img src="img/industria02.jpg" width="220" height="142" alt="(写真をクリックすると拡大できます)" title="(写真をクリックすると拡大できます)" /></a><br /> Texas A&amp;M Park<br />   (写真をクリックすると拡大できます)<br /> <a href="02.html"><img src="img/industria04.jpg" width="220" height="88" alt="(写真をクリックすると拡大できます)" title="(写真をクリックすると拡大できます)" /></a><br />      Business Park<br />   (写真をクリックすると拡大できます) </div> </div> 以下CSS記述 .content{ background-color : #ffffff; margin-left : 0px; margin-bottom : 0px; padding-left : 0px; width : 682px; float : right; padding-top : 0px; padding-right : 0px; } .text09{ float : left; font-size : 13px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; padding-left : 0px; margin-left : 50px; margin-right : 20px; width : 331px; display:inline; } .text09 a img{border-width : 0px 0px 0px 0px; } .text10{ font-size : 13px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; margin-left : 15px; width : 220px; } .text10 a img{border-width : 0px 0px 0px 0px;} この質問内容で解りますでしょうか?

  • <div>この余白は・・・

    <div>で作ったボックスの中に、さらに<div>のボックスを二つ(box、box2)並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか? また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out">  <div class="title">   <img src="img/title.jpg" width="700" height="75" border="0">  </div>  <div class="main">   <img src="img/main.jpg" width="700" height="375" border="0">  </div>  <div class="menu">   <img src="img/home_a.jpg" width="100" height="35" border="0">   <img src="img/first.jpg" width="100" height="35" border="0">   <img src="img/info.jpg" width="100" height="35" border="0">   <img src="img/order.jpg" width="100" height="35" border="0">   <img src="img/support.jpg" width="100" height="35" border="0">   <img src="img/link.jpg" width="100" height="35" border="0">   <img src="img/question.jpg" width="100" height="35" border="0">  </div>  <div class="area">   <div class="box">    <h5>AAAAAAAAA</h5>    <img src="img/kari.gif" width="250" height="100" border="0">   </div>   <div class="box2">    <h5>BBBBBBBBB</h5>    <img src="img/kari2.gif" width="250" height="100" border="0">   </div>  </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; }  どなたか知恵をお貸しください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで表示が、、、

    写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }

    • ベストアンサー
    • CSS
  • FireFoxでのレイアウト表示崩れについて

    現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • コンテンツとコンテンツの詰まり

    Windows XP あるいは8 HTML 4.01 コピー &#65374; TOP.html copyTOP.css あああああ と  いいいいいの間隔はあいているのに いいいいい と  うううううの間隔はなぜか詰ってしまっています。 間隔を空けるにはどうしたらいいでしょうか? コードは以下の通りです。 [ HTML 側 ] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="&#65374;"> <title>aaaaaaaaaa</title> <link rel="stylesheet" href="copyTOP.css" type="text/css"> </head> <body> <div id="zentai"> <div id="part"> <p class="title">あああああ</p> <div id="partnerwaku"> <div id="partnerimage"> <a href="" alt="のロゴ" class=""></a> <a href="" alt="のロゴ" class=""></a> <a href=""><img src=".gif" alt="のロゴ" class=""></a> <a href=""><img src=".jpg" alt="のロゴ" class="A"></a> <a href=""><img src=".jpg" alt="のロゴ" class=""></a> </div> </div> </div> <div id="PR"> &lt;PR&gt; <br> <div id="PRsection"> <br> <a href=""> <img src="" alt="" class="PRimage01"></a> </div> </div> <div id="PR2"> <br> &lt;PR&gt; <br> <div id="PRsection2"> <br> <a href=""> <img src="" alt="" class="PRimage02"></a> </div> </div> <div id="columnwaku"> <div id="columnbun"> <p class="title">いいいいい</p> <div id="columncontents"> <p><a href=""><img src =".jpg" class="columnarticle01"></a></p> </div> </div> </div> <br> <br> <br> <br> <div id="PR3"> <br> &lt;PR&gt; <br> <div id="PRsection3"> <br> <a href=""><img src="" alt="" class="PRimage03"></a> </div> </div> <br> <br> <br> <br> <br> <div id="questionnairesection"> <div id="questionnaire"> <p class="title">ううううう</p> <div id="questionnairecontents">えええええ</div> </div> </div> <div id="PR4"> <br> &lt;ddd&gt; <br> <div id="PRsection4"> <br> <a href=""> <img src="" alt="" class="PRimage04"></a> </div> </div> <div id="pagetop"> <br> <br> <a href="#logoimage">ページの先頭へ▲</a> </div> <hr class="beforefooter"> <div id="aboutus"> <div id="aboutussection"> <p class="aboutustitle">管理会社</p> <p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p> </div> </div> <br> <br> <hr class="beforefooter"> </div> <!--全体のdiv--> </body> </html> [ css側] @charset "Shift_Jis"; body { overflow-y:auto overflow-x:auto text-align:center; cursor:url("images/.png"); } #allitem{ cursor:url("images/.png"); } #zentai{ width:1000px; margin-left:auto; margin-right:auto; } .title{ margin-top:0px; margin-bottom:0px; font-size : 20px; border-style:solid; width:592px; background-color:#FFFF99; padding:3px; } #part{ clear:left; float:left; height:180px; width:642px; padding-right:147px; font-size : 20px; } #partnerwaku{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR{ float:left; width:180px; height:120px; } #PRsection{ border-style:solid; border-color: #000099; } #PR2{ float:left; width:185px; height:150px; } #PRsection2{ border-style:solid; border-color: #000099; } .PRimage01{ width:170px; height:80px; } .PRimage02{ width:165px; height:100px; } #kuhaku{ clear:left; height:20px; } #columnwaku{ float:left; clear:left; height:130px; width:790px; } #columnbun{ height:120px; width:600px; } #columncontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } .columnarticle01{ height:70px; width:400px; background-color:#CC99CC; } #PR3{ float:left; width:185px; height:150px; } #PRsection3{ border-style:solid; border-color: #000099; } .PRimage03{ width:165px; height:100px; } #questionnairesection{ clear:left; float:left; height:130px; width:1050px; } #questionnaire{ width:600px; border-radius: 20px; } #questionnairecontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR4{ float:left; width:185px; height:150px; } #PRsection4{ border-style:solid; border-color: #000099; } .PRimage04{ width:165px; height:100px; } 文字制限のため省略

    • ベストアンサー
    • HTML
  • HTML、CSS が、なかなかうまくいきません。

    お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の2つのボタンは、やや大きい感じのボタン。 下段の3つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。

    • 締切済み
    • CSS
  • 2カラムを作りたいと思ってますがフロートできません

    HTMLで以下のソースを記述しました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ダイエット</title> <link href="css/style1.css" type="text/css" /> </head> <body> <center><img src="img/バナー.png" /></center> <div> <div id contents> <h1>今月のおすすめダイエット</h1> <p>こんなお腹でいい・・・?私・・・。</p> <br /> <img src="img/マキシムストロング.png" alt="マキシムストロング" /> <br /> <p>産後太り、中年太りでこんなお腹になってませんか?</p> <img src="img/ビフォーアフター.png" alt="お腹"/><br /> <p>10キロ痩せたいという方はダイエットの方法を考えなければいけません。<br /> 運動や食事などの方法を徹底的に見直し効率的にダイエットを行っていきましょう。<br /> 10キロ痩せるのはハードルが高いと思うかもしれませんが、<br /> 効果的な方法で行えば、成功する確率も高くなります。<br /></p> <img src="img/Fotolia_66573075_XS-min.jpg" alt="体重計" /><br /> <p>10キロ痩せたい場合のダイエットで一番大事なポイントは目標設定を明確にすることです。<br /> 無理のない運動や食事を計画することによって途中の挫折がなくなります。<br /> 健康的に10キロ痩せることを目標にしましょう<br /></p> <br /> <br /> <p>マキシマムストロングスと併用したいダイエットサプリがこちら!!</p> <br /> <img src="img/オリフェスト.png" /><br /> <br /> <p>こんな理想ボディーを手に入れましょう</p> <img src="img/ビフォーアフター.png" /></div> <br /> <div id sidenavi> <p><img src="img/6586779561100367916.jpg" /></p> <p>6つの施術で<br /> 美脚を作る<br /> 骨盤ダイエット<br /> 脚やせ<br /> </p> <br /> <br /> <img src="img/2510561931730068165.jpg" /> <p>大人気<br /> 長続きしない方必見<br /> 噂のダイエット<br /></p> <br /> <br /> <img src="img/ダウンロード (6).jpg" /> <p>大人気<br /> 1食置き換えるだけ<br /> 簡単ダイエット<br /></p> <br /> <br /> <img src="img/ダウンロード (7).jpg" /> <p>とってもおいしいと評判<br /> 小腹がすいた時に<br /> 安心して食べられビスケット<br /></p> </div > </div> </body> </html> その後cssにてsidenaviを右にフロートしたいので以下の記述をしまいた @charset "utf-8"; /* CSS Document */ #wrap { width:1000px; margin:0px auto; } #contents { float:left; width:700px; height:1500px; margin:10px 0px 10px 0px; } #sidenavi { float:left; width:300px; height:1500px; margin:10px 10px 10px 0px; } ですがフロートされません。 cssがうまくリンクされてないのでしょうか? 原因がまったくわからない初心者です。 どなたかお知恵をおかりしたいと思います。 どうぞよろしくお願いいたします

    • 締切済み
    • XML
  • 【至急】ボックスの高さ指定

    base(3つのボックスを包囲する)のボックスに背景画像をつけています。baseの中にboxを3つ横に並べてます。 ■box左は画像(背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので) ■box真ん中は仕切り線(背景はなし) ■box右はテキスト(背景グレー)にしてます。 質問内容: box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか? (html) <div class="base"> <div class="box1_img"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3_text"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> (css) ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; } .base { width: 618px; height: 100%;(←分からない??) margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1_img { width: 130px; height: 97px; margin: 0; padding: 2px; float: left; background: black; } .base .box2_line { width: 2px; height: 100%;(←分からない??) margin: 0 10px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3_text { width: 450px; margin: 0; padding: 5px; float: left; text-align: left; background: #eee; } ul .list-y{ font-weight: bold; text-align: left; } とっても切羽詰まってます!! すぐに回答いただけると、とっても助かります。 よろしくお願いいたします。

    • ベストアンサー
    • CSS