必要のないときはコードを隠してエントリをすっきりさせるjavascript活用術
May 7, 2007 8:08 AM written by

DevthoughtのブログでCSSやJavascriptの記事が書かれていました。けれども肝心のコードが見当たりません。

devthough3.gif

"Click here to see HTML code"という気になる部分にマウスオーバーすると・・・。

devthough2.gif

アイコンがちょこっと動いて、そこに何かがあることを知らせてくれます。実はこの部分をクリックして初めてコードが登場します。

devthough1.gif

コードが長いと文章が見にくくなってしまいますが、こうやって要らないときは隠しておけばエントリー全体がすっきりして内容をざっと把握できますね。

JavascriptやCSSの記事でコードは重要なポイントとなりますが、普段は隠す、でも見たいときにはアニメーションで強調、という新しい切り口です。

ちなみに、アニメーションを実現しているjavascriptは、ライブラリを使わず自前で用意されてるようでした。もしライブラリを使って実装したいという方はscript.aculo.usのEffect.SlideDownとEffect.SlideUPが使えそうですね。

» Devthought

この記事のトラックバックURL (トラックバックは承認後に公開されます)

コメント一覧

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント
※ Let's Add Value. Thank You.

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

Powered by
MovableType 3.34

Icons powered by famfamfam.

人気ブログランキング - 100SHIKI
ワード