- ベストアンサー
cssのimgに2つ設定。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＞ロールオーバーが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>
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞この方法では変化がありませんでした。 もう少し詳しくされたいことを書いてください。 ＞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_input )］より 今回の場合、javascriptを使うならjavascriptで、スタイルシートを使うならスタイルシートで対応するほうが紛らわしくなくてよいです。
お礼
お恥ずかしいのですがロールオーバーがcssでできるとは知りませんでした。 一度javascriptを捨ててチャレンジしようと思います。 ありがとうございます。
- kawacchi
- ベストアンサー率83% (26/31)
自分の環境（winXP、IE6）ではNo.2さんの方法でうまくいきましたが・・・。 もしかして、「.img1」「.img2」のクラス以外に * { vertical-align:bottom; } img { vertical-align:bottom; } など、クラスに関係無くimg要素に「vertical-align:bottom」が 宣言されてしまうような記述をしていませんか？ 質問に書かれているimg { border: 0; vertical-align:bottom; }が 残ったままとか。
お礼
cssをもう一度チェックしましたがうまくいきません。 IE8で試してますが、もう一度最初から挑戦してみます。
- mamedo
- ベストアンサー率25% (7/28)
それでは、下記のようにしてみてはいかがでしょうか？ css には下記のように記述） img{ border : 0; } img.img1:hover img{ vertical-align : bottom; } html は以下） <img src="□□□□" class="img1"> 試してみてください。
お礼
ダメでした。状況は変わりません。。 IE嫌いです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
動的な疑似クラス（The dynamic pseudo-classes)を使います。 img{ border: none;} img:hover{ vertical-align:bottom;} でも、せっかくCSSで書くなら、onMouseOver・・・javascriptを使う必要もないような・・
補足
今のcssのimg{ border: none;} に img:hover{ vertical-align:bottom;} を追加してあげればいいのでしょうか？ この方法では変化がありませんでした。
- mamedo
- ベストアンサー率25% (7/28)
<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'"> やはり反応してくれませんでした(泣)
- mamedo
- ベストアンサー率25% (7/28)
クラス分けするとよいと思われます。 クラス名の前に「.(ドット)」をつけます。 タグの名称と被らないようにします。 以下例） スタイルシート内 .img1 {border: 0;} .img2{border: 0; ertical-align:bottom} ＨＴＭＬ内 <img src="?????" class="img1"/> <img src="?????" class="img2"/> 上記のように記入することで表示を分けることができます。
お礼
早速試してみたのですが、 ロールオーバーを使ってるので教えていただいた方法ではうまくいきませんでした(泣) <img src="../img/000.gif" alt="○○○○" id="△△△△" onMouseOver="ImgChange('△△△△','../img/000_b.gif')" onMouseOut="ImgBack('△△△△')">
関連するQ&A
- img の align 属性を css に変更したいが、位置がずれる
img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top 上端に合わせます。 ■middle 中央に合わせます。 ■bottom 下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。
- ベストアンサー
- HTML
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <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"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<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> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.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>
- ベストアンサー
- HTML
- imgタグでalignのrightとbottomの同時設定
imgタグでalignのrightとbottomの同時設定 例えば次のようなソースを書いてみました。 <p>AAA <img src="sakura.jpg" align="right" align="bottom"> BBB</p> しかし、これでは文字がtopに来てしまいます。 その他にalign="right:bottom"とかalign="right bottom"とか やってみましたけどダメでした。 alignでrightとbottomを実現させるにはどうしたらいいですか。
- 締切済み
- HTML
- 【HTML5、CSS2.1】imgのalign
HTML5、CSS2.1でホームページを作成しています。 http://www.tagindex.com/html_tag/img/img_align.html このサイトを参考に画像の右中央に文字を配置したいのですが HTML5ではalign属性が認められていません。 どのように対処すればよいのか教えていただけましたら幸いです。
- ベストアンサー
- HTML
- この度HPを作成していて疑問に思ったのですが、imgを回り込ませたとき
この度HPを作成していて疑問に思ったのですが、imgを回り込ませたときなどに、添付画像の様にならなくする方法はありますか？ なるべくCSSでそれを行いたいのですが、高さを指定してなどは、やりたくありません よろしくお願いします。 HTML <h2>キングギドラ公開開始 </h2> <p class="up"> <img src="file:///C:/Users/chako/Desktop/G-Works/img/lrg53616_0_357935.png" width="150" height="112" border="0"> キンブギドラ公開しました詳細はギャラリーより </p> CSS .up{ bottom : auto; line-height : 15px; border-bottom-width : 2px; border-bottom-style : dotted; border-bottom-color : #990000; } h2{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; height : 20px; border-bottom-width : 2px; border-bottom-style : dotted; border-bottom-color : #990000; bottom : auto; padding-top : 5px; font-size : 20px; } #right img{ float : left; margin-top : 0px; margin-left : 5px; margin-right : 10px; margin-bottom : 10px; }
- 締切済み
- ネットトラブル
- 画像の上に文字を表示
スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。 <IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0> ・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。 ＃マウスをのせて表示は除外。
- ベストアンサー
- CSS
- CSSでロールオーバーを作って中央揃えにしたい。
CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------
- ベストアンサー
- その他([技術者向] コンピューター)
- cssでimgのpaddingを個々に設定
初歩的なことだと思いますが、つまづいてしまっているので教えてください。 同じページ内のimgのpaddingを個々に設定したい場合はどうすればよろしいのでしょうか。 現在cssには img { padding-left: 5px; padding-top: 5px; とだけ記述してあり、HTMLで <img src="img/○○○.jpg" alt="○○○" width="○○○" height="○○○"> と記述すると、もちろんのことimgはすべて上記のcssが反映されますよね。 かなり単純なことだと思いますが、よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSで文法エラーが出ました
CSS素人です、 CSS Validator検証結果で下記エラーが出ました、IE6・IE7・IE8・firefoxでは表示は崩れませんが 下記エラーを無くしたいのですがどなたかご指導いただけませんでしょうか？ #mnu1 img 文法解析エラーが発生しました @vertical-align:text-bottom; #mnu1 img Parse error - Unrecognized } .td01 文法解析エラーが発生しました @border-width : 1px 1px 1px 1px; 文法解析エラーが発生しました : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a CSS記述は以下の通りです ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); text-decoration : none; background-repeat : no-repeat; outline: none; display : block; width : 108px; height : 40px; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; margin-bottom : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; vertical-align:text-bottom; } .td01{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #dce6f4; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #c1cdde; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} ※ #mnu1 img内の vertical-align:text-bottom;は 縦にメニューを並べているのですが各上下に隙間が入るので vertical-align:text-bottom;を入れたら隙間が無くなったので 使用した次第です。 以上、宜しくお願いします。
- ベストアンサー
- C・C++・C#
お礼
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>