• ベストアンサー

XHTML+CSSにおいてIE6での原因不明のバグ？に困っています

最近一大決心をし、テーブルでデザインしていたページをCSSでデザインしなおしております。 今IE6にでのみ、おかしな挙動が起こっていて昨日からもう5時間近く直せないでいます。どなたか原因と対処方を教えていただけませんでしょうか？ やりたいこと：枠の中に2段組で左にサイドバー、右にメインの要素を入れようとしています。メインの要素はブログでいうエントリーのように似たような要素が繰り返されます。 事象：IE6でのみエントリーの繰り返しの最後の要素が通常の表示とは別に全体の背景のように表示される。 該当部のソース：一応コメント部もそのまま載せます （XHTML） <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <title>あいうえお</title> <style type="text/css"> @import url("xxxxxx.css"); </style> </head> <body> <div id="box"> <div id="centerbox"><!-- 角丸コンテナセンター要素（コンテンツ部） --> <div id="contents"> <!-- ここからコンテンツ ---> <!-- ここからサイドコンテナ --> <div id="side"> <div class="subnavi"> <h2>さいどなび</h2> <p>サイドナビ要素</p> </div><!-- / end of subnavi--> 　 <!--　/　サイドコンテナここまで　--> </div><!-- / end of side--> <!-- ここからメインコンテナ --> <div id="main"> <h2>コンテンツタイトル</h2> <div class="column"> <h3>コンテンツサブタイトル</h3> <p>コンテンツはここはひふへほ書きくけ子たち</p> <p>コンテンツはここはひふへほ書きくけ子たちつ</p> </div><!-- / end of column--> <div class="column"> <h3>コンテンツサブタイトル２</h3> <p>ここは繰り返しのてすと</p> <p>コンテンツはここはひふへほ書きくけ子たちつて</p> </div><!-- / end of column--> <!-- / ここまでメインコンテナ---> </div><!-- / end of main--> <!-- /ここまでコンテンツ --> </div><!-- / end of contents--> <!-- ここまで角丸コンテナセンター要素 --> </div><!-- end of centerbox --> </div> <!-- / end of box--> </body> （CSS） #box { width: 800px; margin: 0px; padding: 0px; height: auto; clear: both; } #box #centerbox { vertical-align:top; margin: 0px; padding: 0px; clear: both; width: 790px; border-right: 5px solid #990000; border-left: 5px solid #990000; height: auto; border-top-width: 0px; border-bottom-width: 0px; } #contents { margin: 0px 5px 5px; padding: 0px; height: 500px; width: 780px; clear: both; } #contents #side { height: auto; width: 150px; margin: 0px; padding: 0px; float: left; } #contents #side .subnavi { border: thin dotted #00FFFF; margin: 0px; padding: 0px; } #contents #side .subnavi h2 { color: #CC0000; background: #FF66FF; padding: 5px; margin: 0px; font-size: large; } #contents #main { padding: 0px; float: right; height: auto; width: 630px; margin: 0px; } #contents #main h2 { background: #66CCFF; border-left: 10px solid #0000FF; margin: 0px 10px 10px; font-size: x-large; font-weight: bold; padding: 5px 10px; } #contents #main .column { margin: 15px; padding: 10px; border: thin dashed #0000FF; clear: both; } #contents #main .column h3 { background: #99FFFF; border-left: 10px solid #0066FF; margin: 0px; font-size: large; font-weight: bold; padding: 5px; } #contents #main .column p { font-size: medium; clear: both; margin: 5px; padding: 0px; } 縦は一番上から始まり、横は上記HTML<p>サイドナビ要素</p>のサとイの間辺りからcolumn の最後の要素が背景のように出ます。文字は最後の1文字しか見えません。（おそらくその上に他の要素があるため見えないのではないかと思いますが・・・） おそらくCSSに問題があると思うのですが、全く解らないです。

  • HTML
  • 回答数4
  • ありがとう数3
回答 全件
ベストアンサー
間違っている個所はないようですよ。 以下のブラウザで確認しました…
IE 6 on WinXP Pro SP2(Virtual PCイメー…
cssの#contents がfloat: left;だったのがcle…

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

  • ベストアンサー
  • shady-me
  • ベストアンサー率57% (4/7)
回答No.4

間違っている個所はないようですよ。 以下のブラウザで確認しましたが、div.column の繰り返しの最後の要素も正常になく表示されました。 ・InternetExplorer 6 ・Opera 9 ・Firefox 1.5 XHTMLの文法チェックもしましたが、XHTML/1.0 StrictクリーンでバッチリOKでしたよ。 見当違いかもしれませんが、以下の２点を再確認されてはどうですか？ ・文字コードは本当に EUC-JP で保存していますか？ 　→「charset=EUC-JP」と書いていながら、間違って、シフトJISなどで保存していたとか。 ・@import url("xxxxxx.css"); で参照しているスタイルシート内容は、本当に上記の内容ですか？ 　→ファイル名を勘違いしてて、実は別のファイルを参照していたとか。 あと、ご参考までに、 xml宣言を省略するなら、文字コードは UTF-8 を使用されたほうがよいらしいです。 私もよく分からないのですが、下記のページに説明があります。 http://www.robustdesigns.jp/doc/05help/14create/index.html 私もXHTML+CSSでサイト構築してますが、↑のサイトでDLできるｐｉａｐｉａｃっていうツールを使えばかなり楽ですよ。

ken-39
質問者

お礼

まとめてお礼をいたします。 皆さん大変ありがとうございます。 皆様にご指摘していただいた点は文字コード以外は確認対応いたしました。 また、この質問に載せた部分以外のCSSと上記のCSSを分離してみたところ、問題は解決いたしました。 どうやら、この質問のままだと再現できなかったようで、CSSの他の要素が原因だったようです。原因はわからなかったのですが、皆さんありがとうございました。 UTF-8化についてはこのサイトはPHPを使っているため、今回は一応見送ります。ただ、UTF-8のほうがよいということは知らなかったのでこの後の参考になりました。 ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.3

IE 6 on WinXP Pro SP2(Virtual PCイメージ，日本語言語パックなしのため豆腐に文字化け) IE 7 on WinXP Pro SP2 Minefield(Firefox 3.0a4pre) on WinXP Pro SP2 Opera v9.20w8769 on WinXP Pro SP2 環境下で ●質問文のソースのコメントの書式が間違っていた("-"が三つある)ので，修正した ●meta要素の文字コード指定変更(EUC-JP→UTF-8 BOM付き)と共にそれを修正した ●html要素の終了タグを追加 ●CSSを別ファイルにせず，style要素に直書き して表示してみたが，特に変化は見られなかった(ちなみにhtml要素を除けば他はきちんと整形式になっていた ==========使ったサンプルソース============== <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>あいうえお</title> <style type="text/css"> #box { width: 800px; margin: 0px; padding: 0px; height: auto; clear: both; } #box #centerbox { vertical-align:top; margin: 0px; padding: 0px; clear: both; width: 790px; border-right: 5px solid #990000; border-left: 5px solid #990000; height: auto; border-top-width: 0px; border-bottom-width: 0px; } #contents { margin: 0px 5px 5px; padding: 0px; height: 500px; width: 780px; clear: both; } #contents #side { height: auto; width: 150px; margin: 0px; padding: 0px; float: left; } #contents #side .subnavi { border: thin dotted #00FFFF; margin: 0px; padding: 0px; } #contents #side .subnavi h2 { color: #CC0000; background: #FF66FF; padding: 5px; margin: 0px; font-size: large; } #contents #main { padding: 0px; float: right; height: auto; width: 630px; margin: 0px; } #contents #main h2 { background: #66CCFF; border-left: 10px solid #0000FF; margin: 0px 10px 10px; font-size: x-large; font-weight: bold; padding: 5px 10px; } #contents #main .column { margin: 15px; padding: 10px; border: thin dashed #0000FF; clear: both; } #contents #main .column h3 { background: #99FFFF; border-left: 10px solid #0066FF; margin: 0px; font-size: large; font-weight: bold; padding: 5px; } #contents #main .column p { font-size: medium; clear: both; margin: 5px; padding: 0px; } </style> </head> <body> <div id="box"> <div id="centerbox"><!-- 角丸コンテナセンター要素（コンテンツ部） --> <div id="contents"> <!-- ここからコンテンツ --> <!-- ここからサイドコンテナ --> <div id="side"> <div class="subnavi"> <h2>さいどなび</h2> <p>サイドナビ要素</p> </div><!-- / end of subnavi--> 　 <!--　/　サイドコンテナここまで　--> </div><!-- / end of side--> <!-- ここからメインコンテナ --> <div id="main"> <h2>コンテンツタイトル</h2> <div class="column"> <h3>コンテンツサブタイトル</h3> <p>コンテンツはここはひふへほ書きくけ子たち</p> <p>コンテンツはここはひふへほ書きくけ子たちつ</p> </div><!-- / end of column--> <div class="column"> <h3>コンテンツサブタイトル２</h3> <p>ここは繰り返しのてすと</p> <p>コンテンツはここはひふへほ書きくけ子たちつて</p> </div><!-- / end of column--> <!-- / ここまでメインコンテナ--> </div><!-- / end of main--> <!-- /ここまでコンテンツ --> </div><!-- / end of contents--> <!-- ここまで角丸コンテナセンター要素 --> </div><!-- end of centerbox --> </div> <!-- / end of box--> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
noname#56851
noname#56851
回答No.2

cssの#contents がfloat: left;だったのがclear: both;になったりfloat: right;になったりとしているのが気になりました。

全文を見る
すると、全ての回答が全文表示されます。
noname#39970
noname#39970
回答No.1

全部は見てないけど気になった事 divタグが　ちゃんと対応してないように見える

ken-39
質問者

お礼

ありがとうございます。 対応していないとは、classやidのつけ方とか、cssの表記とかでしょうか？ cssでデザインするのは不慣れなためよくわかりません。 申し訳ありませんが、もう少し詳しく教えていただけませんでしょうか？

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • Firefoxで見出しが上段にずれてしまいます。

    IE6.0とOperaであれば正常に表示されるのですがFirefox2.0ですと<h1></h1>の部分が上の方にずれてしまいます。 色々変えてみましたが結局直すことが出来ませんでした。ご教授の程、よろしくお願いします。 ◆スタイルシート◆ body { font-family: "ＭＳ Ｐゴシック", ; margin: 0px; padding: 0px; text-align: center; } #wrapper { text-align: left; margin: 0px auto; padding: 20px; height: auto; width: 900px; h1 { font: x-large "ＭＳ Ｐゴシック", ; border-bottom: 1px solid #0000FF; border-left: 10px solid #0000FF; width: 100%; text-align: left; #contents { margin: 0px; padding: 0px; height: auto; width: 750px; } #wrapper #contents #side { font: small/23px "ＭＳ Ｐゴシック", ; } #contents #side { margin: 0px 5px; padding: 0px; float: left; height: auto; width: 430px; } #contents #main { margin: 0px; padding: 0px; float: right; height: auto; width: 300px; ｝ ◆ＨＴＭＬ◆ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <body> <div id="wrapper"> <div id="contents"> <h1>名称</h1> <div id="side"> 　<P>説明文 </P> </div> <div id="main"> 　　JPEG画像 </div> </div> ※contents～mainまでを何度か繰り返します。 </div> </body> </HTML>

    • ベストアンサー
    • HTML
  • IEとFireFoxでCSSの見た目をそろえたい

    CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1>&nbsp;</h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2>&nbsp;</h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p>&nbsp; </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }

    • ベストアンサー
    • CSS
  • cssで3カラムを実現したいのですが・・・

    cssで3カラムを実現したいのですが、左メニューがカラム落ちします。 素人なので、あるサイトを見本にした所、左メニューがカラム落ちしてしまいます。 原因がわかりませんので、わかる方どうか助けてください。 -------html--------- <body> <div id="page"> <div id="header"> <div class="inner"> <p>#header</p> </div> <!-- / #header--></div> <div id="container"> <div id="contents"> <div id="main"> <div class="inner"> <h2>#main</h2> <p>メイン</p> <p>testてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテストtestてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> <p>testてすとテスト</p> </div> <!-- / #main--></div> <div id="sub"> <div class="inner"> <h2>#sub</h2> </div> <!-- / #sub--></div> <!-- / #contents--></div> <div id="ex"> <div class="inner"> <h2>#ex</h2> </div> <!-- / #footer--></div> <!-- / #container--></div> <div id="footer"> <div class="inner"> <h2>#footer</h2> </div> <!-- / #footer--></div> <!-- / #page--></div> </body> </html> -------css--------- body { margin:30px 0 0 0; background:#EEE; color:#000; line-height:1.5; text-align:center; font-size:small; font-family:verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } *:first-child + html body { font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } html { overflow-y:scroll; } h1,h2,h3,h4,h5,h6 { font-size:medium; letter-spacing:.1em; } p { margin:0 0 10px; } img,fieldset { border:0; } .inner { padding:10px; } /* by */ .by { position:absolute; bottom:10px; right:10px; margin:0; padding:5px; background:#FFF; } /*----------------------------------------------- __page -----------------------------------------------*/ #page { width:90%; min-width:600px; margin:0 auto; text-align:left; } /*----------------------------------------------- __header -----------------------------------------------*/ #header { background:#000; color:#FFF; } /*----------------------------------------------- __container -----------------------------------------------*/ #container { float:left; width:100%; background:#999999; } /*----------------------------------------------- __contents -----------------------------------------------*/ #contents { } /* __main ------------------------------------------*/ #main { float:left; width:100%; } #main .inner { margin:0 200px 0 180px; background:#FFF; } /* __sub ------------------------------------------*/ #sub { float:left; width:150px; margin-left:-200px; background:#009999; } /* __ex ------------------------------------------*/ #ex { float:left; width:150px; margin-left:-100%; background:#CCCC00; } /*----------------------------------------------- __footer -----------------------------------------------*/ #footer { clear:both; background:#000; color:#FFF; }

    • ベストアンサー
    • HTML
  • ブログを３カラム右右から左右両サイドにしたい。

    現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }

    • ベストアンサー
    • HTML
  • xhtml+cssでレイアウトしたページがmacで崩れる

    xhtml+cssでレイアウトして、コーディングしたPageなのですが、 階層Pageで作ったソースをコピーして4P作成しました。 テーブルは一切使わず、ヘッダー、メニュー、メイン、フッターで構成し、CSSでレイアウトをおこない、うまくできたのですが、どうしてか、MACのIE5.1の環境の時だけ、サイドメニューの下にメインコンテンツが、崩れてきてしまい、メインのスペースが空白になってしまいます。 MAC IE5.2では問題なく見れました。 それも、他の階層ページは、問題なく表示するのです。 cssソースは以下になります。 ヘッダー フッター省略 度々の質問で恐縮です。 @charset ”utf-8”; /*ここからコンテンツ*/ #contents { margin: 0px 0px 0px 63px; padding: 0px; width: 900px; height: 1100px; } #contents #main { margin: 0px; padding: 0px; float: right; height: 1100px; width: 680px; } #contents #main h2 { background: url(../treet/images/title_08.jpg) no-repeat; height: 57px; width: 633px; padding: 0px; margin-top: 15px; margin-left: 5px; } #contents #main h2 em { visibility: hidden; } #contents #main p { margin: 5px; padding-bottom: 15px; font: 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; width: 550px; border-bottom: 1px dotted #CCCCCC; } #contents #main h3 { color: #666666; height: 16px; margin-right: 15px; margin-left: 30px; padding-top: 4px; padding-bottom: 6px; padding-left: 6px; border-bottom: 1px dotted #a5d3e2; border-left: 6px solid #a5d3e2; width: 555px; font: 16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; } .p1 { margin: 0px; padding: 0px; width: 550px; font: 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; color: #666666; } .p2 { margin: 0px; padding: 0px; width: 550px; font: bold 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; color: #82C1D7; } .p1-a { font-size: 12px; width: 520px; margin: 0px; padding: 0px; line-height: 16px; text-align: right; float: right; } .block { display: block; width: 520px; margin-left: 25px; } #contents #main h2#list { height: 57px; width: 633px; padding: 0px; margin-top: 15px; margin-left: 5px; background-image: url(../company/images/title_08.jpg); background-repeat: no-repeat; } .p3 { font-family: ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”; font-size: 12px; line-height: 120%; color: #666666; } /*ここまでコンテンツ*/ /*ここからサイドナビ*/ #contents #sidenavi { background: #99CC66 url(images/bg_19.jpg) repeat; margin: 0px; padding: 15px 0px 0px 5px; height: 1100px; width: 190px; float: left; } #contents #sidenavi h2 { font-size: 9px; float: left; margin: 0px; padding: 0px; } #sidenavi h2 a { text-decoration: none; display: block; height: 56px; width: 182px; margin: 0px; padding: 3px 0px 3px 3px; color: #0000CC; font-family: ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; } #sidenavi em { visibility: hidden; } /*サイドナビ1番*/ #sidenavi h2#sn1 { background: url(images/navi_06.jpg) no-repeat; } #sidenavi h2#sn1 a:hover,#sidenavi h2#sn1 a:active { background: url(images/navi_ov_06.jpg) no-repeat; } /*サイドナビ2番*/ #sidenavi h2#sn2 { background: url(images/navi_12.jpg) no-repeat; } #sidenavi h2#sn2 a:hover,#sidenavi h2#sn2 a:active { background: url(images/navi_ov_12.jpg) no-repeat; } /*サイドナビ3番*/ #sidenavi h2#sn3 { background: url(images/navi_14.jpg) no-repeat; } #sidenavi h2#sn3 a:hover,#sidenavi h2#sn3 a:active { background: url(images/navi_ov_14.jpg) no-repeat; } /*サイドナビ4番*/ #sidenavi h2#sn4 { background: url(images/navi_16.jpg) no-repeat; } #sidenavi h2#sn4 a:hover,#sidenavi h2#sn4 a:active { background: url(images/navi_ov_16.jpg) no-repeat; } /*ここまでサイドナビ*/

  • CSSについて 入力フォームの上下揃い

    CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう？

  • スタイルシートの記述方法に関して。

    スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を：#wrapper ヘッダー：#header コンテンツ：#content メインコンテンツ：#main サイドコンテンツ：#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。

    • ベストアンサー
    • CSS
  • css: IEでsidebarが表示されない

    cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar（背景、画像、テキストを含むすべて）がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative; 　　　　background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px; 　　　ist-style: none; 　　　　　　　 width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}

    • ベストアンサー
    • CSS
  • CSSで文字が流れ込んでしまいます

    CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

    • ベストアンサー
    • HTML
  • 急にCSSが反映されなくなった

    質問お願いします。自社サイトの更新を担当することになったのですが、数日前まできちんとサイト上でも CSSが反映されていたのに、先日からいきなりCSSが反映されなくなり原因が分からず困っています。 当方、コードは読める位の超初心者レベルです。。 因みに、コードは下記のようになっています。（途中省略してあります）また、Dreamweaver8を使用しています。 <!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="copyright" content="Nikukyu-Punch" /> <title>自社サイト</title> <meta name="description" content="○○" /> <meta name="keywords" content="○○" /> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style2 {font-size: 16px} .style8 {color: #3366FF} .style11 {color: #b65313; font-size: 14px; } .style12 {color: #b65313} --> </style> </head> <body> <div id="container"> <div id="header"> <h1>○○</h1> <a href="index.html"><img src="images/logo1.gif" alt="○○" name="logo" width="653" height="114" id="logo" /></a></div> <!--/header--> <div id="contents"> <div id="wrap"> <div id="main"> <h2>○○</h2> <br /> <p >○○</p> <div class="item-box"><img src="images/item/3401.jpg" alt="○" width="164" height="164" /><div class="box-btn3"><a href="○"><img src="images/new1.gif" alt="new" />○○<br /> </a></div> </div> <div class="item-box"><img src="images/item/3403.jpg" alt="○○）" width="164" height="164" /> <div class="box-btn3"><a href="○○">○○</a></div> </div> </div> <!--/main--> <div id="sub"> </div> <!--/wrap--> <div id="side"> <!--/side--> <div id="footer"> Copyright(C)○○ All Rights Reserved.<br /> </div> <!--/footer--> </div> <!--/contents--> </div> <!--/container--> </body> </html> ---------------------CSS----------------------------------- @charset "shift_jis"; body { font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 90%; line-height: 2; color: #333333; margin: 0px; padding: 0px; text-align: center; } /*コンテナー ---------------------------------------------------------------------------*/ #container { text-align: left; width: 1091px; margin-right: auto; margin-left: auto; border-top: 5px solid #ff476d; background-color: #FFFFFF; } /*３カラムを囲むボックス ---------------------------------------------------------------------------*/ #contents { clear: left; width: 100%; } /*左・中央を囲むボックス ---------------------------------------------------------------------------*/ #wrap { width: 897px; float: left; padding-bottom: 50px; margin-top: 20px; } /*中央ブロック ---------------------------------------------------------------------------*/ #main { float: right; width: 703px; } #main .item-box{ foat:left; width:200px; height:300px; border:1px #CCCCCC solid; padding:5px 5px 0px 5px; float: left; margin-top: 0px; margin-right: 6px; margin-bottom: 15px; margin-left: 15px; } #main .item-box img{ /*margin: 5px 0px 5px 5px;*/ margin-left:15px; border:solid #cccccc 1px; } #main .box-btn3 { font-size:10px; color: #333333; width:164px; text-align:center; padding: 0px 0px 0px 0px; margin-left:15px; border:1px #CCCCCC solid; } /*フッター ---------------------------------------------------------------------------*/ #footer { clear: both; width: 100%; text-align: center; border-top: 1px solid #bfbfbf; padding-top: 1em; padding-bottom: 1em; } どなたかご教授頂けたら助かります

自作照明器具を販売する際の法律
このQ&Aのポイント
  • 自作照明器具の販売における法律の注意点とは？
  • 電気用品安全法に基づく販売制限と対策
  • ハンドメイドサイトでの照明器具販売におけるポイント
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する