このページの本文へ

DESIGN Web制作の現場で使えるjQuery UIデザイン入門 ― 第23回

jQuery+CSSによるカルーセルパネルの作り方

2009年12月11日 11時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第23回です。過去の記事もご覧ください。


「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル(Carousel:回転木馬)は、メリーゴーラウンド(merry-go-round)のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。

今回制作するサンプル

サンプル画面
(画像クリックでサンプルページを表示します)


HTML/CSSでカルーセルのベースを作成する

 今回作成するカルーセルパネルのHTML/XHTML(以下、HTML)は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp要素(id名「carouselPrev」)、右方向にスライドさせる「進む」ボタン用のp要素(id名「carouselNext」)、パネルを実際に表示する領域としてdiv要素(id名「carouse」)を配置します。carouseの内側には非表示領域を含むパネル全体を格納するdiv要素(id名「carouselInner」)を配置し、その内側にパネルをul/li要素で記述します。ul要素にはclass属性「column」を設定し、パネルの数だけ繰り返し記述します。


サンプル01(HTML部分)


<div id="carouselWrap">
    <p id="carouselPrev"><img src="./images/btn_prev.gif" alt="前へ" /></p>
    <p id="carouselNext"><img src="./images/btn_next.gif" alt="次へ" /></p>
    <div id="carouse">
        <div id="carouselInner">
            <ul class="column">
                <li><a href="#"><img src="./images/photo1_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo2_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo3_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
            </ul>
            <ul class="column">
                <li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
                (中略)
                <li><a href="#"><img src="./images/photo11_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo12_thum.jpg" alt="" /></a></li>
            </ul>
            <ul class="column">
                <li><a href="#"><img src="./images/photo13_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo14_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo15_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo16_thum.jpg" alt="" /></a></li>
            </ul>
        </div>
    </div>
</div>

 このHTMLをCSSで次のようにレイアウトします。

カルーセル
CSSでカルーセルのレイアウトを作成する

サンプル01(CSS部分)


*{
    margin:0;
    padding:0;
}
#carouselWrap{
    margin:100px auto;
    width:620px;
    height:135px;
    padding:5px;
    background:url("./images/background.gif");
    position:relative;
}
#carouselPrev{
    position:absolute;
    top:65px;
    left:-8px;
    cursor:pointer;
}
#carouselNext{
    position:absolute;
    top:65px;
    right:-8px;
    cursor:pointer;
}
#carouse{
    width:100%;
    height:100%;
    overflow:hidden;
}
#carouselInner ul.column{
    width:605px;
    height:105px;
    padding:15px 0 15px 15px;
    list-style-type:none;
    float:left;
}
#carouselInner ul.column li{
    float:left;
    margin-right:10px;
    display:inline;
}
#carouselInner ul.column li img{
    border:none;
}


 カルーセルを囲む#carouselWrapは、カルーセルの外枠(装飾要素)を背景画像として配置します。外枠の幅(5px)の分の余白をpaddingで取り、表示領域(オレンジ線の内側の白の部分)のwidthとheightを設定します。

カルーセル
背景画像として配置する「background.gif」(オレンジの外枠部分)。内側の表示領域を#carouselWrapのwidthとheightに設定する

 「前へ」ボタン(#carouselPrev)や「次へ」ボタン(#carouselNext)をposition:absoluteで配置するため、#carouselWrapにはposition:relativeを設定しておきます。#carouselPrevと#carouselNextはそれぞれ#carouselWrapの左右に配置し、マウスカーソルの形状を「pointer」に変更しておきましょう(関連記事)。

 パネルの表示領域(#carouse)は#carouselWrapで設定した表示領域と同じサイズになるように、width:100%とheight:100%を設定し、表示領域からはみ出た部分をoverflow:hiddenで非表示にします。

 パネル(ul.column)はfloatで横並びにし、ul.columnの内側のli要素もfloatで横並びにします。li要素にfloatを指定した場合、Internet Explorer 6(IE6)ではサイズがずれてしまうバグがありますので、display:inlineを設定して回避します。これで、HTMLが先ほどの完成図のように配置できました。なお、パネル全体を格納する#carouselInnerにはパネル全体の横幅(width)を設定する必要がありますが、今回はパネルの数を柔軟に変更できるように、CSSではなくjQuery側で計算して設定します。

jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く