BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

width,height属性からの脱却

width,height属性では、ブロック要素の横幅及び縦幅を指定することができます。しかしこれらの情報は、例えば音声ブラウザにとっては全く意味を為しません。

これらは、スタイルシートで指定することができます。

p{ width:500px; }

単位には、px(ピクセル)または%(パーセント)が適当です。

widthプロパティを指定する際には、表示モードに注意する必要があります。標準モードではW3Cの仕様に従って内容域の横幅と解釈され、実際の横幅はこれにpadding及びborder-widthを加えた値であるのに対し、互換モードではpadding及びborder-widthの値を含んでしまいます(*1)

標準モードでも互換モードでも同じ横幅で表示させるには、次のようにスタイルシートを適用すると良いでしょう。

HTMLソース
<div class="box">
<p>横幅を指定したい段落</p>
</div>
スタイルシート
div.box{ width:500px; }
p{ padding:10px; border:1px solid; }

外側のブロック要素に横幅を指定し、内側のブロック要素にパディング及び罫線を指定します。同一の要素に両方同時に指定しないのがコツです。

heightプロパティは指定しない方が良いでしょう。ユーザー側でフォントのサイズを大きくするなどが原因で内容がボックス内に収まらなかった場合、Internet Explorerではheightの値が補正されますが、他の視覚系ブラウザでは値を補正せずに内容がボックスからはみ出して表示されてしまいます(*2)

(*1)
widthを400px、左右のpaddingを10px、左右のborder-widthを1pxと指定した場合における実際のボックスの横幅は、互換モードでは400pxであるのに対し、標準モードでは左右のpaddingとborder-widthの値が加わり422pxとなります。標準モードでの横幅を400pxとするには、左右のpaddingとborder-widthの値を引いてwidthを378pxと指定する必要があります。
(*2)
W3Cの仕様では、ボックスの幅や高さを補正する必要はありません。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。