HOME

アンカー

マークアップ

ページの特定部分を指示するときにアンカーをマークアップする方法

方法A:空のname属性

<p><a href="#lbh">About LBH</a></p>
<p>・・・テキストテキストテキスト・・・</p>
<a name="lbh"></a><h2>About LBH</h2>
<p>・・・テキストテキストテキスト・・・</p>

長所と短所
方法B:すべてをname属性に

<p><a href="#lbh">About LBH</a></p>
<p>・・・テキストテキストテキスト・・・</p>
<a name="lbh"><h2>About LBH</a></h2>
<p>・・・テキストテキストテキスト・・・</p>

長所と短所
方法C:名前の排除

<p><a href="#lbh">About LBH</a></p>
<p>・・・テキストテキストテキスト・・・</p>
<h2 id="lbh">About LBH</h2>
<p>・・・テキストテキストテキスト・・・</p>

長所と短所
方法D:オールインワン

<p><a href="#lbh">About LBH</a></p>
<p>・・・テキストテキストテキスト・・・</p>
<h2><a id="lbh" name="lbh">About LBH</a></h2>
<p>・・・テキストテキストテキスト・・・</p>

長所と短所

▲このページのトップへ

マークアップ

title属性

I just read <a href=http://www.downwithwallpaper.com/tips.html title="DownWitWallpaper.com | How to Take Down Wallpaper">a great article</a> that gave me a few home improvement tips.

ユーザーが情報を受け取る方法
ツールチップとしてのタイトル
ほとんどのブラウザはtitleで指定された値を「ツールチップ」に変えることでtitle属性をサポートしている。
表示のサンプル
I just read a great article; that gave me a few home improvement tips.
タイトルの読み上げ
スクリーンリーダーがリンクされたテキストと一緒にtitle属性の値を読み上げる。視覚障碍のあるユーザが目の見えるユーザと同様に、ジャンプさせられるリンク先をより良く理解できるようになる。

▲このページのトップへ

スタイルシート

文書全体のリンクカラーをHTMLで定義する代わりに、ハイパーリンクを独自にスタイル定義できる擬似クラスを使用することによってデザインの詳細とマークアップを切り離す。

a:link {
	color: green;
	text-decoration: none;
	font-weight: bold;
	}
a:link {
	color: green;
	text-decoration: underline overline;
	font-weight: bold;
	}

背景画像

a:link {
	padding-right: 15px;
	background: url(link_icon.gif) no-repeat center right;
	}

アイコンはリンクテキストの右に、上下方向に対して中央揃えするように設定。右側にパディングを追加してアイコンがテキストと重ならずに見えるようにしている。

点線のボーダー

text-decorationでデフォルトのアンダーラインを無効にし、border-bottomを追加する。
ボーダーをリンクテキストと同じ色にしたい場合は、border-bottomプロパティでもその色を宣言する必要がある。

※Windows版のIEは1ピクセルの点線ボーダーを「破線」と解釈する。小さいのでデザイン上は気にするほどではない。

a:link {
	color: green;
	text-decoration: none;
	border-bottom: 1px dotted green;
	}

アクセス済みのリンク

a:visited {
	color: purple;
	}

ホバリング

a:link {
	color: green;
	text-decoration: none;
	border-bottom: 1px dotted green;
	}
a:hover {
	color: blue;
	border-bottom: 1px solid blue;
	}

アクティブ状態

a:active {
	color: red;
	}

▲このページのトップへ