プロが教えるわが家の防犯対策術！

cssのimgに2つ設定。

解決済

  • 質問者：m-----c
  • 質問日時：
  • 回答数：7件

cssのimgに2つ設定。

img {border: 0;}
img{border: 0; ertical-align:bottom}

この2つを使い分けしたいのですが可能でしょうか？
img以外の名前にするとやはり無理でしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞ロールオーバーがcssでできるとは知りませんでした。



　はい、簡単に・・
　IE5,IE6では動作しませんが・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
html,body{
margin:0px;
padding:0px;
}
body{ background-color: black;}
body h1,body h2,body p{
background-color:white;
margin: 0px 20% 0px 20%;
width: Auto;
padding: 0.5em;
line-height:1.6em;
}
img{border:none;}
body p.imageChange{
position:relative;
}
body p.imageChange span img{
visibility: hidden;
}
body p:hover.imageChange span img{
visibility: visible;
position: relative;
}
body p:hover.imageChange img{
visibility: hidden;
}
-->
</style>
<link rel="START" href="../index.html">
</head>
<body>
<h1>サンプル</h1>
<h2>画像の入れ替え</h2>
<p class="imageChange">
<a href="./"><img src="https://cmm001.goo.ne.jp/img/logo/goo.gif" width="140" height="74"><span><img src="https://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="139" height="24" style="left:-140px;"></span></a>
</p>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

cssありがとうございました。勉強になりました。

どうやらimgのvertical-align:top;が原因だろうと思います。
vertical-align:top;を取ればIE8で不自然な空きが解消されました。
回答にもあったimg1を適用してみたのですがうまくいきません。

申し訳ございませんがチェックしていただけますでしょうか。
※imgは他のページで使ってるのでimg1しか触れません


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

通報する
お礼日時：2010/06/18 17:34

No.6

  • 回答者： ORUKA1951
  • 回答日時：

＞この方法では変化がありませんでした。



　もう少し詳しくされたいことを書いてください。

＞onMouseOver="ImgChange('△△△△','../img/000_b.gif')"
　と情報を小出しにせず、ひょっとして関係ないかもしれない情報も含めて詳しい情報がないと、適切なアドバイスは得られません。
・何のためのonMousOverなのか
・画像のサイズ
・リンク内なのか
・ナビゲーションなのか
　など、具体的にはその要素までの木構造のすべて
html
　|- body
　　　|- div class="Content"
　　　　　|- div class="navigation"
　　　　　　　|- ul
　　　　　　　　　|-- li
　　　　　　　　　　　|- img class="a"
　というふうに、そのスタイルを適用させたい要素の詳しい木構造がスタイルシートを適用させるためには絶対必要です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )］より

今回の場合、javascriptを使うならjavascriptで、スタイルシートを使うならスタイルシートで対応するほうが紛らわしくなくてよいです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お恥ずかしいのですがロールオーバーがcssでできるとは知りませんでした。
一度javascriptを捨ててチャレンジしようと思います。
ありがとうございます。

通報する
お礼日時：2010/06/16 19:44

No.5

  • 回答者： kawacchi
  • 回答日時：

自分の環境（winXP、IE6）ではNo.2さんの方法でうまくいきましたが・・・。


もしかして、「.img1」「.img2」のクラス以外に

* { vertical-align:bottom; }
img { vertical-align:bottom; }

など、クラスに関係無くimg要素に「vertical-align:bottom」が
宣言されてしまうような記述をしていませんか？
質問に書かれているimg { border: 0; vertical-align:bottom; }が
残ったままとか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

cssをもう一度チェックしましたがうまくいきません。
IE8で試してますが、もう一度最初から挑戦してみます。

通報する
お礼日時：2010/06/16 13:22

No.4

  • 回答者： mamedo
  • 回答日時：

それでは、下記のようにしてみてはいかがでしょうか？



css には下記のように記述）
img{
border : 0;
}
img.img1:hover img{
vertical-align : bottom;
}

html は以下）
<img src="□□□□" class="img1">

試してみてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ダメでした。状況は変わりません。。
IE嫌いです。

通報する
お礼日時：2010/06/16 10:10

No.3

  • 回答者： ORUKA1951
  • 回答日時：

動的な疑似クラス（The dynamic pseudo-classes)を使います。


img{ border: none;}
img:hover{ vertical-align:bottom;}

でも、せっかくCSSで書くなら、onMouseOver・・・javascriptを使う必要もないような・・

この回答への補足

今のcssのimg{ border: none;}　に
img:hover{ vertical-align:bottom;} を追加してあげればいいのでしょうか？
この方法では変化がありませんでした。

補足日時：2010/06/16 09:07
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： mamedo
  • 回答日時：

<img src="../img/000.gif" alt="○○○○" id="△△△△"


onMouseOver="ImgChange('△△△△','../img/000_b.gif')"
onMouseOut="ImgBack('△△△△')">

の場合、

<img src="../img/000.gif" alt="○○○○" id="△△△△"
onMouseOver="ImgChange('△△△△','../img/000_b.gif'), this.className='img1'"
onMouseOut="ImgBack('△△△△'), this.className='img2'">

としてみたらいかがでしょうか？

「img2」と「img1」はクラス名です。
前文に書き忘れましたがスタイルシート内のクラス名の前には「.（ドット）」が必要ですが、ＨＴＭＬ内のクラス名にはドットは必要ありませんのでご注意ください。

この回答への補足

css
.img1{border: 0;}
.img2{border: 0; vertical-align:bottom;}

html
<img src="../img/000.gif" alt="○○○○" id="△△△△"
onMouseOver="ImgChange('△△△△','../img/000_b.gif'), this.className='img1'"
onMouseOut="ImgBack('△△△△'), this.className='img2'">

やはり反応してくれませんでした(泣)

補足日時：2010/06/16 09:04
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： mamedo
  • 回答日時：

クラス分けするとよいと思われます。


クラス名の前に「.(ドット)」をつけます。
タグの名称と被らないようにします。

以下例）
スタイルシート内
.img1 {border: 0;}
.img2{border: 0; ertical-align:bottom}

ＨＴＭＬ内
<img src="?????" class="img1"/>
<img src="?????" class="img2"/>

上記のように記入することで表示を分けることができます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速試してみたのですが、
ロールオーバーを使ってるので教えていただいた方法ではうまくいきませんでした(泣)

<img src="../img/000.gif" alt="○○○○" id="△△△△"
onMouseOver="ImgChange('△△△△','../img/000_b.gif')"
onMouseOut="ImgBack('△△△△')">

通報する
お礼日時：2010/06/15 18:58

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報