サイト内検索
...スタイルシート(css)...
スタイルシート・インラインフレーム
文字の位置
- 文字の位置の上下は、vertical-alignプロパティを指定します。
- [使い方]
- .sample{
vertical-align: baseline;
}
- [メモ・・・W3Cの検証サービス・・・]
- HTML 4.01 Strict ・ XHTML1.0 Strictでは、推奨されていません。
- iframeをobjectに埋め込むとvalidします。
HTML・XHTMLmemo・・インラインフレームの説明・サイズをご覧ください。
プロパティ名 | 値 | 説明 |
---|---|---|
vertical-align : | baseline; |
インラインフレームの下端と
親要素のベースラインを揃えます。 (初期値) |
top; | インラインフレームの上端と行の上端を揃えます。 | |
middle; | インラインフレームの中央と
親要素の小文字「x」の中心を揃えます。 |
|
bottom; | インラインフレームの下端と
行の下端を揃えます。 |
|
text-top; | インラインフレームの上端と
親要素のフォントの上端を揃えます。 |
|
text-bottom; | インラインフレームの下端と
親要素のフォントの下端を揃えます。 |
|
; |
「数値+単位」(例・・100px)を指定します。
単位は、「px」・「em」などを指定します。 任意の位置に揃えます。 正の値は上の方向・負の値は下の方向へ |
|
%; |
任意の位置に揃えます。
正の値は上の方向・負の値は下の方向へ |
サンプル
[headの中]
<style type="text/css"><!--
iframe.sam1{
width: 260px;
height: 100px;
}
#sam2{
vertical-align: middle;
}
#sam3{
vertical-align: -10px;
}
#sam4{
vertical-align: 150%;
}
-->
</style>
[bodyの中]
<p>
<iframe class="sam1" src="../sample.html" frameborder="0" id="sam2">
サンプル
</iframe>
middle
</p>
<p>
<iframe class="sam1" src="../sample.html" id="sam3">
サンプル
</iframe>
-10px
</p>
<p>
<iframe class="sam1" src="../sample.html" frameborder="0" id="sam4">
サンプル
</iframe>
150%
</p>
objectを指定
[bodyの中]
data="sample.html"data・・・読み込まれるページを書きます。
[bodyの中]
<object type="text/html" data="sample.html"style="width: 260px; height: 100px;" name="sample" id="sam3">
この部分は「object」タグに対応しているブラウザでご覧ください。
</object>
middle
<object type="text/html" data="sample.html"
style="width: 260px; height: 100px;" name="sample" id="sam4">
この部分は「object」タグに対応しているブラウザでご覧ください。
</object>
-10px
<object type="text/html" data="sample.html"
style="width: 260px; height: 100px;" name="sample" id="sam5">
この部分は「object」タグに対応しているブラウザでご覧ください。
</object>
150%
[ブラウザ上]
middle-10px
150%