[JS]jQueryを使ってSEOにフレンドリーにするポイント
Post on:2010年4月26日
Adobeのサイト「Adobe Photoshop CS5 Extended」に使用されているようなスライドアウトするパネルを実装するチュートリアルをTutorialzineから紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010042601.png)
Contextual Slideout Tips With jQuery & CSS3
デモページ
このチュートリアルを作成するにあたり、アイデアの元となったのは下記のAdobeのサイトとのことです。
![サイトのキャプチャ](/wp-content/uploads-2010/2010042602.png)
「+」マークのラベルをクリックすると、それに対応したパネルがぐぃーんとアニメーションでスライドアウトします。
各パネルのエレメントはp要素で実装されており、検索エンジンのロボットにもしっかりと見えるように配慮されています。
これらはページロード時にjQueryによりマークアップが変更され、パネルのエレメントとして表示されるよう設計されています。
sponsors