jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
水平スクロールをうまく使ったデザインサイト４０:phpspot開発日誌
水平スクロールをうまく使ったデザインサイトが４０種類ほどまとまったエントリのご紹介です。 使い方によってはユニークなサイトが作れそうな水平スクロールサイトのサンプルが色々あって、水平スクロールするようなサイトを作る場合のアイデアのネタ帳として活用できそうですね。 Alex Flueras 横にスクロールすると写真がズラっと出てくるＵＩでクリックするとクリックした写真にアニメーションスクロールします。 これは水平スクロールを無駄に使っていない、なかなかよいデザインだなぁと思いました。 BBH スクロールバーが出るのではなく、JavaScriptによって要素をスライドさせています。これもなかなかクールなデザインです。 スクロール部分が微妙に分かりにくい点がユーザビリティ的には良くないかもしれませんがスタイル的にはクールですね。 Chalie Gentle 上のBBHに比べて矢印が大きくて分かり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
