はじめまして、よろしくお願いします

ブラウザでリンクを選択してクリックすると、
<a>タグ部分が点線で囲まれますが、
その機能をページ側で停止することは出来ますか?

A 回答 (2件)

<A href="aaa.htm" onclick="this.blur()">枠線が消えます</A>


<A href="aaa.htm" onclick="this.blur()"><IMG src="abc.gif" border="0"></A>

これでおっけいです。

参考URL:http://www.ad.il24.net/~ura/java/no_link_line.htm
    • good
    • 0
この回答へのお礼

lmeelm様、御回答ありがとうございます。

参考URLの「JavaScriptでリンクさせるニセリンク」
これが私のイメージに一番近いです

早速使わせていただきます
ありがとうございました。

お礼日時:2002/04/04 20:04

画像のリンクなら、imgタグにborder="0"を追加すればいいのですが、


通常、スタイルシートでそういう仕様にしてしまっているなら、取り消す。
では、ないのかしら?点線で囲まれる?下線が引かれるじゃなくて?
    • good
    • 0
この回答へのお礼

御回答ありがとうございます
わかりづらい質問方法だったようで、
もうしわけございませんでした。

リンクを選択してクリックしたり、押し続けたりすると、
画面上のリンク場所の周りに、
点線のような囲みが出来ますよね
(ブラウザ側の設定でしょうか??)

ANo.#2 の方が紹介してくれた参照ページにある、
「JavaScriptでリンクさせるニセリンク」
のようなことがやりたかったんです。

お礼日時:2002/04/04 20:00

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

このQ&Aを見た人が検索しているワード

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

QCSS 〈address〉タグで囲んだ部分を最下部に表示したい

CSS 〈address〉タグで囲んだ部分を最下部に表示したい

お世話になっております。

CSSでサイトを構築しようと考えております。
その際にコピーライト部分を〈address〉~〈/address〉タグで
囲み、その部分をページの最下部に表示したいのですが
それが出来ずに悩んでおります。

よく『containerの全長(例えば500px)のheightを指定して、main(450px)とfooter(50px)でそれぞれにも
高さを指定すればよい』との解答を見かけますが、私が考えるのは
もっと単純に『ページの最下部に表示』をしたいのです。

例えばテーブルタグを使えば【vertical-align: bottom】で
簡単に実践できますがこの表現方法はスマートとは言えません。

過去ログを検索したところ・・・
http://oshiete.goo.ne.jp/qa/2859912.html
の質問サイトに私と全く同じ症状に悩み、解決した方への回答が
あるのですが、解答と同様に私のサイトにタグを適用しても解決出来ず困っております。

【index.html】
(--ページヘッダは省略--)

<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
</head>
<body>

<div id="container">

<div id ="header">
<h1>こんにちは</h1>
</div>

<ul>
<li><a href="index.html">top</a></li>
<li><a href="schedule.html">schedule</a></li>
</ul>

<div id="main">
<h2>Welcome!!</h2>
</div>
<address>Copyright&copy;</address>
</div>

</body>
</html>


【style.css】
@charset "utf-8";body , html { height: 100%;}

body {color: #444444;}

div#container {border: solid 2px #aaaaaa;
padding: 20px;
width: 500px;
height: 100%;
background-color: #ffffff;
margin-left: auto;
margin-right: auto}

div#header {background-color: #111111;
padding: 5px 20px;}

h1 {font-size: 1.25em;
font-family: Verdana, Helvetica, sans-serif;
color: #66aa66}

h2 {font-size: 1em;
padding-left: 20px;
padding-bottom: 3px;
maragin-bottom: 10px;
border-bottom: solid 2px #999999;
background-image: url(freeback65.gif);
background-repeat: no-repeat}

ul {list-style-type: none;
margin-left:0;
background-color: #888888;
padding-left:0;
padding:3px 20px}

li {display: inline;
padding-right: 10px;
color: #ffffff}

li a {text-decoration: none;
color:#ffffff}

li a:hover {background-color:#bbbbbb}

p {font-size: 0.75em;
padding-left:10px}

address {font-size: 0.625em;
font-style: normal;
color: #2d444f;
text-align: center;
text-valign: bottom;}


この状態でwebで見ますと、肝心のアドレス部分は#container内の
<p>タグの直下に表示されます。私の希望としましてはcontainer内の
一番下に表示されるのが理想です。

ご教授よろしくお願いいたします
(タイトルミスで間違えてマルチ投稿になっちゃいました)

CSS 〈address〉タグで囲んだ部分を最下部に表示したい

お世話になっております。

CSSでサイトを構築しようと考えております。
その際にコピーライト部分を〈address〉~〈/address〉タグで
囲み、その部分をページの最下部に表示したいのですが
それが出来ずに悩んでおります。

よく『containerの全長(例えば500px)のheightを指定して、main(450px)とfooter(50px)でそれぞれにも
高さを指定すればよい』との解答を見かけますが、私が考えるのは
もっと単純に『ページの最下部に表示』をしたいのです。

...続きを読む

Aベストアンサー

1.div#containerにposition:relative;を追加。
div#container {
position:relative;/* ←追加 */
border: solid 2px #aaaaaa;
padding: 20px;
width: 500px;
height: 100%;
background-color: #ffffff;
margin-left: auto;
margin-right: auto}

2.addressにposition:absolute;を追加
address {font-size: 0.625em;
font-style: normal;
color: #2d444f;
text-align: center;
position:absolute;/* ←追加 */
bottom:0px;/* ←追加 */
left:0px;/* ←追加 */
width:100%;/* ←追加 */
}

Q

<ul>タグの後の<div>タグのmarginについて教えてください

現在制作しているホームページで下記のようなタグを書きました。

☆・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・☆

ul.menu-a {margin:0;
       padding:0;}
ul.menu-a li {float:left;
        text-indent:-9999px;
        overflow:hidden;
        list-style:none;}
ul.menu-a li a {display:block;
         width:100px;
         height:100px;}
li.menu-a1 a {background:url(◯.gif) 0 0 no-repeat;}
li.menu-a1 a:hover {background:url(◯.gif) 0 -100x no-repeat;}
li.menu-a2 a {background:url(◯.gif) -100px 0 no-repeat;}
li.menu-a2 a:hover {background:url(◯.gif) -100px -100px no-repeat;}
.font{color:#000000;
    margin : 100px 0px 100px 0px;
    border: 1px ;}


<img src="image/123.gif">
 <ul class="menu-a">
  <li class="menu-a1"><a href="123.html">123</a></li>
  <li class="menu-a2"><a href="456.html">456</a></li>
 </ul>
 <ul class="menu-b">
  <li class="menu-b1"><a href="abc.html">abc</a></li>
  <li class="menu-b2"><a href="efg.html">efg</a></li>
 </ul>
<div class="font">あいうえお</div>

☆・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・☆

※<ul>部分はオンマウスで画像が変わるように外部スタイルシートで指定しています。
※長くなるのでul.menu-bのスタイルシート部分は省きましたがul.menu-a とほぼ同じです。


このようなタグの場合、<div class="font">あいうえお</div>の部分に指定している
margin要素は1番上の<img src="image/123.gif">から考えた数値になるのでしょうか?

<ul class="menu-b">の後から考えるものだとばかり思っていたのですが
あれこれ試していく中で、今回のような<ul>の使い方をしている場合は
<ul>タグの存在は無視するべきなのでは?と思い至ったのですが確証には至らず
ここで質問させて頂きました。


様々な本やサイト様を参考させては頂いてるものの
自己流・付け焼き刃な知識しかないものでおかしな質問になっていたらすいません。
詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。

<ul>タグの後の<div>タグのmarginについて教えてください

現在制作しているホームページで下記のようなタグを書きました。

☆・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・☆

ul.menu-a {margin:0;
       padding:0;}
ul.menu-a li {float:left;
        text-indent:-9999px;
        overflow:hidden;
        list-style:none;}
ul.menu-a li a {display:block;
         width:100px;
         height:100px;}
li.menu-a1 a {b...続きを読む

Aベストアンサー

ああ、、これは失礼しました。

ulやliタグがfloatで通常のタグの流れから浮かされているため、
.fontもfloatで浮かせないとmargin-topは効きません。
clearは自動調整(min-margin-topのようなものです※そんなスタイルは実際ありませんが…)
効いているIEのほうが間違いです。

解決する方法は2つあります。

(1)ul.menu-bのmargin-bottomで余白を指定する。.fontはclearでこのmargin-bottom分も自動調整されます。

ul.menu-b{
margin:0 0px 100px 0px;
}

(2)あえて.fontをfloat:leftして、同じ階層に持っていったうえでmargin-topを効かせる。

.font{
clear:both;
float:left;
width:100%;
margin:10px 0px 100px 0px;
}

ただし、(2)の場合はその後の要素がまた同じ問題を抱えますが。

参考URL
http://mb.blog7.fc2.com/blog-entry-62.html
http://www.geocities.jp/multi_column/float/06.html

ああ、、これは失礼しました。

ulやliタグがfloatで通常のタグの流れから浮かされているため、
.fontもfloatで浮かせないとmargin-topは効きません。
clearは自動調整(min-margin-topのようなものです※そんなスタイルは実際ありませんが…)
効いているIEのほうが間違いです。

解決する方法は2つあります。

(1)ul.menu-bのmargin-bottomで余白を指定する。.fontはclearでこのmargin-bottom分も自動調整されます。

ul.menu-b{
margin:0 0px 100px 0px;
}

(2)あえて.fontをfloat:leftして、同じ階層に持ってい...続きを読む

Qイメージタグはタグで囲むべき?

CSSを使ってサイトを作成しています。
気になった事があったので質問させてください。

テキスト(文字)を入力する祭は、<p>~</p>・<div>~</div>等のタグで囲むかと思います。
<img src="" width="" height="" alt="" />
上記のようなイメージタグは、<p>~</p>・<div>~</div>等で囲む必要はあるのでしょうか?
囲まなくてはいけないものなのでしょうか?

<p>~</p>・<div>~</div>タグにスタイルをつけていなければ、
囲んでも囲まなくても表示は変わりませんが、HTML的というか文法的に囲むべきなのでしょうか?
※<p>タグは「reset.css」で上下改行なしにしてあります。

宜しくお願いします。

Aベストアンサー

>> <th><td>セルに書いた文字(テキスト)は<p>で囲むべきなんですよね?
それなら今度はthやtdがblockなのかinlineなのかを調べてみよう。

Qinputタグはformタグで必ず囲む必要がありますか?

<input type="text">や< input type="button">などのinputタグは、入力欄に入力されたデータを他のファイルに送らずに同ファイル内で処理する場合も、必ず<form></form>で囲む必要があるのでしょうか?

例えば、<input type="text" id=”background_color”>に色(例:赤、青等)を入力し< input type="button" value=”変更” onClick=”change_background()”>ボタンを押すと、バックグラウンドの色が入力された色に変わるようなコードを書くとします。Javascript(change_background())の内容は同ファイルの<header></header>内に記述しますが、ここでは関係ないので割愛します。

この場合、
<body>
<input type="text" id=”background_color”>
< input type="button" value=”変更” onClick=”change_background()”>
</body>
で良いのでしょうか?

それとも
<body>
<form>
<input type="text" id=”background_color”>
< input type="button" value=”変更” onClick=”change_background()”>
</form>
</body>
とする必要が、ありますか?

よろしくお願いします。

<input type="text">や< input type="button">などのinputタグは、入力欄に入力されたデータを他のファイルに送らずに同ファイル内で処理する場合も、必ず<form></form>で囲む必要があるのでしょうか?

例えば、<input type="text" id=”background_color”>に色(例:赤、青等)を入力し< input type="button" value=”変更” onClick=”change_background()”>ボタンを押すと、バックグラウンドの色が入力された色に変わるようなコードを書くとします。Javascript(change_background())の内容は同ファイルの<head...続きを読む

Aベストアンサー

inputは要求した内容をファイルに受け渡す時に使用される要素ですね。
formの一部としての機能と云うのを考えるとformで囲むのが常道でしょう。
同じファイルだとしても同様です。

QTableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか?

すみません、お知恵を拝借させてください。
Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか?

下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2)
すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能
か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。

Aベストアンサー

ソースを修正してみました。
変更点ですが、
1.セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。
2.ヘッダーのスクロール方法を変更しました。
scrollTopで移動できるのは、overflow:scroll;の記述がある場合のみです。
overflow:scroll;をつけるのは製作の意図と違うと勝手に解釈して、ヘッダーブロックの表示位置をlayerからの相対位置でずらす方法に変更しました。
その方法ですが、layerにもうひとつDIVをはさみ、DIVの相対位置をずらすことで、スクロールについていくようにしました。

以下ソースです
<html>
<head>
<script language="JavaScript">
function initialize(){
var data = document.getElementById("data");
var header = document.getElementById("header");
var cell = data.rows[0].cells;
var wkWidth;
for(var i=0; i<cell.length; i ++){
wkWidth = cell[i].offsetWidth;
header.rows[0].cells[i].width = wkWidth ;
cell[i].width = wkWidth ;
}
//↓↓↓ 1.ヘッダーのサイズを固定しました
header.style.width = data.offsetWidth;

document.getElementById("layer").style.width = "585px";
document.getElementById("region").style.width = "600px";
}

//↓↓↓ 2.ヘッダーの表示方法をDIVの相対位置を変えることで行うようにしました
function SlideHeader() {
//regionがスクロールした分だけDIVの表示位置をマイナスしています
document.getElementById("ViewSpace").style.left = (document.getElementById("region").scrollLeft * (-1)) + "px";
}

</script>
</head>
<body onload="initialize();">
<div id="layer" style="border:1px; overflow-x:hidden; overflow-y:hidden;">
<!-- 新たにDIVをはさみました。
layerに対して相対位置表示できるようにしています。
このDIVの相対位置を、をregionが右にスクロールした分だけ左に動かします。-->
<div id="ViewSpace" style="top:0px; left:0px; position:relative;">
<table id="header" style="margin:0px;" rules="all" border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</div>
<!-- onScrollを変更しています -->
<div id="region" style="height:80px; overflow-x:scroll; overflow-y:scroll" onScroll="SlideHeader()">
<table id="data" style="margin:0px;" rules="all" border="1">
<tr><td>ABCDEFABCDEFABCDABCDEFABCDEF</td><td>ABCDEFABCDEFABCEFABCDEFABCDEF</td><td>ABCDEFABCDEFABCDEFABCDEF</td></tr>
</table>
</div>
</body>
</html>

ソースを修正してみました。
変更点ですが、
1.セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。
2.ヘッダーのスクロール方法を変更しました。
scrollTopで移動できるのは、overflow:scroll;の記述がある場合のみです。
overflow:scroll;をつけるのは製作の意図と違うと勝手に解釈して、ヘッダーブロックの表示位置をlayerからの相対位置でずらす方法に変更しました。
その方法ですが、layerにもうひとつDIVをはさみ、DIVの相対位置をずらすことで、スクロールについていくように...続きを読む


人気Q&Aランキング

おすすめ情報