CGIをiframeで読み込んだ物に間隔を空けたい

2023/09/05 16:32

このQ&Aのポイント

HTMLでホームページを作っています。CGIをDLし、HTMLの中にiframeで読み込むことに成功しました。しかし、2つのCGIが画面を分割して表示されてしまいます。そこで、float:leftを使用してCGIをdivで囲み、2つ目のCGIを最初のCGIの下に表示させました。
しかし、この表示ではCGIの間隔が正しく設定されず、中央に寄せることができません。marginを使用しても間隔は空けられません。他の方法を探しています。
なにか他の方法で2つのCGIを同じ間隔で中央に寄せる方法はありますか？

ベストアンサー

CGIをiframeで読み込んだ物に間隔を空けたい

2014/04/13 19:26

HTMLでホームページを作ってます。ホームページの中にチャットを作ろうと思いCGIをDLし、HTMLの中にiframe文で読み込むことに成功しました。その際、iframeで読み込むCGIが２つあり、画面が２つに別れてしまうのが嫌で、iframeをdivで囲み、 folat:leftで回り込ませ、最初のiframeの下に２つ目のiframeで読み込んだ物が来るようにしました。これでいちお、成功したと思ってるのですが、できればこれらを同じ間隔で中央に寄せたいのですが,marginで間隔を空けようとしても空くことができません。他に方法が無いかと思い質問させていただきました。下記プログラムです。　ちなみにCGIソース元はkentさんのところです。http://www.kent-web.com/chat/ <div id=sample1> <iframe name="form" src="./comchat.cgi?mode=form&nam=&eml=&col=&retime=40&line=20" width="900" height="200"></iframe> <iframe name="log" src="./comchat.cgi?retime=40&line=20" width="900" height="900"></iframe> </div> </body> sample1{ float:left: }

nomnom20
お礼率17% (7/39)

HTML
回答数4
ありがとう数6

みんなの回答 （4）
専門家の回答

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

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2014/04/14 16:51 回答No.3

たぶん、こういうことでしょうか。 <style> #sample1 { margin: auto; width: 900px; } </style> ---------- 質問文に書かれているこの書き方ですが、 sample1{ float:left: } もしBBSへの投稿時のコピーミスでなければ、これは機能していません。 #sample1 とするか、 <div class="sample1"> として、 .sample1 {} と書かなければ行けません。これらCSSの書き方（文法）については、解説書や解説サイトなどで確認してください。 http://htmq.com/

質問者

補足 2014/04/20 01:21

すみません、書き込みミスで#を付けるの忘れてました。回答ありがとうございます。無事真ん中に寄せることができました。

その他の回答 (3)

noname#206842

2014/04/18 00:04 回答No.4

<div id="sample1"> <iframe class="sample1" name="form" src="./comchat.cgi?mode=form&nam=&eml=&col=&retime=40&line=20" width="900" height="200"></iframe> <iframe class="sample2" name="log" src="./comchat.cgi?retime=40&line=20" width="900" height="900"></iframe> </div> ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ＨＴＭＬを上のようにして、CSSを ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ .sample1{margin-bottom:1em;} 考え方の違いで、いか様にも書くことができると思います。ここでは、各iframeに、クラス名を付けて対応してみました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/04/14 08:53 回答No.2

＞僕にはあまりにも高度すぎて、すみませんが何言ってるかわかりません。　と言う事は、厳しいけど・・・基礎が出来ていないということ。　HTML/CSSなんて、お馬鹿な機械に文書の内容/デザインをわからせるための方法ですから、小説を読むより楽なはず。＞そんなことしなくてもブロック要素で囲みさえすれば、自然に別れるってことだと思います。　ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )の区別は、基本中の基本です。リンク先は読みなさいよ!!・・No.1の回答に書かれているリンク先も　決して間違えてほしくないのは「分けるためにブロックで囲む」のじゃなく、「別のブロックであることをマークアップする」・・・このふたつ、結果は同じでもまったく違う!!! 　私がNo.1で書いたHTMLの<body>～</body>内、誰--機械が見ても、どこが文書のヘッダ、フッタ、本文(section)、完結した記事(article)かわかるでしょ。難しいとは言わせない!!くらい簡単明瞭だと思います。再確認すること　別々にチャット記事を読み込んでいるのですから、ブロックで囲まないとならないからブロックで囲んでいるのです。iframeが行内要素であることは、仕様書に「<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow -->( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#edef-IFRAME )」　「inline(行内) subwindow(サブウィンドウ)」と書かれている。＞中央に・・　⇒8.3 マージンのプロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#margin-properties ) 　ブロック要素はマージンを持ちえますが、その指定はmargin-top,margin-right,margin-bottom,margin-leftのプロパティで指定します。marginは簡略化プロパティで一括して指定できます。　⇒'margin'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#propdef-margin ) 'margin' 　　値:　　　　　<margin-width>{1,4} | inherit 　　　　　幅を{1個から4個}の長さで指定、もしくはinherit(継承)の指定　　初期値:　　　個々のプロパティを参照　　適用対象:　　table-caption、table、inline-table以外のテーブルdisplayタイプを持つ要素を除くすべての要素　　継承:　　　　no 　　　　　継承しない　　パーセンテージ:　包含ブロックを含む幅を参照　　メディア:　　visual ★急がば回れ・・・　まずHTML4.01の仕様書は一通り目を通しておくこと　ついで、CSS2.1の仕様書も　　聞きかじりの変な知識で回り道をすることに比べたら、遠回りのようですが、最短で身につける手段です。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/04/13 20:02 回答No.1

配置にfloatを使うべきではない。崩れる元です。 iframeは行内要素ですから、必ずブロック要素DIVやPなどブロックで囲みます。それで嫌でも二段になる。これってclass名は、articleのほうが良さそう。class名は『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』です。HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を流用すると良い。　そのブロックの中央寄せは、margin:0 autoです。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済み ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>Untitled</title> ＿<meta name="author" content="IRUKA"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>title</h1> ＿</div> ＿<div class="section"> ＿＿<h2>section Title</h2> ＿＿<p> ＿＿＿その際、iframeで読み込むCGIが２つあり、画面が２つに別れてしまうのが嫌で、iframeをdivで囲み、folat:leftで回り込ませ、最初のiframeの下に２つ目のiframeで読み込んだ物が来るようにしました。＿＿</p> ＿＿<p> ＿＿＿これでいちお、成功したと思ってるのですが、できればこれらを同じ間隔で中央に寄せたいのですが,marginで間隔を空けようとしても空くことができません。＿＿</p> ＿＿<div class="article"> ＿＿＿<iframe title="投稿" name="form" src="./comchat.cgi?mode=form&nam=&eml=&col=&retime=40&line=20" width="900" height="200"><a href="./comchat.cgi?mode=form&nam=&eml=&col=&retime=40&line=20">フレーム非対応なら</a></iframe> ＿＿</div> ＿＿<div class="article"> <iframe title="記録" name="log" src="./comchat.cgi?retime=40&line=20" width="900" height="800"><a href="./comchat.cgi?mode=form&nam=&eml=&col=&retime=40&line=20">フレーム非対応なら</a></iframe> ＿＿</div> ＿</div> ＿<div class="footer" id="DOCUMENT_INFORMATION"> ＿＿<dl class="document-version"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2014-04-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2013 - 2018 All Rights Reserved</address> ＿</div> </body> </html>

質問者

補足 2014/04/13 20:21

回答ありがとうございます。 ORUKA1951さんには、前にもCSSの件について助けてもらった事があると思います。 ORUKA1951の丁寧な回答を何回も読み直したのですが、僕にはあまりにも高度すぎて、すみませんが何言ってるかわかりません。どこがわかんない？ってもし聞かれたとしても、わかんないところがわかんないと言ってしまいそうです。とりあえず、わかったことは、floatと使うなってことと、そんなことしなくてもブロック要素で囲みさえすれば、自然に別れるってことだと思います。そしてsample1の中にmargin:0 autoを入れればいいんでしょうか？