サイト内検索
...スタイルシート(css)...
スタイルシート・インラインフレーム
周囲の余白
- インラインフレームの周囲の余白は、marginプロパティを指定します。
- iframe要素に指定すると、余白をつけることが出来ます。
- [使い方]
- .sample{
float: left; margin: 10px 20px;
}
- [メモ・・・W3Cの検証サービス・・・]
- iframeは、HTML 4.01 Strict ・ XHTML1.0 Strictでは推奨されていません。
- iframeをobjectに埋め込むとvalidします。
HTML・XHTMLmemo・・インラインフレームの説明・サイズをご覧ください。
プロパティ名 | 値 | 説明 |
---|---|---|
margin: | ; |
「数値+単位」(例・・100px)を指定します。
単位は、「px」・「em」など、または「%」を指定します。 auto(自動) |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
margin: | 10px; | 上下左右 の指定をします。 |
margin: | 10px 20px; | 上下・左右 の指定をします。 |
margin: | 10px 20px 30px; | 上・ 左右・下 の指定をします。 |
margin: | 10px 20px 30px 40px; | 上・右 ・下・左 の指定をします。 |
サンプル
[headの中]
<style type="text/css"><!--
iframe.sam1{
width: 200px;
height: 100px;
}
#sam2{
float: left;
margin: 10px 20px;
}
-->
</style>
[bodyの中]
<p><iframe class="sam1" src="../sample.html" id="sam2">
サンプル
</iframe>
</p>
margin:10px20px;
右側に
文字を
表示しています。
objectを指定
data="sample.html"
data・・・読み込まれるページを書きます。
<!--
#sam3{
float: left;
margin: 10px 20px;
width: 260px;
height: 100px;
}
-->
</style>
この部分は「object」タグに対応しているブラウザでご覧ください。
</object>
data・・・読み込まれるページを書きます。
[headの中]
<style type="text/css"><!--
#sam3{
float: left;
margin: 10px 20px;
width: 260px;
height: 100px;
}
-->
</style>
[bodyの中]
<object type="text/html" data="sample.html" id="sam3" name="sample">この部分は「object」タグに対応しているブラウザでご覧ください。
</object>
[ブラウザ上]
margin: 10px 20px;
右側に
文字を
表示しています。