ブロック要素
互換モード
<style type="text/css"><!--
div.eg1 {width:300px; height:50px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
div.eg1 {width:300px; height:50px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css"><!--
div.eg1 {width:300px; height:50px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
<style type="text/css"><!--
div.eg1 {width:300px; height:50px; border:8px solid #9cf; background:#eee; padding:7px;}
--></style>
<div class="eg1">.eg1</div>
置換要素(img、input、textarea、select、object要素)
<style type="text/css"><!--
img.eg1 {width:300px; height:50px;} /* img要素 */
input.eg2 {width:150px; height:2em;} /* input="text" */
input.eg3 {width:150px; height:2em;} /* input="password" */
input.eg4 {width:30px; height:30px;} /* input="checkbox" */
input.eg5 {width:30px; height:30px;} /* input="radio" */
input.eg6 {width:100px; height:30px;} /* input="submit" */
input.eg7 {width:100px; height:30px;} /* input="reset" */
input.eg8 {width:300px; height:2em;} /* input="file" */
input.eg9 {width:90px; height:40px;} /* input="image" */
input.eg10 {width:50px; height:2em;} /* input="button" */
textarea.eg11 {width:300px; height:50px;} /* textarea要素 */
select.eg12 {width:300px; height:50px;} /* select要素 */
object.eg13 {width:300px; height:50px;} /* object要素 */
--></style>
■ img要素<br>
<img alt=".eg1" src="img/ps.png" title=".eg1" class="eg1"><br>
<br>
■ input要素<br>
<input type="text" name="account" value=".eg2" title=".eg2" class="eg2">
<input type="password" name="pw" value=".eg3" title=".eg3" class="eg3">
<input type="checkbox" name="hobby" value="h1" title=".eg4" class="eg4">
<input type="checkbox" name="hobby" value="h2" title=".eg4" class="eg4">
<input type="checkbox" name="hobby" value="h3" title=".eg4" class="eg4">
<input type="radio" name="sex" value="male" title=".eg5" class="eg5">
<input type="radio" name="sex" value="female" title=".eg5" class="eg5">
<input type="radio" name="sex" value="secret" title=".eg5" class="eg5">
<input type="submit" value="送信" title=".eg6" class="eg6">
<input type="reset" value="リセット" title=".eg7" class="eg7">
<input type="file" name="discover" title=".eg8" class="eg8">
<input type="image" src="img/submit.gif" alt=".eg9" name="foo" title=".eg9" class="eg9">
<input type="button" value="ボタン" title=".eg10" class="eg10">
<input type="button" value="No Style" title="Styleなし"><br>
<br>
■ textarea要素<br>
<textarea name="comment" title=".eg11" class="eg11">.eg11</textarea><br>
<br>
■ select要素<br>
<select size="3" title=".eg12" class="eg12">
<option>.eg12</option>
<option>Internet Explorer 7</option>
<option>Firefox 3</option>
<option>Safari 3</option>
<option>Opera 9</option>
</select><br>
<br>
■ object要素<br>
<object data="img/ps.png" type="image/jpeg" title=".eg13" class="eg13"></object>
<!--*1 select要素は、そのままだとプルダウンメニューとして表示されるため、size属性に2以上を指定してリストボックスにしています。-->
img.eg1 {width:300px; height:50px;} /* img要素 */
input.eg2 {width:150px; height:2em;} /* input="text" */
input.eg3 {width:150px; height:2em;} /* input="password" */
input.eg4 {width:30px; height:30px;} /* input="checkbox" */
input.eg5 {width:30px; height:30px;} /* input="radio" */
input.eg6 {width:100px; height:30px;} /* input="submit" */
input.eg7 {width:100px; height:30px;} /* input="reset" */
input.eg8 {width:300px; height:2em;} /* input="file" */
input.eg9 {width:90px; height:40px;} /* input="image" */
input.eg10 {width:50px; height:2em;} /* input="button" */
textarea.eg11 {width:300px; height:50px;} /* textarea要素 */
select.eg12 {width:300px; height:50px;} /* select要素 */
object.eg13 {width:300px; height:50px;} /* object要素 */
--></style>
■ img要素<br>
<img alt=".eg1" src="img/ps.png" title=".eg1" class="eg1"><br>
<br>
■ input要素<br>
<input type="text" name="account" value=".eg2" title=".eg2" class="eg2">
<input type="password" name="pw" value=".eg3" title=".eg3" class="eg3">
<input type="checkbox" name="hobby" value="h1" title=".eg4" class="eg4">
<input type="checkbox" name="hobby" value="h2" title=".eg4" class="eg4">
<input type="checkbox" name="hobby" value="h3" title=".eg4" class="eg4">
<input type="radio" name="sex" value="male" title=".eg5" class="eg5">
<input type="radio" name="sex" value="female" title=".eg5" class="eg5">
<input type="radio" name="sex" value="secret" title=".eg5" class="eg5">
<input type="submit" value="送信" title=".eg6" class="eg6">
<input type="reset" value="リセット" title=".eg7" class="eg7">
<input type="file" name="discover" title=".eg8" class="eg8">
<input type="image" src="img/submit.gif" alt=".eg9" name="foo" title=".eg9" class="eg9">
<input type="button" value="ボタン" title=".eg10" class="eg10">
<input type="button" value="No Style" title="Styleなし"><br>
<br>
■ textarea要素<br>
<textarea name="comment" title=".eg11" class="eg11">.eg11</textarea><br>
<br>
■ select要素<br>
<select size="3" title=".eg12" class="eg12">
<option>.eg12</option>
<option>Internet Explorer 7</option>
<option>Firefox 3</option>
<option>Safari 3</option>
<option>Opera 9</option>
</select><br>
<br>
■ object要素<br>
<object data="img/ps.png" type="image/jpeg" title=".eg13" class="eg13"></object>
<!--*1 select要素は、そのままだとプルダウンメニューとして表示されるため、size属性に2以上を指定してリストボックスにしています。-->
-ie7までは、チェックボックスとラジオボタンにwidth, heightプロパティが適用され拡大表示されます。ie8-とその他のブラウザでは適用されません。
