<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>タグをわざわざブロックレベル要素に変換する必要はないのでしょうか?)?
よろしくお願いします。
No.3ベストアンサー
- 回答日時:
個人的には、素材をなるべくあるがままに利用するほうが良いと思いますよ。
私がやるなら<div>でくくってinline要素をtext-alignでセンタリングします。
ただ、imgのブロック要素化については間違いとは言えないので、「そういうやり方もある」
という認識でよいと思います。
実際、tableのセンタリングなんかはmargin:autoとtext-align:centerを
併用して今回の案件にちかいような処理をいれますしね。
ただ、姑息な手段というのは、オーソライズされる際に、はじかれてしまう
可能性があるため、盲信すると思わぬところでほころびがでるということです。
No.2
- 回答日時:
>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>
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
HTMLの文章中の画像のベースラ...
-
画像リンクの枠線の消し方
-
画像リンクの周りに線が出ます
-
フォームのボタンをsubmitから...
-
htmlで画像を2個ずつ並べていき...
-
css:リンク画像の枠消し: a i...
-
スペーサーの透過GIFの大きさ指...
-
htmlの文字が縦書きになる
-
Macで画像の切り抜きできないの?
-
CSSのクラス名・ID名の指定でワ...
-
画像イメージの上下左右、欲し...
-
html/cssの、navを2段にする...
-
【ヒトの神秘】美男美女から何...
-
複数のボタンを等間隔に、かつ...
-
smallにtext-allignが効かない
-
HTML属性での「""」 「''」違い
-
<div align="center">を使わず...
-
改行ほどは行かないけど、若干...
-
Media Queries 4 で 非推奨とな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
HTMLのIMAGEに。。
-
inputタグでサーバにデータを送...
-
UDP通信を使うチャットプログラ...
-
画像の場合のみ、下線を消す方...
-
画像のサイズが変わらない
-
機種依存文字、m2(平方メート...
-
XML画像データををHTMLで簡単に...
-
画像をクリックして元に戻すには
-
Dreamweaverで画像⇔画像のアン...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
下記が私のHPのタグなのですが
-
同一URLの連続アクセス方法
-
アップロードするとレイアウト...
-
HTMLタグのDL DT DDを使ってli...
-
ルートパスの動作確認
-
htmlで画像を2個ずつ並べていき...
-
画像リンクの周りに線が出ます
おすすめ情報