みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

インラインフレーム、cssの質問です。

下記の3カラムのページを練習で作っているのですが、
右端のサイドバーをインラインフレームで表示させようとしたところ
レイアウトが崩れてしまいます。
そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが
色々調べてはみたのですが
直せなくて困っています。
どなたかお分かりになる方ご回答お願いします。

HTML,CSS,インラインフレームのHTMLの順で貼っています。

HTMLソース------------------------------

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html>

<head>

<title></title>

<link rel="stylesheet" href="C:/Documents and Settings/abc/デスクトップ/gear crafter/test2.css" type="text/css" />

</head>

<body>

<div id="container">


<div id="header">
<a href=><img src="http://gearcrafter.web.fc2.com/image/testtop2.jpg" alt="" id="top" /></a></div>

<div id="headermenue">
<ul class="topmenue"><a href=><li>cart</li></a><li><a href=>about us</a></li><li><a href=>Q & A</a></li>
</ul>
</div>


<div id="side"> カテゴリ
<ul type="square" compact="compact" class="sidecate">
<li><a href=>財布</a></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li>
</ul>

</div>

<div id="main"><a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a></div>

<div id="side2">sgad<iframe src="side2.html" width="80" scrolling="no" frameborder="0"></iframe>
</div>

<div id="footer"></div>

</div>

</body>

</html>
---------------------------------------------------------------
--CSS---------------------------------------------------------

@charset "shift-jis";
/*画像*/

img { border-style:none;

}

a img { border-style:none; }


a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter: "alpha( opacity=80 )";}

/*リンク*/
a:link{
text-decoration:none;
color:#34494e;}
a:visited{
color:#34494e;}
a:hover{color:#245ba6;}
a:active{color:#245ba6;}

a { text-decoration: none; }

/*レイアウト*/
ul.topmenue {
margin-right:0px;
margin-left:auto;
width:29em;
}

ul.topmenue li {
float: right;
width: 8em;
margin-left: 5px;
padding: 2px;
border: 1px #b3bc6f solid;
background-color: #b3bc6f;
text-align: center;
}

ul.sidecate {

width: 2em;
margin-left: 1px;
margin-top: 0px;
padding: 1px;
border: 1px #b3bc6f solid;
background-color: #d8ddb6;
text-align: center;
width:194px;}

ul.sidecate li
{text-align: left;
width:194px;
}

#container {
width : 980px;
margin-left: auto;
margin-right: auto;
background-color :#222222;}
}


#header {width :960px; }
#headermenue {width : 960px;}

#side {
float: left;
margin-left: 5px;
padding-top: 5px;
width: 200px;
background-color: #b3bc6f;
text-align:center;}



#main {margin: 0px 110px 0px 220px;
width: 630px;}

#side2 {background-color: #b3bc6f;
float: right;
width: 80px;
margin-right: 5px;}

#footer {clear: both;
width: 960px;
}
---------------------------------------------------------------
--インラインフレーム----------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<?xml version="1.0" encoding="shift_jis"?>
<style type="text/css">
<!--
body {
background-color: #000000;
width:80px;
color:#ffffff;
margin-top:0px;
}
-->
</style>
<html>
<head>

</head>
<body>
test text
</body></html>

投稿日時 - 2011-10-25 00:06:26

QNo.7092623

困ってます

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

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の改良型ですから。

 さて、この問題はインラインフレームの問題ではなく、単に3カラムの設定によるものです。
 一言で言うと、floatを使ってレイアウトをするために、必然的に起こり得る問題です。すなわち、「はみ出せば回り込みが解除される。」という点です。
 floatを使う限り、『文書の順番が本来の姿(順番)から逸脱してしまう。レイアウトに文書構造が引っ張られる』『様々な解像度、ウィンドウサイズに対応しきれない』『障害者のためのアクセスビリティが失われる』という問題は必ず発生します。それを承知の上で利用してください。
 floatを使う場合は、必ずサイズの合計がコンテナブロックの内寸より小さくなるようにしなければなりません。

[参考]
floatによる段組について - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q7079628.html )

投稿日時 - 2011-10-25 19:34:00

お礼

>DOCTYPEはframesetではなく、transitinal(Loose DTD)です。

恥ずかしながら、大は小を兼ねる的なノリで使ってました。
そして沢山エラーが出ました!
基礎から一個ずつ勉強していきます。
ご教授ありがとうございました。 

投稿日時 - 2011-11-05 19:58:03

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

#side #main #side2 の3つを縦に並べたいのですかね。

まず、横幅の計算間違い
#container が 960px この中に

#side 200px + 5px
#main 630px + 110px + 220px
#side2 80px + 5px

合計 1250px なので入る訳がありませんので考え直してください。


次に文法間違い
まず、DOCTYPE 宣言ですが Frameset は使用しません。
css のカッコの対応にも間違いがあります。
インラインフレームの方は、1からやり直してください。

これらは検証サイトで確認してください。


レイアウトですが下記のような感じになると思いますので参考にしてください。

<?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>

投稿日時 - 2011-10-25 14:01:22

補足

>css のカッコの対応にも間違いがあります

どのように違うのでしょうか?
初歩的な質問ですみませんが、見当もつかないので
教えていただけたら助かります。

投稿日時 - 2011-10-25 18:12:06

あなたにオススメの質問