<img>タグCSS使用時及び未使用時の表記の違い？

解決済

質問者：kitty1000
質問日時：2008/02/25 17:05
回答数：3件

<img>タグにスタイルシートを使用した場合と使用しない場合の表記の違いに関する質問です。

スタイルシートを使用しない場合：
<img src="example.jpg" width="100" height="150" border="0">

上記の設定をスタイルシートを使用して行なおうとする場合、下記の記載でよいのでしょうか？
スタイルシートを使用した場合：
.abc {
width:100px;
height:150px;
border:0px;
}
<img class="abc" src="example.jpg">

また、この場合.abcの中のスタイルの指定にdisplay:block;は必要ないのでしょうか（<img>タグをわざわざブロックレベル要素に変換する必要はないのでしょうか？）?

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2008/02/25 18:18

個人的には、素材をなるべくあるがままに利用するほうが良いと思いますよ。

私がやるなら<div>でくくってinline要素をtext-alignでセンタリングします。

ただ、imgのブロック要素化については間違いとは言えないので、「そういうやり方もある」
という認識でよいと思います。

実際、tableのセンタリングなんかはmargin:autoとtext-align:centerを
併用して今回の案件にちかいような処理をいれますしね。

ただ、姑息な手段というのは、オーソライズされる際に、はじかれてしまう
可能性があるため、盲信すると思わぬところでほころびがでるということです。

- 0
- 件

通報する

この回答へのお礼

yambejpさん
ご回答、ありがとうございました。

了解しました。

通報する

お礼日時：2008/02/25 18:21

No.2

回答者： yambejp
回答日時：2008/02/25 17:39

>display:block;は必要ないのでしょうか

曲解してませんか？

・imgはinline要素
・質問者さんが本来inline要素のimgがtdで左寄せになるものを無理にセンタリングしたいというので、
前回の回答でブロック要素でやる方法を紹介した。
・block要素化したimgがmargin:autoでセンタリングされないのも、
text-align:center;でセンタリングされるのもIE6のバグ。

切り分けて考えてください

この回答への補足

yambejpさん
ご回答ありがとうございました。
>block要素化したimgがmargin:autoでセンタリングされないのも、
>text-align:center;でセンタリングされるのもIE6のバグ。
上記のご意見を考慮すると、<td align="left"></td>内の<img>
タグをセンタリングするには、やはり、<div></div>で<img>タグを囲んで、
<head>
<style type="text/css">
.abc{
text-align:center;
margin-top:10px;
margin-bottom:10px:
}
</style>
</head>
<table border="4" width="250">
<tr>
<td align="left">
<div class="abc">
<img src="example.jpg" width="100" height="100" borde="0">
</div>
</td>
</tr>
</table>
などとするほうが、yambejpさんに教えてもらった、下記の<img>タグをdisplay:block;でブロックレベル要素化する方法よりもよいのでしょうか？

<html>
<head>
<style type="text/css">
.abc{
display:block;
text-align:center;
margin:auto;
width:100px;
height:100px;
border:0px;
}
</style>
</head>
<body>
<table border="4" width="250">
<tr>
<td align="left">
<img class="abc" src="example.jpg">
</td>
</tr>
</table>
</body>
</html>