- ベストアンサー
CGIをiframeで読み込んだ物に間隔を空けたい
- HTMLでホームページを作っています。CGIをDLし、HTMLの中にiframeで読み込むことに成功しました。しかし、2つのCGIが画面を分割して表示されてしまいます。そこで、float:leftを使用してCGIをdivで囲み、2つ目のCGIを最初のCGIの下に表示させました。
- しかし、この表示ではCGIの間隔が正しく設定されず、中央に寄せることができません。marginを使用しても間隔は空けられません。他の方法を探しています。
- なにか他の方法で2つのCGIを同じ間隔で中央に寄せる方法はありますか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
たぶん、こういうことでしょうか。 <style> #sample1 { margin: auto; width: 900px; } </style> ---------- 質問文に書かれているこの書き方ですが、 sample1{ float:left: } もしBBSへの投稿時のコピーミスでなければ、これは機能していません。 #sample1 とするか、 <div class="sample1"> として、 .sample1 {} と書かなければ行けません。 これらCSSの書き方（文法）については、解説書や解説サイトなどで確認してください。 http://htmq.com/
その他の回答 (3)
<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)
＞僕にはあまりにも高度すぎて、すみませんが何言ってるかわかりません。 と言う事は、厳しいけど・・・基礎が出来ていないということ。 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)
配置に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"> <!-- body{ background-color:gray;/* bodyの背景gray */ } div.header,div.section,div.footer{/* header,section,footerの指定 */ width:80%;/* 幅はwindowの80% */ margin:0 auto;/* 上下0、左右自動 */ padding:5px; background-color:silver;/* 背景はシルバー */ } p{ margin:0;/* 日本語用に段落間のマージンを消し */ line-height:1.8em;/* 日本語は字が大きいので行間を広げて */ text-indent:1em;/* 段落で字下げ */ } /* ここから!!! */ div.article iframe{ display:block; width:90%; margin:0 auto; } --> ＿</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>
補足
回答ありがとうございます。 ORUKA1951さんには、前にもCSSの件について助けてもらった事があると思います。 ORUKA1951の丁寧な回答を何回も読み直したのですが、 僕にはあまりにも高度すぎて、すみませんが何言ってるかわかりません。 どこがわかんない？ってもし聞かれたとしても、わかんないところがわかんないと言ってしまいそうです。 とりあえず、わかったことは、floatと使うなってことと、そんなことしなくてもブロック要素で囲みさえすれば、自然に別れるってことだと思います。 そしてsample1の中にmargin:0 autoを入れればいいんでしょうか？
補足
すみません、書き込みミスで#を付けるの忘れてました。 回答ありがとうございます。 無事真ん中に寄せることができました。