- ベストアンサー
インラインフレーム、ｃｓｓの質問です。
- 下記の3カラムのページを練習で作っているのですが、右端のサイドバーをインラインフレームで表示させようとしたところレイアウトが崩れてしまいます。
- そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが色々調べてはみたのですが直せなくて困っています。
- どなたかお分かりになる方ご回答お願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
DOCTYPEはframesetではなく、transitinal(Loose DTD)です。 iframeを使うので、frameと思われたのでしょうが、仕様書の要素索引を見ればわかるはずです。 ただ、XHTML1.0の仕様書には要素索引が無いのでHTML4.01のものを見るほうが早いです。(XHTML1.0はHTML4.01と基本的に同じものですから) 要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html ) のiframeの右の欄に[L}と書かれているのは、DTDはtransitinalであるということです。 さて、HTMLやCSSはvalidatorを使えば、たちどころにエラーがわかるので詳細は書きません。 ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) など。 たくさんエラーが見つかると思いますので、詳細は割愛します。 【こんな複雑なCSSやHTMLの前にHTML,CSSの基本を、しっかりと押さえることが肝要かと思います。そのほうが早い!!】 私は、現在HTML4.01strictがメインで、XHTMLからは手を引いています。(XHTMLの将来に暗雲が立ち込めている・・・)。ウェブ標準は、HTML5(およびサブセットのXHTML5)に移行しそうですから。そしてHTML5はHTML4.01strictの改良型ですから。 さて、この問題はインラインフレームの問題ではなく、単に３カラムの設定によるものです。 一言で言うと、floatを使ってレイアウトをするために、必然的に起こり得る問題です。すなわち、「はみ出せば回り込みが解除される。」という点です。 floatを使う限り、『文書の順番が本来の姿(順番)から逸脱してしまう。レイアウトに文書構造が引っ張られる』『様々な解像度、ウィンドウサイズに対応しきれない』『障害者のためのアクセスビリティが失われる』という問題は必ず発生します。それを承知の上で利用してください。 floatを使う場合は、必ずサイズの合計がコンテナブロックの内寸より小さくなるようにしなければなりません。 [参考] floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.html )
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
#side #main #side2 の3つを縦に並べたいのですかね。 まず、横幅の計算間違い #container が 960px この中に #side 200px + 5px #main 630px + 110px + 220px #side2 80px + 5px 合計 1250px なので入る訳がありませんので考え直してください。 次に文法間違い まず、DOCTYPE 宣言ですが Frameset は使用しません。 css のカッコの対応にも間違いがあります。 インラインフレームの方は、１からやり直してください。 これらは検証サイトで確認してください。 レイアウトですが下記のような感じになると思いますので参考にしてください。 <?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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css"> #container { width: 960px; margin: 0 auto; background-color: #222222; color: #cccccc; } #headermenue { background-color: #999999; } #side { float: left; margin-left: 5px; width: 200px; background-color: #993333; height:200px; } #main { float: left; width: 670px; background-color: #666666; height:200px; } #side2 { float: left; width: 80px; margin-right: 5px; background-color: #b3bc6f; height:200px; } #footer { clear: both; background-color: #339933; } </style> </head> <body> <div id="container"> <div id="headermenue"> headermenue </div> <div id="side"> sidecate </div> <div id="main"> main </div> <div id="side2"> sgad </div> <div id="footer"> footer </div> </div> </body> </html>
補足
>css のカッコの対応にも間違いがあります どのように違うのでしょうか？ 初歩的な質問ですみませんが、見当もつかないので 教えていただけたら助かります。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
＞DOCTYPEはframesetではなく、transitinal(Loose DTD)です。 恥ずかしながら、大は小を兼ねる的なノリで使ってました。 そして沢山エラーが出ました！ 基礎から一個ずつ勉強していきます。 ご教授ありがとうございました。