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

よろしくお願いします。

このQ&Aに関連する最新のQ&A

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

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


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

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

この回答への補足

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

了解しました。

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

このQ&Aに関連する人気のQ&A

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

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

このQ&Aと関連する良く見られている質問

Q←これをCSSでやりたい

製作しているサイトに小さい画像が沢山あります。
今までは<img src="00.gif" border="0">と普通に書いていたんですが、
なにせ画像の数が多いのでいちいち記述すると見直す際に見にくくて邪魔なんです。

この部分のborder="0"をCSSで記述し 、一括で各イメージのボーダーを0pxにする方法って何かありますか?

もちろんborder="5"と記述したらボーダーが5pxになります。

以上宜しく教えて下さい。

Aベストアンサー

img {border: none; }

Qの一括指定

ファイルの中に、<img src=** border=0>のタグが複数あり、
少しでも、ページを軽くしたいので、
cssなどを使用して、border=0というのを一括指定することは可能でしょうか?
わかる方が居りましたら、ぜひ、教えて下さい。
それでは、宜しくお願いします。

Aベストアンサー

できます
参考URLを参照(画像に枠線をつける)なさって下さい。

ただし!!
ネスケ4.7系を使用されている方々には、このCSSでは画像の周りに
青く太い線が表示されてしまいます。
もし、万人向けに作成されるのでしたら、border="0"は指定された方が
いいかと思います。

参考URL:http://www.tees.ne.jp/~maruo/webpage/css/css-html.html

Q「imgタグのwidthとheight」とリンクされている実際の画像の幅と高さが違うものを検出したい

たとえば<img src="sample.jpg" width="100" height="100">と書かれているが
実際のsample.jpgの幅と高さが99pxのように違うものを検出したい。

※Dreamweaverのデザインビューで画像をクリックして、プロパティの幅と高さを
調べるというのは画像がたくさんあると手間がかかるのでほかの方法を探しています。

ご存知の方がおられましたらご回答をよろしくお願いします。

Aベストアンサー

http://search.vector.co.jp/search?query=img+width+height&x=0&y=0
vectorので img width height を検索した結果。
こういったソフトを使うと、自動で処理してくれるのかも。
(試したわけじゃないので使い勝手とかわかりませんが)

Qborder-widthの太さ指定について

スタイルシートで、罫線の太さをborder-widthで指定しようと思うのですが、1pxより細い線を指定することは可能でしょうか?
よろしくお願いします。

Aベストアンサー

Integerとは書いてないので,文法的には間違いはないと思います。
http://www.w3.org/TR/CSS21/syndata.html#value-def-number
http://www.w3.org/TR/CSS21/syndata.html#length-units

#ただし,それが使われるかどうかは別な話ですが。

http://www.w3.org/TR/CSS21/cascade.html#actual-value

>For example, a user agent may only be able to render borders with integer pixel widths and
>may therefore have to approximate the computed width,

#消費税5%(specified value)
#外税表示で30円のものを買うと消費税は1.5円(今回の場合computed value = actual value)
#実際に消費税の扱いになるのは1円,または2円(used value)

Integerとは書いてないので,文法的には間違いはないと思います。
http://www.w3.org/TR/CSS21/syndata.html#value-def-number
http://www.w3.org/TR/CSS21/syndata.html#length-units

#ただし,それが使われるかどうかは別な話ですが。

http://www.w3.org/TR/CSS21/cascade.html#actual-value

>For example, a user agent may only be able to render borders with integer pixel widths and
>may therefore have to approximate the computed width,

#消費税5%(specified value)
#外税表示で3...続きを読む


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

おすすめ情報