以前質問させていただいたのですが人の少ない時間でしたので、再度させていただきます。

ホームページ作成に関してはまるっきり独学なので、もしかしたらくだらないことなのかもしれませんが、二つほど質問させていただきます。

まずiframeタグに関してです。
ifameタグでhspace=0とすれば、ブラウザを小さくしたときに左端に隙間ができないと思ったのですが、どうしても2ミリぐらいの隙間があいてしまいます。タグの部分はこんな感じです。
<iframe height="800" width="600" frameborder="0" src="**.html" align="center" hspace=0>
もう少し細かい情報が必要でしたら、その都度補足いたします。

あともう一つですが、align="center"と指定していてもGecko系だと中央に表示されないのですが(IEは大丈夫でした)、これは仕様なのでしょうか?
一応今はcenterタグでなんとかしてはいるのですが。

少しでもわかることがあったら、どんなことでも良いので教えていただけたら幸いです。よろしくお願いします。

A 回答 (2件)

ANo.1です、すみません、下の回答に間違いがあります。



<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
body {padding:0;margin:0;text-align:center;}
iframe {border:red 1 solid;padding:0;margin-left:0;}</style>

↑だと、赤い枠線がでてしまいますので、↓にしてください。

<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
body {padding:0;margin:0;text-align:center;}
iframe {border:0;padding:0;margin-left:0;}</style>
    • good
    • 0
この回答へのお礼

回答していただきどうもありがとうございます。
言われてみれば、スタイルシートはまだ全く試してませんでした。

回答の通りにしてみたところ、IEの方でうまくいったので何が原因なのかいろいろと実験してみたところ、要するにbodyのマージンが余白になってしまっていたようです。
ただしFireFoxの方では余白があいてしまいましたので、その後また少し調べてみたところ、
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
で解決いたしました。

お礼日時:2008/04/16 20:12

スタイルシートを使った方が良いと思います。


このページで説明しきれるものじゃないので、指南サイトをご覧になるか、書籍の購入をお勧めします。

今回の件に限っては、「head」と「/head」の間に↓三行を加え、さらにiframeタグを下のように変えてみてください。

<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
body{padding:0;margin:0;text-align:center;}
iframe{border:red 1 solid;padding:0;margin-left:0;}</style>


<iframe height="800" width="600" frameborder="0" src="**.html" align="center" hspace=0>

<iframe height="800" width="600" src="**.html">
    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qスタイルシートでフレーム枠を隙間なくピタリとつける。

よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" />
<p><img src="images/top/event.png" width="220" height="20" /></p>
</div>


【css】
#subnavibar {
width: 240px;
float: left;
background-color: #ffffff;
height: 100%;

}


原因としては、何があるでしょうか?

よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" w...続きを読む

Aベストアンサー

> 原因としては、何があるでしょうか?
「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。

1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="20" /><BR><BR>赤のバーがピッタリとくっつきません。</p>
</div>

2. vertical-align:bottom; を指定する
<style type="text/css">
img,iframe { vertical-align:bottom; }
</style>

Export-Japan Blog » Blog Archive » IEで、画像の下に隙間ができたり、逆に隙間がバラバラだったり
http://www.export-japan.co.jp/blog/2007/06/21/ie%E3%81%A7%E3%80%81%E7%94%BB%E5%83%8F%E3%81%AE%E4%B8%8B%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%9F%E3%82%8A%E3%80%81%E9%80%86%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E3%83%90%E3%83%A9/

> 原因としては、何があるでしょうか?
「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。

1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="...続きを読む

Qインラインフレームの表示位置を指定したい

インラインフレーム自体の表示位置を指定したいと思っています。
ページの大きさに対して中央に、
インラインフレームのページを表示したいと思っているのですが、

横位置は、ALIGN="center"を使って指定出来きましたが、
縦位置の指定が出来ないでいます。

色々と検索してみたのですが、
もしかしたら出来ないのでは。。。とも思っています。
ですが、Web上には中央に配置されるページとかもあるので、
出来ないはずはないのですが、
タグをみても量がおおくてわかりません^^;

恐れ入りますがよろしくおねがいしますm(__)m

Aベストアンサー

高さと幅が固定されていれば、以下のcssが有効のようです。
<style type="text/css">
<!--
#center{
height:200px;
width:500px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-250px;
border:solid 1px #666666;
}
-->
</style>

<iframe src="" name="" id="center">
インラインフレームを使用しています。
</iframe>

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Qインラインフレームの横スクロールの非表示

インラインフレームの横スクロールの非表示ってどうやるのでしようか?縦のスクロールのみを表示させたいのですが,,,scrolling marginwidth="no" って入れてもだめでした

Aベストアンサー

No.5です。
すみません、言い方が悪かったので再回答します。

inline.htmlをテキストエディタで開いて、
<html>を<html lang="ja" style="overflow-x:hidden;">
(「lang="ja"」はなくても構いません)に書き換えてみて下さい。

inline.htmlの中身を編集してください、ということです。

Qインラインフレーム内の表示位置を修正できません

インラインフレーム内の表示位置を修正できません

 <iframe src="~.php" align="top" frameborder="1" scrolling="no" width="177" height="100" hspace="0" vspace="0" marginwidth="0"></iframe>

というソースでインラインフレーム内に、アンカータグの列(phpで生成)を表示させたいのですが、
このアンカータグの列の表示位置が、インラインフレームの左上端から中央(右下)方向にずれてしまいます。

<iframeフレームの設定をあれこれ修正してみたのですが、うまくいくません。
解決策をどうか教えてください。

Aベストアンサー

まずは、スタイルシートの終了タグが抜けているのを修正し、マージン、パディング0をtable formにも指定いてください。
<style type="text/css">
<!--
#an1{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
-->

    ↓↓↓↓↓ ※下のように変更する

<style type="text/css">
<!--
body, table, form {
margin: 0px;
padding: 0px;
}

#an1{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
-->
</style>

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qiframeのスクロールバー非表示

html5、css2.1で作成していますが
スクロールバーを非表示にするのに
scrolling=noにしようと思ったら
html5では有効でなくなったようなので
html5で消す場合はどうしたらよいのか
教えていただけましたら幸いです。

Aベストアンサー

HTML5より追加された<frame>タグで対応できませんでしょうか?
http://www.htmq.com/html/frame.shtml

参考URL:http://www.htmq.com/html/frame.shtml

Qiframeで、右側に余分な空白ができる

HMTLのiframeで、右側に余分な空白ができます。
padding-rightで余白を詰められると思ったのですが、詰まりません。
詰める方法はないでしょうか?

■呼び出し元
<html>
<body>
<iframe src="./frame.html"
width="310" style="padding-right:0px;">
</iframe>
</html>

■呼び出される側
<html>
あああああああああああああああああああああ<br>
あああああああああああああああああああああ<br>
</html>

Aベストアンサー

私はiframeは、transitionalなので使いませんが、単純に呼び出されるHTML側のスタイルに従うだけです。
[埋め込まれるHTML]http:は、httP:に置換してあるので戻すこと。

<!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">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
html,baody,p{margin:0;padding:0;background-color:gray;}
p{line-height:1.4em;text-indent:1em;background-color:yellow;}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、わゐうゑを</p>
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、わゐうゑを</p>
</body>
</html>
div{overflow:auto;}
なら、staticなので、お勧めです。

私はiframeは、transitionalなので使いませんが、単純に呼び出されるHTML側のスタイルに従うだけです。
[埋め込まれるHTML]http:は、httP:に置換してあるので戻すこと。

<!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">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link...続きを読む

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報