![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
imgタグについて
http://oshiete.goo.ne.jp/qa/5970749.html
この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。
最初のタグーーーーーーーー
img{border: 0; vertical-align:bottom;}
ーーーーーーーーーーーーー
<img src="/img/space.gif" width="100%" height="10px"/>
IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。
↓そこで、このように分ければいいとアドバイスいただきましたが、
.img1{border: 0;}
.img2{border: 0; vertical-align:bottom;}
imgタグは他のページでも使用しているため
img{border: 0; vertical-align:bottom;}は変更出来ませんでした。
そこで、img2{border : 0;} とcssに書き込み
<img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" />
にするとバグは解消されました。
ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか?
もし他に方法がございましたら教えてください。
【css】--------------------------
img {
border: 0;
vertical-align:top;
}
.img1 {
border: 0;
}
【html】--------------------------
<table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999">
<tr>
<td width="635">タイトル</td>
</tr>
</table>
<table width="635" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td>
</tr>
<tr>
<td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td>
<td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td>
<td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン -->
</td>
</tr>
</table>
No.1ベストアンサー
- 回答日時:
>imgタグは他のページでも使用しているため
???
セレクタや疑似要素疑似要素を正しく設定すれば、特定の要素に対してプロパティを設定できます。
・セレクタ
全称セレクタ
タイプセレクタ
子孫セレクタ
子供セレクタ
隣接セレクタ
属性セレクタ
一意セレクタ
・擬似要素と擬似クラス
擬似クラス
擬似要素
<div>
<p>
<img><!-- (1)画像 -->
</p>
<div>
<p>
<img><!-- (2)画像 -->
<img><!-- (3)画像 -->
</p>
</div>
</div>
div p div img+img{ (3)画像への指定}/*詳細度 5 */
div p div img{ (2)(3)画像への指定} /* 詳細度 4 */
div p img{ (1)(2)(3)の画像への指定}/* 詳細度 3 */
と書けば、詳細度の大きいものが優先される。他のところでimgに何か指定されていても、セレクタさえきちんと設定してあれば、混乱はしません。
それよりも、space.gifて配置のための空白画像では??もしそうなら、そんなもの使うの止めましょう。
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
にも
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。
・HTMLでページを作らずにプログラムに頼る。
と名指しして否定されている・・代わりにスタイルシートを使えと・・・
>それよりも、space.gifて配置のための空白画像では??もしそうなら、そんなもの使うの止めましょう。
目から鱗です。space.gifは使わなければいけないものだと思ってました。
セレクタについても勉強不足でコレから頑張ります。どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブ対応のHTML・CSS(...
-
ボタンをセル内一杯に表示させ...
-
htmlで画像を2個ずつ並べていき...
-
隙間が空かないタグ
-
【HTML/CSS】ボタンの枠が伸び...
-
機種依存文字、m2(平方メート...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
1時間30分を簡単に表したいで...
-
smallにtext-allignが効かない
-
【ヒトの神秘】美男美女から何...
-
NからZへの全単射を具体的に構...
-
HTML属性での「""」 「''」違い
-
<h1>、<h2>と<p><div>の行間を...
-
css li の改行について
-
2個のFormを横並びにしたい
-
含む含まないという概念自体の...
-
CSS、width100%でもできる余白
-
リストマーカーをボックス内に...
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
UDP通信を使うチャットプログラ...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
CSSの左横に隙間ができてしまい...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像とテーブルの隙間をなくす。
-
リンクをつけた画像をクリック...
-
HTMLは、シングルクォートかダ...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
-
ホームページタグ打ち。サイズ...
おすすめ情報