CSSでmap(area)タグみたいなものを作成してみた。

css

今日は『古事記』の「伊弉諾・伊邪那岐（いざなぎ・いざなみ」の話を聞きましたね。
教科書で、名前だけは知っておりましたが、実際に話をきくと
非常に感動してしまいますね。
今度古事記にも触れてみようと思います。


さて今日のお題は
「CSSでmap(area)タグみたいなものを作成する」です。
要は

<map name="Map">
  <area shape="rect" coords="194,40,301,91" href="#">
</map>

上記のようなタグごと
CSSにしちゃおうってことです。


概要をざっと説明すると、
普通にリンクを張って、テキスト部分だけを
text-indentで-画面上から外すという作戦です。
あとはleftとTopから何ピクセル動かすかを定義するだけ。


まず、html任意の場所でリンクタグにidまたはclass定義をします。

<a id="*****" href="http://d.hatena.ne.jp/uen1130/"><p>&nbsp;</p></a>

もちろん

 

の部分は文字列を入れてもOK！！


そして、CSSで以下の要件を満たします。
・テキストを画面上から削除
・位置定義をする

#***** {
	height:リンクとなる部分の高さ;
	width:リンクとなる部分の横幅;
	text-indent: -9999px;
　　　　/* ↑ここでテキストを画面上から削除する */
	display: block;
　　　　/* ↓ここから位置情報 */
	position: absolute;
	left: 216px;
	top: 108px;
}


位置定義はお使いのエディタによってことなると思いますが、
Dreamweaverの場合は、ドラッグアンドドロップで
位置やリンク部分をいじれるから楽です。


コピペして使用していただいても良いけど、
それでは紛い物のデザイナーになってしまう！！
必ず、いつか自分で作成してみて、
もっと効率の良い方法があれば、教えてください。


勝手な持論を言います。

いつも100％で生きている人間だけが、
ここ一番で120％の力を出す。


最高のデザイナーになりたいなら、
いつも最高のデザインを求めよう！！


と急に偉そうになりましたが、
今日は連日の飲みで、仕事で60％くらいしか出せていません。
だからいつまでたっても技量のつかない
パパでした。