- ベストアンサー
<img>タグCSS使用時及び未使用時の表記の違い？
<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）
- 専門家の回答
質問者が選んだベストアンサー
個人的には、素材をなるべくあるがままに利用するほうが良いと思いますよ。 私がやるなら<div>でくくってinline要素をtext-alignでセンタリングします。 ただ、imgのブロック要素化については間違いとは言えないので、「そういうやり方もある」 という認識でよいと思います。 実際、tableのセンタリングなんかはmargin:autoとtext-align:centerを 併用して今回の案件にちかいような処理をいれますしね。 ただ、姑息な手段というのは、オーソライズされる際に、はじかれてしまう 可能性があるため、盲信すると思わぬところでほころびがでるということです。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
>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>
- SAYKA
- ベストアンサー率34% (944/2776)
スタイルはそれで大丈夫だよ。 ただ、imgはinlineだからblock化すると変な事になるよ。 http://rikiy.jp/report/css/20070220.html
補足
SAYKAさん ご回答ありがとうございました。 了解しました。
お礼
yambejpさん ご回答、ありがとうございました。 了解しました。