• 締切済み

リンクなのにアンダーラインの無いボタン

色々なサイトを閲覧していると、たまに文字入力してあるリンクボタンなのに下にアンダーラインのないものを見かけます。格好いいな、と思うのですが、どの様に作成されているのでしょう?恐らくCSS等使われているのでしょうが、素人なのでよくわかりません。 この説明だけだとわかり辛いかもしれませんので、この様なボタンが使われているサイトを以下に挙げます。↓ http://home.b07.itscom.net/capture/style-island/main.html

みんなの回答

noname#8742
noname#8742
回答No.4

#3です    ちなみに、下記で紹介したサイトのトップページは (http://iam.egoism.jp/)ですので。     そのサイトにも書いてありますが、リンクの文字に関しては、ちゃんとHTML の<head></head>の間に、そこに載ってるタグを付けるって事を忘れずに!    さらに、コピー&ペーストだけでは満足できなくなったら、詳しくプログラミングを勉強するといいと思いますよ!

参考URL:
http://iam.egoism.jp/
noname#8742
noname#8742
回答No.3

ちょ~分かりやすいサイトがありますよ!    http://iam.egoism.jp/choco/hp/index.html    そこに載ってるタグをコピーして貼り付ければ完成~♪

参考URL:
http://iam.egoism.jp/choco/hp/index.html
回答No.2

サンプルに出したページではJavascriptを使っていますがスタイルシートで出来ます。 a:link { まだ見ていないページへのリンクのスタイルシート } a:visited{ すでに見たページへのリンクのスタイルシート } a:hover{ ユーザーがその上にカーソルをおいているがアクティブにされていない状態のスタイルシート } a:active{ その要素がユーザーによってアクティブにされている状態のスタイルシート } 設置方法はサンプルページにも載っているのでそっちを見ておくといいでしょう。(インラインスタイルシートでは出来ません。) ちなみにアンダーラインの除去は text-decoration:none;none; で出来ます。 背景色は background-color:色名または色コード; 例えば background-color:#ffff00; background-color:#yellow; のように指定してください。

  • o84
  • ベストアンサー率31% (128/407)
回答No.1

いきなりですいませんが‥‥ 「リンクなのにアンダーラインの無いボタン」 というのは意味不明で、何のことだろう? と思ってしまいました。 初心者なんだなあと思いますが、他の人に質問する時に困りますから HTMLの簡単な初歩くらいはざっと目を通しておくと良いですよ。 というか、目を通す「必要があります」。話が通じませんから。 ありきたりですが「とほほのWWW入門」のHTMLの項を全部、 たとえ意味が理解できなくても目だけ通しておくと良いでしょう。 http://tohoho.wakusei.ne.jp/ ********** さて。 「リンクなのにアンダーラインの無いボタン」とは、 おそらくカーソルを上に乗せてもアンダーラインが出ないリンクの ことであろうと思いながら、御指摘のページを見ました。 左側のメニューのことをおっしゃっているのでしょうか? ソースを表示してみると、どうやって作成されているのか判ります。 答えからいいますと、ご指摘のページの左側のメニューは、 普通のリンクではありません。ボタンでもありません。 実はただのテーブルを使っていて、テーブルのセルの上での カーソルの動きを検知して、javaScriptで処理しています。 メニューの上から二つ目に「スタイルシートって?」という項目が ありますが、これをソースで見ると <td target="main" onClick="parent.main.location.href='about-style.html'" onmouseover="this.style.backgroundColor='#c0c0c0',d1.innerHTML='スタイルシートについての基礎知識です。正式名称や主な用途など初心者の方は必読。'" onmouseout="this.style.backgroundColor='#FFFFFF',d1.innerHTML='「はじめに」の<br>簡易説明が出ます。'" STYLE="cursor:crosshair;">スタイルシートって?</td> となっています。「スタイルシートって?」という文字がある場所を 1)クリックすると(onClick)   mainという名前がついたフレームに表示するファイルを   「about-style.html」に切り替える。 2)マウスが上に乗ると(onmouseover)   背景色を灰色(#c0c0c0)に変え、「スタイルシートについての…」   という説明文を表示する。 ※リンクと思われたのはこれですね 3)マウスが上から離れると(onmouseout)   背景色を白にして、「「はじめに」の…」という説明文を表示する。 と書かれています。 ***** 単にリンクに下線を表示したくない、という場合は、これ↑とは また話が違います。リンクに下線を出さないというだけでしたら、 JavaScriptを使う必要はなく、CSSだけでできます。

YukoNa
質問者

補足

たどたどしい説明ですみませんでした。(にもかかわらず丁寧にご教授頂き、ありがとうございます) リンクに下線をださない&マウスが上に乗ったときに背景色を変えるというのはどのような方法でできますか?再質問で恐縮です。