スタイルシートマニア

HTML5における<a> | ホームページカスタマイズ Tips

っということでさっそく新しい記事でも書いてみました。

それにしてもHTML5&CSS3はすごいです。
やりようによっちゃFlashライクなことまでできちゃいますね。
ただ、やりすぎるとIEが対応していない(笑)
もぉ、地デジみたいに「7月21日からIE6は映らなくなります 。」みたいな事にはならないんでしょうか!
でも、僕が思うに正直HTMLでここまでできることは望んでないんですが・・・っと思うのは僕だけでしょうか?
こういったリッチメディアをやるためにFlashがあるわけで、この場合適材適所かと。
まあ、 iPadとかiPhoneユーザーからしてみるとFlashが映らない分こちらがいいんでしょうけどね。

それはさておき、タイトルの「HTML5における<a>」ですが、驚きの新事実です!(僕だけ)
っというのも、HTML5では<a>タグで<h>タグや<p>タグをまたいで設定していいのです。

こんな感じで

<div class="box">
<a href="http://source-marine.net"><h2>ホームページ制作ならSource Marine</h2>
<p>Source Marineでは、ドメインの取得・サーバの手配・管理まで安心価格で行っております。</p></a>
</div>
<!-- box End -->

いままでは、

<div class="box">
<h2><a href="http://source-marine.net">ホームページ制作ならSource Marine</a></h2>
<p>Source Marineでは、ドメインの取得・サーバの手配・管理まで安心価格で行っております。</p>
<p><a href="http://source-marine.net">詳細はこちら</a></p>
</div>
<!-- box End -->

みたいに、分けて書かないといけない状態で、コーディング側にも、ユーザー側にもあまり親切じゃない設計でした。
僕にしてみたら、なんで今までこうしなかったんだぁーーーっという感じですが・・・。

まあ、口でいうより実践でサンプル

コーディング側はもちろんのことですが、やはりユーザ側からしてみると、いちいち詳細はこちらにカーソルを合わせてクリックしないといけないので直感的じゃないというのが一番でした。
僕はこのために、BigTagetっというjQueryを使ったdivタグ全体をリンクに変えてしまうスクリプトを入れていたくらいです。
BigTagetの詳細はこちら
まあ、小さな事ですけど僕にとっては「やっとわかってくれたんだ・・・」っという感動の記事でした。

Author:庄野英朗
Comments:0

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

コメントを残す