スッキリかんたんスタイルシート～リンク

トップ＞スッキリかんたんスタイルシート

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

カーソルを載せると，下線が表示する。

フェイスインターネットショップ / マイクロソフト　ショッピング / ADSL・FTTH徹底比較 ■ 価格.com ■

>>> HTMLソース

<html>
<head>
<title>リンク先に下線を表示する</title>
<style type="text/css">
<!--
p {font-size:12px;}
a:link {color:#cc6600;text-decoration:none;}
a:hover {text-decoration:underline;} //ここがカーソルが載った時のアクションです。
-->
</style>
</head>
<body>
<p>
<a Href="aaa.htm" >フェイスインターネットショップ</a> / 
<a Href="bbb.htm">マイクロソフト　ショッピング</a> / 
<a Href="ccc.htm">ADSL・FTTH徹底比較 ■ 価格.com ■</a> 
</p>
</body>
</html>

カーソルを載せると，下線の色が変化する。

無料カンタン動画配信ツール！らくちんFLVメーカー

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>カーソルを載せると，下線の色が変化する</title>
<style type="text/css">
<!--
p {font-size:14px;}
a:link {color:#0080FF;
   text-decoration:none;
   border-bottom:dotted 1px #0080FF;}
a:hover {border-bottom:dotted 1px #FF0000;}
 //カーソルが載ったときに点線（dotted）が，青（#0080FF）から赤（#FF0000）に変わる。
-->
</style>
</head>
<body>
<p>
<a Href="aaa.htm">無料カンタン動画配信ツール！らくちんFLVメーカー</a>
</p>
</body>
</html>

リンク先に色を指定する。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>リンク先に色を指定する。</title>
<style type="text/css">
<!--
ul {list-style-type:none;
	font-weight:bold;}
li a {font-size:13pt;}
li a:link {color:coral;}
li a:visited {color:turquoise;}
li a:hover {color:purple;}
li a:active {color:lawngreen;}
-->
</style>
</head>
<body>
<ul>
<li>
<a Href="aaa.htm">ファーストサーバのレンタルサーバー・アフィリエイトプログラム</a>
</li>
<li>
<a Href="bbb.htm">ブログもSSLもショッピングカートも無料で利用可能。</a>
</li>
</ul>
</body>
</html>

リンク先の背景色に色を指定する。

マイクロソフト価格.comブロードバンドでアクセスプロバイダ比較ヤフージャパンのレンタルサーバー

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>リンク先の背景色に色を指定する。</title>
<style type="text/css">
<!--
a {display:block;
   width:300px;
   font-size:14px;
   font-weight:bold;
   color:white;
   text-decoration:none;
   padding:2px 10px;
   margin:2px 0px;}
a:link {background-color:coral;}
a:visited {background-color:turquoise;}
a:hover {background-color:purple;}
a:active {background-color:lawngreen;}
-->
</style>
</head>
<body>
<a Href="aaa.htm">マイクロソフト</a>
<a Href="bbb.htm">価格.comブロードバンドでアクセスプロバイダ比較</a>
<a Href="ccc.htm">ヤフージャパンのレンタルサーバー</a>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

枠線を活用したロールオーバー１

Adobe Illustrator CS2 Adobe Photoshop CS2 Adobe GoLive CS2 Adobe InDesign CS2

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線を活用したロールオーバー１</title>
<style type="text/css">
<!--
div {margin-top:30px;
     font-size:13px;}
a.box013 {padding:10px 15px;
	text-decoration:none;
	font-weight:bold;
       color:#FFB895;
	border-top:solid #FFB895 10px;
	border-bottom:solid #FFB895 1px;
	border-left:solid #FFB895 1px;
	border-right:solid #FFB895 1px;}
a:hover.box013 {padding:10px 15px;
	text-decoration:none;
	font-weight:bold;
       color:#FF8040;
	border-top:solid #FF8040 20px;
	border-bottom:dashed #FF8040 1px;
	border-left:dashed #FF8040 1px;
	border-right:dashed #FF8040 1px;}
-->
</style>
</head>
<DIV>
<a class="box013" href="aaa.htm">Adobe Illustrator CS2</a>
<a class="box013" href="bbb.htm">Adobe Photoshop CS2</a>
<a class="box013" href="ccc.htm">Adobe GoLive CS2</a>
<a class="box013" href="ddd.htm">Adobe InDesign CS2</a>
</DIV><br>
</body>
</html>

枠線を活用したロールオーバー２

ブロードバンドはＮＴＴ BRAOD-GATE 02 【Sony】固定IP付光"bit-drive" サムスンダイレクト

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線を活用したロールオーバー２</title>
<style type="text/css">
<!--
div {margin-top:30px;
     font-size:13px;}
a {text-decoration:none;
	font-weight:bold;
       padding:5px 10px 5px 10px;
	color:#EA0000;
	border:groove #FF8080 3px;
	background-color:#FFBFBF;}
a:hover {text-decoration:none;
	font-weight:bold;
       padding:7px 12px 7px 12px;
	color:#ffffff;
	border:ridge #FF4A4A 3px;
	background-color:#FF4A4A;}
-->
</style>
</head>
<body>
<div>
<a href="aaa.htm">ブロードバンドはＮＴＴ</a>
<a href="bbb.htm">BRAOD-GATE 02</a>
<a href="ccc.htm">【Sony】固定IP付光"bit-drive"</a>
<a href="ddd.htm">サムスンダイレクト</a>
</div><br>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

a要素をブロック要素に指定する

品揃え・価格に自信あり！ Yahoo！BBのお申し込みはココをクリック!! マイクロソフト　ショッピング全国31店舗展開！BTOパソコンならドスパラへ！

a要素はwidthを使った幅の指定ができませんが，ブロック要素を使って左のように幅を合わせることができます。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>a要素をブロック要素に指定する</title>
<style type="text/css">
<!--
a {display:block;
	width:350px;
	margin:10px;
	padding:5px;
	text-decoration:none;
	font-weight:bold;
      font-size:15px;
	background-color:#C4C4FF;}
.text002 {position:absolute;
          top:40px;
          left:400px;
          width:200px;
          height:80px;
          font-size:16px;
          color:#ffffff;
          background-color:#004080;
	    padding:5px;}
-->
</style>
</head>
<body>
<div>
<a Href="aaa.htm">品揃え・価格に自信あり！</a>
<a Href="bbb.htm">Yahoo！BBのお申し込みはココをクリック!!</a>
<a Href="ccc.htm">マイクロソフト　ショッピング</a>
<a Href="ddd.htm">全国31店舗展開！BTOパソコンならドスパラへ！</a>
<DIV class="text002">
a要素はwidthを使った幅の指定ができませんが，
ブロック要素を使って左のように幅を合わせることができます。
</DIV>
</div>
</body>
</html>

「パソコン」で検索 byベクターPCショップ