Designの記事

画像の使用を極力控えてかっこいいCSSデザインをやってみようっていう大会に参加してみようかなー。なんて思ったりした。

が、ギャラリーを見て自信なくなってきたのでやめようかな。

これなんかすごく良くできてると思う。とくにレイアウトが面白い。こちらも付箋っぽいのを画像無しで表現。面白いねー。こういう上手い人のを見るのもすごく勉強になるね！

onclick属性で良く使うと思われるのが、history.back()です。最近は使われないのかな？よく分かりませんけど・・・。その使い方に関して。

<a href="#" onclick="history.back()">戻る</a>

や

<form>
 <p><input type="button" value="戻る" onclick="history.back()" /></p>
</form>

等というように使っている人を良く見ます。しかし、これはいくない。どこが良くないかっていうと、まず、上のやつ。

href属性が「#」になってますね。これ、Firefoxではよく分からない動作をする(onclickとhrefクリックが同時に起こる?(自信無し))ので、そのまんまのページに行くようになってしまう事もあります。

次に、下のやつですが、formにはaction属性が必須です。action="#" とかやるのも手ですが、賢くありません。

ま、タグの中身のことはどうでもよくって、、、

以上2つの共通点は、「戻る」という文字列をクリックできるように見せるために、aタグやinputタグを用いているということです。

要はクリックできるように見せられれば、別にaタグやinputタグじゃなくても良いわけです。

クリックできるように見せるというのは、マウスカーソルを変更することと言っていいと思います。矢印のカーソルから手の形に変われば、ほとんどの人はクリックできると思うでしょう。

クリックできるように見せるには、CSSのcursorプロパティで実現できます。

まず、ごく普通のリンクに見せかけてみます。サンプル。。

span.back {
 text-decoration: underline;
 color: blue;
 cursor: pointer;
}

次は画像を使う場合。

p.back {
 width: 125px;
 height: 50px;
 cursor: pointer;
 text-indent: -99999px;
 background: url(./img/back_1.png) no-repeat center;
 border: 1px solid #ccc;
}

などと書いて、

<p class="back" onclick="history.back()">もどる</p>

<span class="back" onclick="history.back()">戻る</span>

と書けば代ジョブ？・・・・・で、ここまで書いてなんなんですが、

<a href="javascript:history.back();">戻る</a>

という風に書けば済むんじゃね？書いてから気づいた('A`)。。。そんなオチ。。

でも、onclickを使うときには、cssでcursorを指定するといいよっていう教えになったでしょ？

- Giant Diggnation Mosaic - Revision 2 -

画はdiggの中の人。

関連：「ディグ」創設者、ケビン・ローズさん（２９）に聞く(asahi.com)

(情報元：digg)