プロが教える店舗&オフィスのセキュリティ対策術

HTMLでホームページを作ってます。
ホームページの中にチャットを作ろうと思いCGIをDLし、HTMLの中にiframe文で読み込むことに成功しました。
その際、iframeで読み込むCGIが2つあり、画面が2つに別れてしまうのが嫌で、iframeをdivで囲み、
folat:leftで回り込ませ、最初のiframeの下に2つ目の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:
}

A 回答 (4件)

たぶん、こういうことでしょうか。



<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
    • good
    • 0

<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>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
HTMLを上のようにして、CSSを
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
.sample1{margin-bottom:1em;}

考え方の違いで、いか様にも書くことができると思います。
ここでは、各iframeに、クラス名を付けて対応してみました。
    • good
    • 0

>僕にはあまりにも高度すぎて、すみませんが何言ってるかわかりません。


 と言う事は、厳しいけど・・・基礎が出来ていないということ。
 HTML/CSSなんて、お馬鹿な機械に文書の内容/デザインをわからせるための方法ですから、小説を読むより楽なはず。
>そんなことしなくてもブロック要素で囲みさえすれば、自然に別れるってことだと思います。
 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )の区別は、基本中の基本です。リンク先は読みなさいよ!!・・No.1の回答に書かれているリンク先も

 決して間違えてほしくないのは「分けるためにブロックで囲む」のじゃなく、「別のブロックであることをマークアップする」・・・このふたつ、結果は同じでもまったく違う!!!

 私がNo.1で書いたHTMLの<body>~</body>内、誰--機械が見ても、どこが文書のヘッダ、フッタ、本文(section)、完結した記事(article)かわかるでしょ。難しいとは言わせない!!くらい簡単明瞭だと思います。再確認すること

 別々にチャット記事を読み込んでいるのですから、ブロックで囲まないとならないからブロックで囲んでいるのです。iframeが行内要素であることは、仕様書に
「<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow -->( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
 「inline(行内) subwindow(サブウィンドウ)」と書かれている。

>中央に・・
 ⇒8.3 マージンのプロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 ブロック要素はマージンを持ちえますが、その指定はmargin-top,margin-right,margin-bottom,margin-leftのプロパティで指定します。marginは簡略化プロパティで一括して指定できます。
 ⇒'margin'( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
'margin'
  値:     <margin-width>{1,4} | inherit
     幅を{1個から4個}の長さで指定、もしくはinherit(継承)の指定
  初期値:   個々のプロパティを参照

  適用対象:  table-caption、table、inline-table以外のテーブルdisplayタイプを持つ要素を除くすべての要素

  継承:    no
     継承しない
  パーセンテージ: 包含ブロックを含む幅を参照
  メディア:  visual

★急がば回れ・・・
 まずHTML4.01の仕様書は一通り目を通しておくこと
 ついで、CSS2.1の仕様書も
  聞きかじりの変な知識で回り道をすることに比べたら、遠回りのようですが、最短で身につける手段です。
    • good
    • 0

配置にfloatを使うべきではない。

崩れる元です。
iframeは行内要素ですから、必ずブロック要素DIVやPなどブロックで囲みます。それで嫌でも二段になる。
これってclass名は、articleのほうが良さそう。class名は『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )を流用すると良い。

 そのブロックの中央寄せは、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が2つあり、画面が2つに別れてしまうのが嫌で、iframeをdivで囲み、folat:leftで回り込ませ、最初のiframeの下に2つ目のiframeで読み込んだ物が来るようにしました。
__</p>
__<p>
___これでいちお、成功したと思ってるのですが、できればこれらを同じ間隔で中央に寄せたいのですが,marginで間隔を空けようとしても空くことができません。
__</p>
__<div class="article">
___<iframe title="投稿" name="form" src="./comchat.cgi?mode=form&amp;nam=&amp;eml=&amp;col=&amp;retime=40&amp;line=20" width="900" height="200"><a href="./comchat.cgi?mode=form&amp;nam=&amp;eml=&amp;col=&amp;retime=40&amp;line=20">フレーム非対応なら</a></iframe>
__</div>
__<div class="article">
<iframe title="記録" name="log" src="./comchat.cgi?retime=40&amp;line=20" width="900" height="800"><a href="./comchat.cgi?mode=form&amp;nam=&amp;eml=&amp;col=&amp;retime=40&amp;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>&copy; ORUKA1951 2013 - 2018 All Rights Reserved</address>
_</div>
</body>
</html>

この回答への補足

回答ありがとうございます。
ORUKA1951さんには、前にもCSSの件について助けてもらった事があると思います。


ORUKA1951の丁寧な回答を何回も読み直したのですが、
僕にはあまりにも高度すぎて、すみませんが何言ってるかわかりません。

どこがわかんない?ってもし聞かれたとしても、わかんないところがわかんないと言ってしまいそうです。
とりあえず、わかったことは、floatと使うなってことと、そんなことしなくてもブロック要素で囲みさえすれば、自然に別れるってことだと思います。

そしてsample1の中にmargin:0 autoを入れればいいんでしょうか?

補足日時:2014/04/13 20:21
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!