- 締切済み
CSS:a imgのリンクの枠を消したい
http://okwave.jp/qa/q3061773.html ↑この質問と同じなのですが、解決方法が分からなかったので質問させてください。 a,a hover で指定してある枠の色が a imgにも出来てしまい困っています。 a img{ border:none; } と設定していますが、だめです。 それと、この箇所は <div class="thumb"> <table border="0"> <tr> <td class="v3"> <a onclick="btp01.src='img/001.jpg'" ondblclick="btp01.src='img/001.jpg'" style="cursor:pointer"> <img src="img/bt_1-s.jpg" class="photo_s" alt="" width="85" height="85" /></a> </td> </tr> </table> </div> というHTMLの記述なのですが、画像の右側に設定していない余白が出来てしまいます。 どうしたら良いでしょうか。
- massiveak
- お礼率61% (19/31)
- CSS
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞結局、どこをどうしたらいいのか分かりません。 回り道のようですが、原因が理解できないと同じような期待と異なる表示に悩まされ続けることになります。 原因は、 a:hover{border-bottom:soli red 2px;} などの設定があると、どこで div table ・・・・ a img{border:none;} としても利かないのです。 a:hoverの詳細度は a=0,b=0,c=1,d=1 と計算され、[0,0,1,1]になります。 一方 div table ・・・・ a imgの詳細度は、div table ・・・・ a img{border:none;} ・・nは要素の数 それぞれの桁は繰り上がりません。 それを解決する方法は、いくつもあります。 div table ・・・・ a:hover img{border:none;}とする。詳細度は[div table ・・・・ a img{border:none;[0,0,1,n] p a:hover{border-bottom:soli red 2px;}詳細度は[0,0,1,2]と高くなりますが、この指定はpの子孫要素にしか利きません。 このように常に詳細度を念頭において・・
- DrFell
- ベストアンサー率55% (305/551)
<html lang="ja"> <head> <title>テスト</title> <style type="text/css"> a,a hover{border:5px solid red;}/*おそらくa hoverは無意味*/ a img{border:none;} a:hover img{border:5px solid pink;}/*擬似要素のhoverピンク*/ a.gazou,a.gazou:hover img{border:none;}/*特別扱いのリンクの指定*/ </style> </head> <body> <h1>htmlで答えます</h1> <h2>現状の説明</h2> <div style="float:right;background:#ccc;line-height:1.5">a,a hover{border:5px solid red;}<br>/*おそらくa hoverは無意味*/<br> a img{border:none;}<br> a:hover img{border:5px solid pink;}<br>/*擬似要素のhoverピンク*/<br> a.gazou,a.gazou:hover img{border:none;}<br>/*特別扱いのリンクの指定*/<br></div> <p><a href="#">リンク文字<img src="01.jpg" width="50" height="50" ></a><a href="#">リンク文字<img src="01.jpg" width="50" height="50" ></a><p> <p><a href="#"><img src="01.jpg" width="50" height="50" ></a><a href="#"><img src="01.jpg" width="50" height="50" ></a></p> <p>上でimgの指定にのみ、マウスを乗せるとピンクの線が追加されます。imgへの線です。</p> <p>「a,a hover で指定してある枠の色が a imgにも出来てしまい困っています。」とのことですが、a imgについているのではないかな？、つまり、aへの指定の中にあるimgというだけでは、aについている、borderを消すことができないのがご理解いただけますか？</p> <h2>区別する</h2> <p>ではどうするかというと、aの中の1部だけを区別して（class）指定します。</p> <p><a href="#" class="gazou"><img src="01.jpg" width="50" height="50" ></a><a href="#" class="gazou"><img src="01.jpg" width="50" height="50" ></a></p> <p><a href="#" class="gazou">文字が入っても特別扱いです<img src="01.jpg" width="50" height="50" ></a><a href="#" class="gazou">文字が入っても特別扱いです<img src="01.jpg" width="50" height="50" ></a></p> <p>外していて、本当にa,a hover で指定してある枠の色が a imgにもでてダブルで出てきているなら、ご提示の情報では不足すぎます。現状が出現する本物のソースを教えてください。</p> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
追加です。 スタイルシートをいくつ使おうが、まったく関係ありません。あくまでスタイルはカスケーディングのルールに従います。登場順にソートされたのち詳細度で並べ替えられる。 ＞a,a hover a,a:hover(の間違)が適用されるのは、このセレクタの指定の詳細度[0001],[0011]が、a img[0002]よりも高いからです。 (なお、<a>テキスト</a>の場合に表示されるのは、text-decorationです。) 繰り返しますが、HTMLはデザインを念頭に記述しません。 HTML5的に記述すると <body> <header> ヘッダ </header> <section> <figure class="sample"> <img> </figure> </section> <footer> <nav> <ul>ナビゲーション</ul> </nav> </footer> </body> となるはずです。HTML4ではheaderなどは、<div class="header">と書くのが正しい。 [HTML4] <body> <div class="header"> ヘッダ </div> <div class="section"> <figure class="sample"> <img> </div> </div> <div class="footer"> <div class="nav"> <ul>ナビゲーション</ul> </div> </div> </body> たったこれだけで、それ以外のclass名も(リンクのターゲットでない限り)idも不要なはずです。HTMLもシンプルでずっとわかりやすいし、スタイルシートも書きやすいし、「navが隠れる」「スタイルが適用されない」というようなトラブルも置きえません。
- 4017B
- ベストアンサー率73% (1305/1776)
＞CSSを２つ使っているからでしょうか。 ああ～、そういう事は先に言って貰わないと。我々、回答者は国家A級エスパーではないので、書いてある情報のみを真実と信じて回答してます。お互い裏切りは無しの方向性で(笑)。 とりあえず実験。 aタグ内の style="cursor:pointer" ～の部分を、 style="cursor:pointer; border:none;" ～としてみて、それでも枠線表示が消えなかったら…お手上げというか、かなり重症ですね。ページ内のタグ内に直にスタイルシート記述して変更出来ないとなると、かなり上位レベルでスタイルが書き換えられてると言う事になりますので（ブラウザの仕様・バグかJavaScriptの影響か？）。 P.S. 余白とか余計な事は考えない。コードは常に1個ずつ、各個撃破が基本です。2正面作戦は愚者の奸計。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞a,a hover で指定してある枠の色が a imgにも出来てしまい困っています。 それは当然です。 セレクタごとの詳細度を見てみましょう。 a タイプセレクタ×1 [0,0,0,1] a:hover タイプセレクタ×1、リンクの動的擬似クラス×1 [0,0,1,1] a img タイプセレクタ×2 [0,0,0,2] ★順番がどうであれ、この場合a要素にポインターが乗れば、詳細度が高いa:hoverの指定で上書きされます。 【カスケーディング】スタイルシートと断るくらい、カスケーディングの仕組みは、スタイルシートを使うとき最初に覚えなければなりません。 1) 優先順位でソートします。 ユーザーの最重要宣言したスタイル＞著者の最重要宣言したスタイル＞著者のスタイル＞ユーザーのスタイル＞ユーザーエージェントのスタイル。@importされたものは同じ 2) ついで、詳細度でソートします。 3) 詳細度が同じ場合は最後に登場順番で 詳しくは 6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) ただし、詳細度についてはCSS2.1(現行)では少し変更があります。 6 Assigning property values, Cascading, and Inheritance ( http://www.w3.org/TR/CSS2/cascade.html ) だからと言って、要素に文書構造に関係のないclass名やIDを振るのは、間違いです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より そこを理解していれば、HTMLもCSSも極めて簡単に、わかりやすくなるでしょう。 文書構造が下記のようなものだとします。 <div class="section"><!-- 本文を示すclass名 HTML5では要素になる --> <p>段落・・・<a href="">リンク</a>を参照してください。</p> <table> <tbody> <tr> <td> <a><img src="img/bt_1-s.jpg" class="photo_s" alt="" width="85" height="85" /></a> の場合、余分なclass名がなくても div.section p a:hover{border:solid 1px blue;} /* 詳細度 [0,0,2,3] 23 */ として指定してあっても div.section table a img{border:inset green2px;} /* 詳細度[0,0,1,4] 14 */ と詳細度が低くても、決して競合しませんね。 なぜなら、pの子孫要素のa;hoverですから・・ 文書構造ではなくスタイルシートのためにclass名を書く時点で、すでに破綻しています。それがなくても、まったく問題ないし、メンテナンスも楽です。
お礼
丁寧に教えて下さってありがとうございます。 もう少し勉強しないといけないみたいですね、、 結局、どこをどうしたらいいのか分かりません。
- 4017B
- ベストアンサー率73% (1305/1776)
え～っと、単純にCSSの指定のルールを勘違いしてるだけです。正しい指定ルールに沿って設定し直せば直ります。 × a img { border:none; } ○ td.v3 a { border:none; } 上記の様な例文にすれば、一応枠線？は消えると思います（オリジナルHTMLコードを変更しない場合）。 ＞CSSの設定は記述した順番の一番最後の要素にかかる お分かりですか？つまり a img { border:none; } ～だと、最終的に修飾されるのはあくまでも imgタグと言う事です。なので img の枠線は消えていますが、その周りを a で囲っているので、その aタグの枠線が表示されているのです。 この様な場合、一番簡単な方法は imgタグを囲む aタグのみに、何か固有のクラス名を割り振って置いて。そのクラス名にCSSで変更を加える方法です。 例えばHTMLコードの方を、 <a class="img_link" href="#"><img src="abc.jpg" /></a> ～みたいにして置き。CSSの方で、 a.img_link, a.img_link img { border: none; } ～と記述して置けば。通常の aタグ（リンク）では普通に下線などが反映され。画像リンク部分のみ枠線無しという風に出来ます。まあ、色々と勉強としてみて下さい。
補足
回答ありがとうございます。 td.v3 a { border:none; } も試しましたが、ダメです。 <a class="img_link" a onclick="btp01.src='img/001.jpg'" ondblclick="btp01.src='img/001.jpg'" style="cursor:pointer"> とし、CSSを a.img_link, a.img_link img { border: none; } で設定してもダメです。 なぜでしょうか。。 a.img_link ↑aのあとにスペースとか入りませんよね？ もしかしたら、このサイト全体に命令してるCSS（A）とこのページのみの命令のCSS（B）２つ使っているからでしょうか。 (A)のほうにリンクの色の設定してるので、そっちが有効になってしまうのでしょうか。。
関連するQ&A
- <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
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- 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
- テーブルタグ表示が上手くいかない（html・CSS
下のタグを使うと、ブログに下記画像上部のように表示されているのですが 理想としては画像の下部分のように綺麗に表示したいです。 自分なりに何度かタグを弄っているのですが何度やっても画像上部のように乱れて表示されてしまい ムキー！っとなってます。 大変申し訳ないのですが、画像の下部分のように表示できるタグを教えてください。 何卒お願いします。 画像内のピンクの部分は実際には<img src="で指定された画像になります。 使ったタグ <table border="1"> <td><table id="table-03"> <colgroup> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV>
- ベストアンサー
- ブログ
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
- table内の画像を中央寄せ、のせると拡大、方法？
画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ～～～ HTML ～～～ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ～～～ CSS ～～～ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }
- ベストアンサー
- HTML
- HP作成html/<div>,<a>,<img>
こんばんは 僕はホームページを作っています 画像と文字のリンクにマウスを乗せたときに、そこの周りの色が長方形の形で反転ようにしたいのですが、 スタイルシートに div.aaa {width:100;height:100%} a.bbb:hover {color:white;backgrund-color:black} と入れて、 HTMLに、 <table><tr><td><a href="リンク先" class="bbb"><div class="aaa"><img src="画像の場所">文字</div></a></table></tr></td> って入力してIEで開くと、色の反転はちゃんとなるんですが、 リンクを開こうとして画像の上をクリックしても反応がありません。 周りの字や、画像の周りの隙間などをクリックしたら、ちゃんとリンク先が開けました。しかし、画像の上でも、[右クリック→リンクを開く]とすれば、リンク先が出てきました。どうしてなのでしょうか？？？ 説明下手で長くてすいませんがアドバイスよろしくお願いします
- 締切済み
- その他（インターネット・Webサービス）
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト（waku）と、テーブルの幅を可変（パーセント表示）にしないと、画像の伸縮は難しいのでしょうか。 ＊＊＊＊ HTML部分（CSSは外部） ＊＊＊＊＊ <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> ＊＊＊＊ style.css(CSS部分) ＊＊＊＊＊ #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- webbrowserでクリック（リンク）させたいのですが・・・
Webbrowserを使用して、IEを動かしたいです。 下のようなページで”いいいい”（一番下）をリンクさせたいのですがうまくいきません。 どこが悪いのか教えて頂けないでしょうか？ ※投稿文字数に制限があり大幅に削除しました。これで分かるでしょうか？ <td align="right"> <a href="/bsite/member/menu.do">トップ</a> <b><font color="#999999">│</font></b> <a href="/bsite/member/logout.do">ログアウト</a> <a href="/bsite/price/search.do" class="wlink"><div style="margin:2 0 1 0;">紹介</div></a> <a href="/bsite/member/portfolio/registeredStockList.do" class="wlink"><div style="margin:2 0 1 0;">名前</div></a> <a href="/bsite/member/acc/menu.do" class="wlink"><div style="margin:2 0 1 0;">甲</div></a> <a href="/bsite/market/menu.do" class="wlink"><div style="margin:2 0 1 0;">情</div></a> <div class="titletext">報</div> <!--▼ｘｘｘｘー--> <table border="0"> <tr valign="top"> <td><b>1111 てつ</b></td> <form action="/bsite/member/portfolio/stockDetail.do" method="POST"> <input type="hidden" name="product_code" value="1111"><input type="submit" value="のぼる"> <form action="/bsite/price/stockDetail.do" method="POST"> <input type="hidden" name="atime" value="1225641591930"> <input type="hidden" name="ipm_product_code" value="0000"> <input type="hidden" name="market" value="TKY"> た* <a href="/bsite/price/stockDetail.do?ipm_product_code=5423&market=JNX">PTS</a> <input type="submit" value="あたらしい"> </table> <!--▲登ー--> <table border="0"> <tr valign="top"> <td nowrap><font class="ltext"></td> </tr> </table> <table border="0" "> <tr bgcolor="#b7b7b7">></td></tr> <tr valign="top"> <td nowrap bgcolor=" <td nowrap align=" <tr bgcolor="#b7b7b7"><td colspan="4"><img src="/bsite/img/trans.gif" width="1" height="1" alt=""></td></tr> </table> <br> <!--▼き--> <table <tr><td bgcolor= <table <tr><td <table "> <tr align="center"> <td 奇数</td> </tr> </table> </table> </td></tr> </table> <br> <!--参考--> <!-- kim --> <table > <tr><td > <table > </table> </td></tr> </table> <br> <!--▲き--> <table border=> <td bgcolor="#eeeeee"> <a href="/bsite/price/marginDetail.do?ipm_product_code=5423&market=TKY" class="wlink">情</a> </td> </tr> </table> <table "></table> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <a href="/bsite/member/stock/buyOrderEntry.do?ipm_product_code=5423" class="wlink">現か</a> </td> <td width="1%"><img src="/bsite/img/trans.gif" width="1" height="1" border="0"></td> <td width="49%" bgcolor="#DEECFA"> <a href="/bsite/member/stock/sellOrderEntry.do?ipm_product_code=5423" class="wlink">なかう</a> </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:4px;"> <tr align="center"> <td width="30%" bgcolor="#FFE6D7"> <a href="/bsite/member/margin/buyOrderEntry.do?ipm_product_code=5423" class="wlink">いいいい</a> </td> 自分の考えでは↓なのですが・・・ どなたか教えてください。宜しくお願い致します。 kchk2 = UserForm3.web1.Document.Links(10).innerText If kchk2 <> "いいいい" Then MsgBox "ハイパーリンク「いいいい」の選択に失敗しました。" Exit Sub End If enchk = 0 UserForm3.web1.Document.Links(10).Click
- 締切済み
- その他（プログラミング・開発）
お礼
style="cursor:pointer; border:none;" これでもダメでした。。 重症ですよね。。 何度も親切にありがとうございました。 他の方法考えてみます。