ラジオボタンをCSS3で装飾して作った画像ギャラリー

ラジオボタンを使った画像ギャラリーを作りましたので紹介してみます。かなり変わった使い方ですが、CSSの勉強にもなると思いますのでぜひ。

checkbox.png

今回は古いブラウザ(IE7,8)でもそれなりに対応できるようにしましたので、そこそこ実用的だと思います。

別サーバーにサンプルを用意していますので動作確認していただければと思います。

HTML

ではまず外部ファイルの読み込みから。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->
<link href="css/main.css" type="text/css" rel="stylesheet" />

CSSのところで出てくるセレクタ「:checked」がIE8以下では対応していないためSelectivizrを使っています。Selectivizrについては、以前書いた「CSS3を使うにあたって知っておきたいIE対策のまとめ」でご確認ください。とっても便利です。

IE8以下なんて知ったこっちゃない、という方は必要ないです。

続いて実際に表示する部分です。

<div id="wrap">
  <form> 
    <label id="img1">
      <input type="radio" name="btn" checked />
      <img src="img/01.png" />
    </label>
    <label id="img2">
      <input type="radio" name="btn" /> 
      <img src="img/02.png" />
    </label>
    <label id="img3">
      <input type="radio" name="btn" /> 
      <img src="img/03.png" />
    </label>
    <label id="img4">
      <input type="radio" name="btn" /> 
      <img src="img/04.png" />
    </label>
    <label id="img5">
      <input type="radio" name="btn" /> 
      <img src="img/05.png" />
    </label>
  </form> 
</div>

下の小さい画像はlabelの背景画像ということになります。labelをクリックするとラジオボタンにチェックしたことになり、ラジオボタンは透明にして見えないようにしています。

checkbox2.png

CSS

続いてCSSですが、少し長くなります。

#wrap {
  padding: 0px 0 10px 0;
  margin: 0px auto;
  width: 580px;
  text-align: center;
  position: relative;
}
input {
  margin: 400px 0 0 0;
  opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
form img {
  position:absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
}
input:checked + img {
  opacity: 1;
  box-shadow: 0px 0px 3px #777, 5px 5px 7px #777;
  width: auto;
  height: auto;
}
label {
  padding: 20px 35px;
  margin: 0 5px;
  border: 2px solid #ddd;
  cursor: pointer;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
}
#img1 { background:url(../img/01-mini.png); }
#img2 { background:url(../img/02-mini.png); }
#img3 { background:url(../img/03-mini.png); }
#img4 { background:url(../img/04-mini.png); }
#img5 { background:url(../img/05-mini.png); }
label:hover {
  border: 2px solid #ff0099;
}

コードを載せるだけというのも味気ないので、個別に説明します。

1~7行 #wrap
#wrap {
  padding: 0px 0 10px 0;
  margin: 0px auto;
  width: 580px;
  text-align: center;
  position: relative;
}

後で「position:absolute;」を使いますので、その基準となるボックスということで指定しています。横幅は画像の大きさによって調節してください。「margin: 0px auto;」で真ん中に表示させています。

8~12行 input
input {
  margin: 400px 0 0 0;
  opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

大きな画像の下に小さな画像を配置しますので、大きな画像の分marginで間隔を空けます。また、labelを優先して表示させるので、「opacity: 0;」で透明にしています。最終行は透明にする際のIE対策です。

13~24行 form img
form img {
  position:absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
}

チェックしていない画像の内容になります。チェックしていない場合は画像は表示されないようになっています。transitionを使って画像がスムーズに現れるようにしています。

transitionは略さずに書くとこんな感じです。

transition.png

これは以下のプロパティを略したものですが、Firefoxなどは略したtransitionに対応していません(IEはtransition自体に対応していません)ので、今回は略さず「transition-duration」のみ指定しています。

  • transition-property … 適用するプロパティ(all)
  • transition-duration … 変化にかかる時間(0)
  • transition-timing-function … 変化の仕方(ease)
  • transition-delay … 変化がいつ始まるか(0)

カッコ内は初期値になりますが、「transition-duration」は初期値が「0」で、「0」だとtransitionの意味がないので、今回は「0.3s」と指定しています。

25~30行 input:checked + img
input:checked + img {
  opacity: 1;
  box-shadow: 0px 0px 3px #777, 5px 5px 7px #777;
  width: auto;
  height: auto;
}

チェックされたラジオボタンの隣にある画像に適用される内容になります。「input:checked」はCSS3で登場したセレクタで、IE8以下だと対応していないため最初に紹介したselectivizrを使うことになります。CSS3 セレクタについては「保存版!CSS3セレクタの説明書」をご参考に。

ここで透明度を1にして縦と横を画像のサイズに合わせることで、正面の大きな画像に表示されます。画像はボックスシャドウで装飾しています。

31~40行 label
label {
  padding: 20px 35px;
  margin: 0 5px;
  border: 2px solid #ddd;
  cursor: pointer;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
}

下にある小さい画像の設定になります。画像は後で個別に指定しますので、ここでは画像以外の部分を指定します。画像の大きさはpaddingで調節します。

41~45行 #img
#img1 { background:url(../img/01-mini.png); }
#img2 { background:url(../img/02-mini.png); }
#img3 { background:url(../img/03-mini.png); }
#img4 { background:url(../img/04-mini.png); }
#img5 { background:url(../img/05-mini.png); }

下にある画像を指定します。labelの背景画像として指定します。

46~48行 label:hover
label:hover {
  border: 2px solid #ff0099;
}

下の小さい画像のマウスを乗せたときのボーダーの色を変えます。

最後に

ということでラジオボタンにCSSを使って画像ギャラリーを作ってみました。

「input:checked + img」というセレクタの使い方が今回のポイントですね。CSS3になってかなりセレクタの数も増えましたので、組み合わせれば色々できます。

ラジオボタンの使い方としては間違っているかもしれませんが、なかなか面白い使い方だと思います。自分でいうのもなんですが。

それでは。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加