要領を得ない質問で申し訳ありません。不明な点はどうぞ補足要求をお願いいたします。では質問を。

画像にリンクをはった場合、その画像を押すと、一旦、その画像が点線で囲まれますよね。私も同様に「画像にリンクをはっている」のですが、押すと、点線で囲まれる部分が、画像そのものの形(ちなみに長方形)の右下に「しっぽ」のようなものがくっついた形になっています。これを取り外すことはできますか? 機能上、特に支障はないのですが、教えてください。

A 回答 (2件)

改行していませんか?


<a href="~~">
 <img src="~~">
</a>
といったように<a>タグで改行していると、画像の横に"_"みたいなラインが現れる事があります。
全部1行で書いてみたら、キチンと画像の周りにしっぽなしで点線が出ると思います。
1行が長くなってソースが見にくくなるのであれば、タグの途中で改行するといいですよ。
<a href="~~"><img
 src="~~"></a>
といった感じで。

windows98SE IE5.5で動作確認しました。
    • good
    • 0
この回答へのお礼

改行してました~。
ありがとうございます!! m(_ _)m
最近、goo の無料HPをきっかけに、TAG 編集や JAVA を始めたのですが、まだ分からないことが一杯です。また質問することがあると思いますが、今後ともよろしくお願いいたします。

お礼日時:2002/03/07 14:24

<A href="xxxx"><IMG src="xxx.gif"> </A>


のようにブランクスペースが間に入ってしまっていませんでしょうか?
></A>とくっつけるとしっぽが消えると思います。
    • good
    • 0
この回答へのお礼

早速のご回答、ありがとうございます!
改行して、ブランクを入れていました。
おかげさまで解決いたしました。
今後もよろしくお願いいたします。

お礼日時:2002/03/07 14:26

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

このQ&Aと関連する良く見られている質問

Qリンクをつけた画像をクリックする時に出る「囲み点線」を消したい

はじめまして。
上記、タイトルを実現する方法はございますでしょうか?

どうかよろしくお願いいたします。

Aベストアンサー

アウトラインのことですね。
(「囲み点線」はborderではありませんよ)
a { outline:none; }
outlineプロパティはIEだと5、5.5、8で対応してますから
上記で見えなくなりますが、6、7では効きません。
で、どうしてもって時はjavascriptで無理やり非表示に。
<a href="○○○.html" onfcus="this.blur()">~
(onFocus="this.blur()"はアウトラインを消すイベントではないので注意)
で、もっと詳しく知りたいときは「リンク 点線 消す」でググる。
↑コレ、お約束。

QFirefoxで画像のリンクをクリックした際の点線表示

こんにちは。
画像にリンクを張ると、画像をクリックしたときに点線が表示されるかと思うのですが、

<div id="main-sub">
<h2>案内</h2>
<h3>相談</h3>
<p>  文章    </p>
<a href="../new/new.html"><img src="images/riyou_btn_○○.gif" alt="○○へ" border="0" /></a>
</div>

#main-sub img {
float: right;
margin-top: 70px;
margin-right: 10px;
}
とすると、IEでは表示されるのですが、Firefoxでは表示されません。
float: right; を削除すると点線が現れたので、これが原因かと思ったのですが、画像の位置を指定するabsoluteで試しても表示されないので、
どうすればいいのか分からずに困っています。
Firefoxでも点線を表示させるにはどうすれば良いですか?
色々試してみましたが分かりません。
教えて下さい。よろしくお願いします。

こんにちは。
画像にリンクを張ると、画像をクリックしたときに点線が表示されるかと思うのですが、

<div id="main-sub">
<h2>案内</h2>
<h3>相談</h3>
<p>  文章    </p>
<a href="../new/new.html"><img src="images/riyou_btn_○○.gif" alt="○○へ" border="0" /></a>
</div>

#main-sub img {
float: right;
margin-top: 70px;
margin-right: 10px;
}
とすると、IEでは表示されるのですが、Firefoxでは表示されません。
float: right; を削除すると点線が現れたので、これが...続きを読む

Aベストアンサー

はじめまして。気になって試してみましたが、おっしゃるとおり画像をクリックした瞬間に点線が表示されていませんね。
原因はimgにかかっているfloatだと思われます。

解決方法として・・・
1. aタグの上にdivなどのblock要素をつけてfloatをかける方法
<html>
<head>
<style>
#main-sub imgbox {
float: right;
margin-top: 70px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="main-sub">
<h2>案内</h2>
<h3>相談</h3>
<p>  文章    </p>
<div class="imgbox"><a href="../new/new.html"><img src="sample.jpg" alt="○○へ" border="0" /></a></div>
</div>
</body>
</html>

2.aタグをblock要素にしてfloatをかける方法
<html>
<head>
<style>
#main-sub a {
display: block;
float: right;
margin-top: 70px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="main-sub">
<h2>案内</h2>
<h3>相談</h3>
<p>  文章    </p>
<a href="../new/new.html"><img src="sample.jpg" alt="○○へ" border="0" /></a>
</div>
</body>
</html>

以上の二つが考えられました。
imgタグにスタイルとしてblock要素を付け加えることも考えられましたが、imgタグをblock化しても点線は表示されませんでした。

imgの親要素にあたるタグにfloatをかけなければ点線が表示されないのかもしれないです。

はじめまして。気になって試してみましたが、おっしゃるとおり画像をクリックした瞬間に点線が表示されていませんね。
原因はimgにかかっているfloatだと思われます。

解決方法として・・・
1. aタグの上にdivなどのblock要素をつけてfloatをかける方法
<html>
<head>
<style>
#main-sub imgbox {
float: right;
margin-top: 70px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="main-sub">
<h2>案内</h2>
<h3>相談</h3>
<p>  文章    </p>
<div class="imgbox"><a href="....続きを読む

QCSS リンクを枠で囲み背景色をつけてボタンのようにして、その中にpngアイコンを表示させたい。

やりたいことは、リンク先である Facebook とTwitter のURLに 囲み枠で丸くしグラデーションで背景色をつけたあとに、リンク先の文字の後ろにアイコンを表示したいと考えています。試行錯誤で試しいてますが、うまくいきません。もし分かりましたら宜しくお願いします。


【HTML】
<center><a href="http://www.xxxx.com" class="fb-b" >Facebook<div classs="fb-ic" ></div></a></center>

<center><a href="http://www.xxxx.com" class="tw-b" >Twitter<div class="tw-ic" ></div></a></center>

【CSS】
/* Facebookボタン */
.fb-b{
background-image: linear-gradient(-90deg, #043495, #984BB4);
color: #fff;
width: 200px;
padding: 5px;
border-radius: 5px;
border-style: solid; border-width: thin;
display: inline-block;
}


/* Twitterボタン */
.tw-b{
background-image: linear-gradient(-90deg, #F1F3F9, #EBFFF9);
/*color: #fff; */
width: 200px;
padding: 5px;
border-radius: 5px;
border-style: solid; border-width: thin;
display: inline-block;
}

/*アイコンボタン */
.fb-ic{
background: url(facebook.png) no-repeat right center;
background-size:30px 30px;
}
.tw-ic{
background: url(twitter.png) no-repeat right center;
background-size:30px 30px;
}

やりたいことは、リンク先である Facebook とTwitter のURLに 囲み枠で丸くしグラデーションで背景色をつけたあとに、リンク先の文字の後ろにアイコンを表示したいと考えています。試行錯誤で試しいてますが、うまくいきません。もし分かりましたら宜しくお願いします。


【HTML】
<center><a href="http://www.xxxx.com" class="fb-b" >Facebook<div classs="fb-ic" ></div></a></center>

<center><a href="http://www.xxxx.com" class="tw-b" >Twitter<div class="tw-ic" ></div></a></center>

【CS...続きを読む

Aベストアンサー

<center>なんて、とっくの前に使わなくなったし・・
<ul id="#SNS_Link">
 <li><a href="http://www.xxxx.com">Facebook</a></li>
 <li><a href="http://www.xxxx.com">Twitter</a></li>
</ul>
と文書構造以外書かない。書いてはならない。デザイン(プレゼンテーションに関わるものはHTMLには書かない。
 ましてや、<div class="tw-ic" ></div>なもの書かない!!!
・HTML5未満のHTMLはA要素内に<div>はおけない
・空の要素は書いてはならない
・デザインのためだけの要素は無論、classやidは書かない。後でワケワカメになる。

・・これは基本です。
★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 idやclassを併用して文書構想を補完する。


 ここは、SNSへのリンクのリストですから・・

<ul id="SNS_Link"><!-- リンクのターゲットになるかもしれないのでidで構造を補完 -->
 <li><a href="http://www.fff.com">Facebook</a></li>
 <li><a href="http://www.ttt.com">Twitter</a></li>
</ul>

と記述したほうが良い。SEO(検索エンジン最適化)は無論、メンテナンス性も含めて、あらゆる面で優れている。
フレゼンテーションと切り離すことで、自由自在にデザインできるようになる。

スタイルシート

ul#SNS_Link{
margin:0.5em 1em;
padding:0;
list-style-type:none;
}
ul#SNS_Link li+li{
margin-top:20px;
}
ul#SNS_Link li a{
display:inline-block;
background: linear-gradient(white, gray);
border-radius:0.5em;
position:relative;
padding:5px;
text-decoration:none;
}
ul#SNS_Link li a[href]:after{
content:"";
position:absolute;
right:-40px;top:0;
display:inline-block;
width:30px;height:30px;
background-size:cover;
}
ul#SNS_Link li a[href="http://www.fff.com"]:after{
background-image:url(./images/icons/facebook.png);
}
ul#SNS_Link li a[href="http://www.ttt.com"]:after{
background-image:url(./images/icons/twitter.png);
}
ul#SNS_Link li a:hover{
background: linear-gradient(white, red);
}

★ スタイルシートを書く前に、HTMLのチェックしましょう。
「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )」
・HTMLのチェックは
 Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
  の右上の[DATA]が便利
・Unicorn( https://validator.w3.org/unicorn/ )

下記サンプル(全文)はチェック済み!!
*タブは_に置換してあるので戻す
*文字コードはShit_JIS

<<!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 name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
ul#SNS_Link{
margin:0.5em 1em;
padding:0;
list-style-type:none;
}
ul#SNS_Link li+li{
margin-top:20px;
}
ul#SNS_Link li a{
display:inline-block;
background: linear-gradient(white, gray);
border-radius:0.5em;
position:relative;
padding:5px;
text-decoration:none;
}
ul#SNS_Link li a[href]:after{
_content:"";
_position:absolute;
_right:-40px;top:0;
_display:inline-block;
_width:30px;height:30px;
_background-color:red;
_background-size:cover;
}
ul#SNS_Link li a[href="http://www.fff.com"]:after{
background-image:url(./images/icons/facebook.png);
}
ul#SNS_Link li a[href="http://www.ttt.com"]:after{
background-image:url(./images/icons/twitter.png);
}
ul#SNS_Link li a:hover{
background: linear-gradient(white, red);
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<ul id="SNS_Link"><!-- リンクのターゲットになるかもしれないのでidで構造を -->
___<li><a href="http://www.fff.com">Facebook</a></li>
___<li><a href="http://www.ttt.com">Twitter</a></li>
__</ul>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

<center>なんて、とっくの前に使わなくなったし・・
<ul id="#SNS_Link">
 <li><a href="http://www.xxxx.com">Facebook</a></li>
 <li><a href="http://www.xxxx.com">Twitter</a></li>
</ul>
と文書構造以外書かない。書いてはならない。デザイン(プレゼンテーションに関わるものはHTMLには書かない。
 ましてや、<div class="tw-ic" ></div>なもの書かない!!!
・HTML5未満のHTMLはA要素内に<div>はおけない
・空の要素は書いてはならない
・デザインのためだけの要素は無論、classやidは書かない。後でワケ...続きを読む

Qリンク画像をクリックすると、領域に点線の枠が出るのを非表示にしたい。

表題どおりの質問です。

メニューボタンなどを画像で作成すると、その画像をクリックすると、画像領域を囲むように点線の枠が出てしまいます。
かっこ悪いので非表示にしたいのですが、、

お願いします。

Aベストアンサー

a:focus{outline:none;}
firefoxのみcssで消去可能だそうです。

これはマウスなしでも操作が出来るように、現在のフォーカスを表示しているものです。人によっては非常に便利で必要な機能だと思います。
特にかっこ悪いとも思いませんけども。

どうしても消したいなら、リンクをHTMLで作成せずに、onclickイベントなどでjavascriptを使って飛ばしてやればいいと思います。

QHTMLにて画像を押したときにボタンを押したように画像を切り替えるよう

HTMLにて画像を押したときにボタンを押したように画像を切り替えるような処理をしたいのですが可能でしょうか。
わかる方教えてください。
よろしくお願いします。

Aベストアンサー

<img src="1.jpg" onmousedown="this.src='2.jpg'" onmouseup="this.src='1.jpg'" onmouseout="this.src='1.jpg'">

マウスのボタンをおしたとき2にかわり、ボタンを戻すと元の1に戻り、
押しっぱなしでマウスを画像から外したときの処理もいれる


人気Q&Aランキング

おすすめ情報