<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>タグをわざわざブロックレベル要素に変換する必要はないのでしょうか?)?

よろしくお願いします。

A 回答 (3件)

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



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

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

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

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

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

了解しました。

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

>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>

補足日時:2008/02/25 18:01
    • good
    • 0

スタイルはそれで大丈夫だよ。


ただ、imgはinlineだからblock化すると変な事になるよ。

http://rikiy.jp/report/css/20070220.html

この回答への補足

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

了解しました。

補足日時:2008/02/25 17:51
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

今、見られている記事はコレ!

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる

このQ&Aを見た人が検索しているワード


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ