テキストリンクの背景色を角丸にする方法を教えてください。

回答の条件
  • 1人2回まで
  • 登録:2008/01/31 11:47:46
  • 終了:2008/02/07 11:50:02

回答(3件)

id:killingofthedead No.1

killingofthedead回答回数18ベストアンサー獲得回数42008/01/31 12:15:55

ポイント27pt

角丸は画像じゃないとダメだと思います。

画像を使った場合は次の通りです。

<script style="text/javascript">
<!--
bgimages = new Array();
function swapAncBGImage(obj, path) {
	if (bgimages[path] == null) {
		bgimages[path] = new Image();
		bgimages[path].src = path;
	}
	
	if (path == null) {
		obj.style.backgroundImage = "none";
	}
	else {
		obj.style.height = bgimages[path].height;
		obj.style.width = bgimages[path].width;
		obj.style.backgroundImage = "url(" + path + ")";
	}
}
//-->
</script>
<a href="リンク先" onmouseover="swapAncBGImage(this, '画像ファイルパス')" onmouseout="swapAncBGImage(this)">リンク</a>
id:hate_na_com

ありがとうございます!

下のリンク先のページで「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」とあるのですが、そのようなイメージで、テキストリンクの背景を角丸にするのはやはり難しいでしょうか。

http://phpspot.org/blog/archives/2006/03/javascripthtml.html

2008/01/31 13:11:04
id:tawazou No.2

tawazou回答回数33ベストアンサー獲得回数72008/01/31 15:58:08

ポイント27pt

Nifty Corners初めて知りました。

勉強がてら作成してみました。


  • CSSのみで実現
<html>
<head>
<style type="text/css">
a#nifty {
	text-align: center;
	width: 80px;
	background: lightblue;
}
b.rtop, b.rbottom {
	display:block;
	background: white;
}
b.rtop b, b.rbottom b {
	display:block;
	height: 1px;
	overflow: hidden;
	background: lightblue;
}
b.r1 {
	margin: 0 5px;
}
b.r2 {
	margin: 0 3px;
}
b.r3 {
	margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4 {
	margin: 0 1px;
	height: 2px;
}
</style>
</head>
<body>
<a href="http://q.hatena.ne.jp/1201747665" id="nifty">
	<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
	リンク
	<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</a>
</body>
</html>

  • nifty.js, niftyCorners.cssを利用

Nifty Cornersよりダウンロードして下さい。

<html>
<head>
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload = function() {
	if (!NiftyCheck()) return;
	Rounded("a#nifty", "white", "lightblue");
}
</script>
<style type="text/css">
a#nifty {
	text-align: center;
	width: 80px;
	background: lightblue;
}
</style>
</head>
<body>
<a id="nifty" href="http://q.hatena.ne.jp/1201747665">リンク</a>
</body>
</html>
id:hate_na_com

勉強になります。ありがとうございます。

2008/01/31 17:07:54
id:dungeon-master No.3

dungeon-master回答回数571ベストアンサー獲得回数402008/02/01 19:52:03

ポイント26pt

ちょっと実験。

「マウスポインタを乗せると色が変わる角丸背景」です。

画像やJavascriptは使わずに、cssで実装しています。

・回答2の例では必要だったWidthの指定が不要。

・文字サイズを変更しても一応は角丸。

・リンクが複数行にわたった場合も、前と後に角丸。


WindowsXPのIE6SP2で確認したところでは、うまく表示できています。

ブラウザの種類、バージョンによってはだめかもしれません。

<html>
<head>
<style type="text/css">

a#rrlink:link { background-color:#ff8888; text-decoration:none; } 
a#rrlink:visited { background-color:#ff8888; text-decoration:none; } 
a#rrlink:hover { background-color:#ffff88; text-decoration:none; }
/* hoverの設定は最後link,visitedより後 */

/* 幅1pxの重ね合わせ要素 */
b.f {
	width:1px;
	display:inline;
}

b.j {
	width:1px;
	display:block;
}

b.k {
	width:1px;
	display:block;
	margin-top:-1em;
}

/* 角パーツ */
b.g4 {
	vertical-align:bottom;
	height:4px;
	width:1px;
	overflow:hidden;
}
b.e4 {
	vertical-align:top;
	height:4px;
	width:1px;
	overflow:hidden;
}
b.g2 {
	vertical-align:bottom;
	height:2px;
	width:1px;
	overflow:hidden;
}
b.e2 {
	vertical-align:top;
	height:2px;
	width:1px;
	overflow:hidden;
}
b.g1 {
	vertical-align:bottom;
	height:1px;
	width:2px;
	overflow:hidden;
}
b.e1 {
	vertical-align:top;
	height:1px;
	width:2px;
	overflow:hidden;
}

b.k b ,b.j b {
	background:white;	/* 角パーツ色は、ここで調整 */
}

</style>

</head>
<body>

<font size=5>こちらの<a href="http://q.hatena.ne.jp/1201747665" id="rrlink"
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
>リンクに設定された角丸背景<b
    class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
></a>は、<BR>
マウスポインタを乗せると色が変わります。
</font>
<BR>
<font size=3>こちらの<a href="http://q.hatena.ne.jp/1201747665" id="rrlink"
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
>リンクに設定された角丸背景<b
    class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
></a>は、<BR>
マウスポインタを乗せると色が変わります。
</font>

</body>
</html>
id:hate_na_com

凄い!ありがとうございます!

2番の方の回答もそうでしたが、実は Mac の Safari だと表示がズレてしまいます。

2008/02/01 20:18:51
  • id:hate_na_com
    hate_na_com 2008/02/07 11:54:17
    自然に終わってしまいました。ごめんなさい。
    皆様ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません