リンク

リンクの設定　 CSS画像ロールオーバー　 CSS文字ロールオーバー　画像をズラす方法　他のページへ飛ぶ　 footerリンク　

リンクの設定


a:link{color:#6633FF;}
a:visited{color:#6633FF;}
a:hover{color:#6699FF;}
a:active{color:#6633FF;}

a:link	リンクの色
a:visited	リンクページに訪れた後の状態
a:active	押された瞬間
a:hover	マウスが乗っている時

※全体bodyのリンク設定では、色のみの設定しか出来ない。IE6のバグのようだ。
装飾する為には、aタグがあるdiv要素に装飾内容を記入する。

transition: .4s;　でアニメーションをつけられる。ふんわり画面がかわる


/*--------------------------------------------------------

nav関連

--------------------------------------------------------*/
nav{
	border:solid 1px #fb637e;
}
nav ul{
	list-style:none;
	text-align:center;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}
nav ul li{
	width:260px;
	max-width:100%;
}

/*リンク関連*/
nav a{
	text-decoration:none;
	background-color:#fb637e;
	display:block;
	padding:5px 10px;
	transition: .4s;
}
nav a:hover{
	background-color:#FFFFFF;
	padding:5px 10px;
	transition: .4s;
}

内部リンクで上部を調整


【CSS】
/*位置調整*/
a.anchor {
	display: block;
	padding-top: 50px;
	margin-top: -50px;
}


【HTML】
リンク先のタイトルの上にアンカーを設置する
<a id="uketuke" class="anchor"></a>

ボタンリンク


<div class="btm s60 fadein"><a href="#">ガールスカウトを体験してみる</a></div>


/*お問い合わせリンク：ふんわりリンク*/
.btm{
	font-size:120%;
}
.btm a{
	dosplay:block;
	background-color:#009a5a;
	text-decoration:none;
	border:solid 1px #009a5a;
	padding:20px 40px;
	border-radius:10px;
	transition: all 300ms 0s ease;
}
.btm a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	padding-left: 20px;
	font-weight:bold;
}
.btm a:link{color:#FFFFFF;}
.btm a:visited{color:#FFFFFF;}
.btm a:hover{color:#009a5a; background-color:#FFFFFF;}
.btm a:active{color:#FFFFFF;}

記述方法


h2 a:active,h2 a:hover{
	color:#FFFFFF;
}

リンクの反転


background-color　　でa:linl と同じ色を指定する。

ハイパーリンクの下線を消すタグ


text-decoration:none;

aタグの点線のリンク線を消す方法


a{ outline: none; }

aタグの不透明の方法


【ＣＳＳ】
a:hover img.contact{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	background:none!important;
}

【ＨＴＭＬ】
<a href="#"><img class="contact" src="img/btm-contact.jpg" alt="お問い合わせ・場所" /></a>

aタグの不透明の方法。さらに画像をズラす！


#flame_left aside a:hover{
	position:relative;
	top:1px;
	left:1px;
}
#flame_left aside a:hover{
    filter: Alpha(opacity=70); /* IE系 */
    -moz-opacity: 0.7; /* Mozzila系 */
    opacity: 0.7;
}

▲このページのTOPに戻る▲

画像の上にマウスが乗ったら文字を表示する


onMouseover="dispTF('もじもじ１')
を付けるとマウスが乗った時に文字を表示させられる

<div id="msgText" style="">ここに表示</div>
<script language="JavaScript">
<!--
function dispTF(txt)
{
	document.getElementById("msgText").innerHTML = txt;
}
// --></script>


◆画像の上に文字表示
<img src="000.jpg" style="position:absolute;top:0px;left:0px">
<div id="msgText" style="position:absolute;top:120px;left:40px;color:white"></div>
<div style="position:absolute;top:250px;left:10px;">
<img src="image1.gif" border="0" onMouseover="dispTF('もじもじ１')">
<img src="image2.gif" border="0" onMouseover="dispTF('もじもじ２です')">
<img src="image3.gif" border="0" onMouseover="dispTF('もじもじ３だよ')">
</div>

▲このページのTOPに戻る▲

CSS画像ロールオーバー

画像のサイズ　横100px　×　縦50

overflow:hidden; 領域内に収まりきらない内容を、どのように処理するかを指定するプロパティ。
hidden　は領域からはみ出たら、表示させない　処理。

li に個別にIDを振るのがポイント！


【 HTML 】
<ul id="globalnavi">
	<li id="navi1"><a href="#">MENU01</a></li>
	<li id="navi2"><a href="#">MENU02</a></li>
	<li id="navi3"><a href="#">MENU03</a></li>
	<li id="navi4"><a href="#">MENU04</a></li>
	<li id="navi5"><a href="#">MENU05</a></li>
</ul>


【 CSS 】
#globalnavi{　#画像の全体のサイズとはみ出たら表示させないように指定
	width:500px;
	overflow:hidden;
}
#globalnavi li{　#フロートで横一列に並べる。display:block;　でかっつり揃う。
	float:left;
	height:50px;
	display:block;
}
#globalnavi li a{
	display:block;
	overflow: hidden;
	background-image:url(../image/sample/h-link01.jpg);
	height:0px;
	padding-top:50px;
}
#navi1 a{width:100px; background-position:0 0;}
#navi2 a{width:100px; background-position:-100px 0;}
#navi3 a{width:100px; background-position:-200px 0;}
#navi4 a{width:100px; background-position:-300px 0;}
#navi5 a{width:100px; background-position:-400px 0;} 

#navi1 a:hover{width:100px; background-position:0 -50px;}
#navi2 a:hover{width:100px; background-position:-100px -50px;}
#navi3 a:hover{width:100px; background-position:-200px -50px;}
#navi4 a:hover{width:100px; background-position:-300px -50px;}
#navi5 a:hover{width:100px; background-position:-400px -50px;}

▲このページのTOPに戻る▲

CSS文字ロールオーバー

画像のサイズ　横100px　×　縦50

送　信


【 HTML 】
<div id ="navi_sub"><a href="#">送　信</a></div>

【 CSS 】
#navi_sub a{
	display:block;
	width:100px;
	color:#F0027F;
	background-image:url(../image/sample/h-link02.jpg);
	height:50px;
	line-height:50px; #行間を高さと同じにすると中央に揃う
	text-decoration:none;
	text-align:center;
}
#navi_sub a:hover{
	color:orange;
	background-image:url(../image/sample/h-link03.jpg);
}

▲このページのTOPに戻る▲

画像をズラす方法 background-position:


【 テキストリンク 】
a:hover{
	background-image:url(01.gif);
	background-repeat:no-repeat;
	background-position:0px -100px;
} 


【 画像の場合 】
#boxBR a:hover{
	position:relative;
	top:1px;
	left:1px;
}

IEのバグを防ぐ為、imgはdisplay:block;でブック要素にしておく。

→IEで画像がちらつくのを防止
http://chaichan.web.infoseek.co.jp/qanda/qa6260.htm
上のをテキストにしました。

→リンクに関して
http://zyco.abz.jp/design/index6.shtml

画像をズラしてさらにロールオーバー時半透明にするCSS


#flame_left aside a:hover{
	position:relative;
	top:1px;
	left:1px;
}
#flame_left aside a:hover{
    filter: Alpha(opacity=70); /* IE系 */
    -moz-opacity: 0.7; /* Mozzila系 */
    opacity: 0.7;
}

▲このページのTOPに戻る▲

他のページへ飛ぶ

サイトの引越しなど、新しいURLを知らせる場合には自動的にそのページにジャンプ出来るように設定しておく。

_blank・・・新しいウィンドウ
_self・・・同ウィンドウ

↓metaタグに記述↓


<meta http-equiv="refresh" content="秒数";URL="移動先のURL">

<a href="・・・・" target="_blank"></a>

▲このページのTOPに戻る▲

footerリンク


<p>|<a href="#">TOP</a>|<a href="#">Play Diary</a>|<a href="#">Blog</a>|</p>

《 CSS 》
#footer p{
	padding-top:30px;
	padding-bottom:130px;
	margin-left:250px;
}
#footer a{margin:0px 10px;}

▲このページのTOPに戻る▲

メーラーの立ち上げ


<a href="mailto:あなたのメールアドレス">～</a>

▲このページのTOPに戻る▲

－リンク－

リンクの設定

内部リンクで上部を調整

ボタンリンク

記述方法

リンクの反転

ハイパーリンクの下線を消すタグ

aタグの点線のリンク線を消す方法

aタグの不透明の方法

aタグの不透明の方法。さらに画像をズラす！

画像の上にマウスが乗ったら文字を表示する

CSS画像ロールオーバー

CSS文字ロールオーバー

画像をズラす方法 background-position:

画像をズラしてさらにロールオーバー時半透明にするCSS

他のページへ飛ぶ

footerリンク

メーラーの立ち上げ