Day: February 22, 2012

今回はCSSのみを使用して、かなりイイ感じのスライディング・イメージ・パネルの作成方法をご紹介したいと思います。これはパネルに背景画像をセットして、ラベルをクリックすればアニメーション化されるというものです。ラベルにはラジオボタンを使用し、ターゲットはそれそれのパネル部分とし間接セレクタ（general sibling selector）を使っていきます。 今回使用する美しいな画像はJoanna Kustraさんによるもので、Attribution-NonCommercial 3.0 Unported Creative Commons Licenseの元に帰属しています。 同じ様なテクニックを使って、画像をホバーするとスクリーンがかかる効果をFilter Functionality with CSS3でご紹介しておりますので、こちらも併せてご覧くださいね。 ※CSS transitionとアニメーションをサポートしているブラウザでのみ正常に動作します。お気を付け下さいね。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ HTMLは大分すると「ラジオボタンとラベル」「パネル用コンテナと各画像のスライス」「タイトル」という３つのパートから成り立っています。「cr-bgimg」クラスを割り当てたコンテナは各パネルを含有しています。更に各パネルは４枚にスライスされており、各スライスは正しい場所に配置されるようにSPANタグで囲まれています。すなわち１つ目のパネルは４枚のスライスから成り、１つ目のスライスは背景画像として最も左側に配置されます。２つ目のパネルも勿論４枚のスライスから成りますが、背景画像の配置場所は「次」の部分へと移行されます。 タイトル用のH3要素には２つのSPANタグがあり、１つはメインヘッドライン用でもう１つはサブヘッドライン用です。 それではCSSスタイリングに移りましょう！ CSSスタイリング ベンダープリフィックスは省略しています。ご了承ください。 私たちの目的は、第１にラベルでカバーしてラジオボタンを隠すことです。WEBブラウザ上でラベルをクリックすれば、それぞれのチェックボックスかラジオボタンが選択された状態になります。なので、インプットにIDを与えればラベルの「for = 参照ID」属性を使って、それぞれのインプットを参照することが可能となります。 次に全ての背景画像を適切な部分に配置すること。第３にラベルがクリックされたら、それぞれのスライス画像とタイトルがきちんと表示されるようにすることです。 それでは、まずは最も外側のコンテナのスタイリングです。白いボーダー線を引いて、ボックスシャドウでほんのり影もつけましょう。 きちんと目的のスライス画像とタイトルに辿りつくように間接セレクタ（general sibling selector）を使用したいので、ここでまずラベルを適切に配置しておく必要があります。z-indexを使ってレイヤーが最上部に来るようにし、トップマージンを350px確保して下の方に配置します。 ラベルに小さな円を加えて、ちょっとかわいくデコりましょう。疑似要素を使って丁度テキストの背後に来るように配置します。 パネル間にもちょっと細工を施してみましょう。ラベル用に別の疑似要素を用意して、パネル状に縦線を描きます。グラデーションを使っているので上の方に行くにつれ線が薄く消えていくよう見えるはずです。 最後のパネルに縦線は不要なので、幅を0pxにしています。 ラベルの設定が完了したので、安心してインプットを隠してしまいましょう。 これでラベルをクリックすれば、対応するインプットがチェックされた状態になります。では今度はラベルに間接セレクタ（general sibling selector）を使用して細工していきましょう。下記のようにコーディングすると、選択されたラベルの色を変更することができます。 それから円部分の疑似要素の背景色とボックスシャドウも変更します。 画像パネルのコンテナはabsoluteで絶対配置し、幅はいっぱいいっぱいに使います。このコンテナは「現在選択されている画像」に背景画像を設定する為、後程使用します。これはデフォルトとして何らかの画像が表示された状態を維持する為です。なので幾つかの背景プロパティを追加しておきましょう。 表示用の画像（パネル）は４枚に分割しているので、１つのパネルの幅は150pxです。（600÷4）。パネルはフロートで左に配置し、スライドインして来る時に余計な部分まで表示したくないのでオーバーフロー分はhiddenで隠します。 SPANタグで囲まれた各スライスはabsoluteで絶対配置し、左側-185pxに配置することにより最初は隠された状態であるようにします。 それから次に画像コンテナの背景と、それぞれの画像スライスの設定です。 ここで背景ポジションはパネルによって配置場所が異なるので、間違わないように気をつけながら設定します。 ラベルがクリックされたら、全てのスライス全てが右側へとスライドアウトするように設定します。 選択された背景画像は-150pxから0pxへとスライドインしてきます。 最後にH3のタイトル要素とSPANタグのスタイリングを行います。H3には透過度のトランジッションを適用させ、対応するラベル（インプット）が選択されたら透過度が０から１へと増加するよう設定します。 もしモバイルデバイスではラベルのトリックを使用したくなかったら、メディアクエリーを使って以下のように設定します。 これはとてもシンプルな解決方法なので、必要あらばif the label trick is supportedもチェックしてみてください。 これで完成です！他にも色々実現可能な効果があるかと思います。幾つかデモをご用意しましたので、そちらも併せてご覧くださいね。 DEMO Demo 1: Slide to right（右側へスライド） Demo 2: Odd/even slide to left/right（奇数と偶数でそれぞれ右側と左側へ） Demo 3: Odd/even slide up/down（奇数と偶数で上と下へ） Demo 4: Scale up/down（縮小拡大） 今回はここまでです。みなさんのご参考になれば幸いです。