- 締切済み
CSS で横に並べるには
CSS 初心者です。 □□ 上記のように横に表示させたいのですがうまくいきません。 <div>で方法ないものでしょうか？ つまり <CENTER> <TABLE BORDER="1"> <TR> <TD>●</TD> <TD>■</TD> </TR> </TABLE> </CENTER> のような感じです。 ●には普通にHTMLページを ■にはフレームペーを入れたいと思っています。 cssでなくてもかまいません。フレームでも可です。 ただテーブルを中央寄せ（センタリング）にしたいんです。 よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- izumi1226
- ベストアンサー率57% (4/7)
iframeにスクロールバーを出したくないということでしょうか。 そしたらこれでどうでしょう。 <iframe src="ページアドレス" scrolling="no"></iframe> スクロールしないと読みにくい、ということに関してはsanasさんに同感です。 勘違いしてたらごめんなさい。 あと、先の書き込みに補足です。 <style type="text/css"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } /*div{ */ #container {width:600px;margin:auto;} #nav {width:200px;float:left;} iframe {width:400px;} --> </style> です。 /*---*/でコメントアウトした行は不要です。 ID名（この場合は「container」「nav」）の前には#を付けて下さいね（クラスの場合は「.」をつけます） HTML部分は、このcssで作るなら <body> <div align="center"> <div id="nav"> <iframe src="http://hokuriku-shinbun.com/hidari.htm"> <!--左側のiframe--> </div> <div id="container"> <iframe src="http://yahoo.co.jp/"></iframe> <!--右側のiframe--> </div> </div> <body/> となるのでしょうか。 ちなみに、margin:auto;のみでのセンタリングは、WindowsのIE6.0ではうまく反映されない、ということがありました。中に入れる要素にもよると思うのですが…。 私の場合はこう作ります。数値や単位は適当です。すみません。 ---- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html 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"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } /*↓数値を大きくすると全体の横幅が狭くなります*/ #center { margin-right:2em; margin-left:2em; } /*↓必ず幅の数値を設定して下さい。うまく横に並ばない場合は数値を小さくしてみてください*/ #leftframe { width:200px;float:left; } #rightframe{ width:600px;float:right;} #float-clear { clear:both; } --> </style> </head> <body> <div id="center"> <div id="leftframe"> <iframe src="http://hokuriku-shinbun.com/hidari.htm"> <!--左側のiframe--> </div> <div id="rightframe"> <iframe src="http://yahoo.co.jp/"></iframe> <!--右側のiframe--> </div> <div id="float-clear"></div> </div> </body> </html> ----- まだるっこしいことをしましたが、iframeを２個横に並べたいだけならX-trail_00さんのやり方で充分だと思います。その場合は <iframe src="***.html" width="400"> などのように幅を指定したらいいと思います。 iframeと他の要素（文字や画像など）を並べたい場合は私はこう書く、ということで、参考までに。
- awasumi
- ベストアンサー率41% (23/56)
質問内容とはズレますが。 center要素は HTML 4.01 から非推奨となっており、XHTML 1.1 では破棄されました。 またcenter要素を使うのであれば、DOCTYPE宣言はHTML4.01 Transitionalです。 スタイルシートを使用しているのであれば、以下の方法でセンタリングをするほうが好ましいです。 http://www.mozilla.gr.jp/standards/webtips0004.html
- sanas
- ベストアンサー率100% (8/8)
スクロール自体は、フレーム内のページのbodyにoverflow:hiddenを指定することで消せます。 overflow-xなら横、yなら縦です。 しかし、■部分にはフレームページを入れられたいのですよね？ スクロールしないと読みにくい気がするのですが。 あと、bodyの閉じタグは</body>ですね。
- partita
- ベストアンサー率29% (125/427)
<div id="container"> <div id="nav">左側</div> <iframe src="xxx.html"></iframe> </div> #container {width:600px;margin:auto;} #nav {width:200px;float:left;} iframe {width:400px;} 簡単に作ればこんなものでしょうか。
お礼
初歩的な質問で申し訳ありません。下記のようにするのでしょうか。 スクロール線がでてしまって・・ 全体のスクロール線だけにしたいのですが・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html 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"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } div{ container {width:600px;margin:auto;} nav {width:200px;float:left;} iframe {width:400px;} --> </style> </head> <body> <div id="container"> <div id="nav">左側</div> <iframe src="http://yahoo.co.jp/"></iframe> </div> <body/>
- X-trail_00
- ベストアンサー率30% (438/1430)
<center> <iframe src="aaa.html"> <iframe src="bbb.html"> </center> これでいけます。 iframeの詳細は http://www.htmq.com/html/iframe.shtml iframeに対してCSSは可能。
お礼
下記のようにしましたらスクロール船がでてしまいまました。 全体のスクロール線だけにしたいのですが・・ お手数おかけします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html 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"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } --> </style> </head> <body> <center> <iframe src="http://hokuriku-shinbun.com/hidari.htm"> <iframe src="http://yahoo.co.jp/"> </center> <body/>
お礼
ありがとうございます。 このOKウェッブで文字変換がうまくいかないためでしょうか、上記でコピ^＆ペーストしましたら、フリーズしてしまいます。 タグなどをいじりまわして 例： <iframe src="http://hokuriku-shinbun.com/hidari.htm">" blank"> を <iframe src="http://hokuriku-shinbun.com/hidari.htm" blank"> に変更しましたがうまくいきません。 右側の高さ（height）を変えたいのですがうまくいきません。 お世話かけて申し訳ありません。