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:
}
No.3ベストアンサー
- 回答日時:
たぶん、こういうことでしょうか。
<style>
#sample1 {
margin: auto;
width: 900px;
}
</style>
----------
質問文に書かれているこの書き方ですが、
sample1{
float:left:
}
もしBBSへの投稿時のコピーミスでなければ、これは機能していません。
#sample1
とするか、
<div class="sample1">
として、
.sample1 {}
と書かなければ行けません。
これらCSSの書き方(文法)については、解説書や解説サイトなどで確認してください。
http://htmq.com/
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>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
HTMLを上のようにして、CSSを
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
.sample1{margin-bottom:1em;}
考え方の違いで、いか様にも書くことができると思います。
ここでは、各iframeに、クラス名を付けて対応してみました。
No.2
- 回答日時:
>僕にはあまりにも高度すぎて、すみませんが何言ってるかわかりません。
と言う事は、厳しいけど・・・基礎が出来ていないということ。
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の仕様書も
聞きかじりの変な知識で回り道をすることに比べたら、遠回りのようですが、最短で身につける手段です。
No.1
- 回答日時:
配置に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&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を入れればいいんでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- CGI CGIが読み書きするデータファイルのパーミッションはさくらのインターネットでは何にするべき? 1 2023/05/02 16:44
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
html の divとtable の役割
-
HTML5 iframe の代わり
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
1時間30分を簡単に表したいで...
-
標題<h1>に、網掛けはできますか?
-
背景画像に全体または部分的に...
-
要素間、要素内に隙間が空く
-
divの中に外部のHTMLを埋め込む
-
inline-blockをネストすると表...
-
開閉式の隠し要素が一瞬表示さ...
-
html divボックスの入れ子で中...
-
スライド部分のリンクが貼れな...
-
ヘッダーとフッターだけ背景を...
-
divを追加すると下に隠れてしまう
-
HTMLの文法がめちゃくちゃらし...
-
<div id="container">の使いか...
-
IFRAMEでポートレット作成
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
HTML5 iframe の代わり
-
ヘッダーとフッターだけ背景を...
-
3カラムレイアウトで「常に残り...
-
min-heightとheightの違いについて
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
グリッドレイアウトで"auto-fit...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
iframeを使わずに上下50%ずつに...
-
html5でheaderの中にnav
-
hタグの右横に画像を表示
おすすめ情報