inputのradioボタンとlabelを使ってフォトギャラリーを作成する方法。クリックしたら、画像が現れる。Javascriptなし。

inputのradioボタンとlabelを使って、以下のようなフォトギャラリーを作ってみましょう。

写真をクリックしてみてください。

  <!-- type=""をradioに指定,nameとidはお好きな名前を記述-->
  <input type="radio" name="active" id="img1"> 
  <input type="radio" name="active" id="img2"> 
  <input type="radio" name="active" id="img3"> 
  <input type="radio" name="active" id="img4"> 
  
  <div class="wrapper">
      <!--for=""にinputのidを記述-->
      <label for="img1"><img src="../../images/blog/202007/10 (1).JPG" alt=""></label> 
      <label for="img2"><img src="../../images/blog/202007/10 (2).JPG" alt=""></label> 
      <label for="img3"><img src="../../images/blog/202007/10 (3).JPG" alt=""></label> 
      <label for="img4"><img src="../../images/blog/202007/10 (15).JPG" alt=""></label> 
  </div>
  
  <div class="img-card">
      <img src="../../images/blog/202007/10 (1).JPG" alt="">
      <img src="../../images/blog/202007/10 (2).JPG" alt="">
      <img src="../../images/blog/202007/10 (3).JPG" alt="">
      <img src="../../images/blog/202007/10 (15).JPG" alt="">
  </div>

 input{
     opacity: 0;        /* 0に指定してradioボタンを隠します */
 }
 .wrapper{
     height: 80px;
 }
 label>img{
     width: 100px;
     filter: grayscale(1);　　/* labelを押す前はグレーで表示 */
     opacity: .9;
 }
 #img1:checked ~ .wrapper label:nth-child(1) img,
 #img2:checked ~ .wrapper label:nth-child(2) img,
 #img3:checked ~ .wrapper label:nth-child(3) img,
 #img4:checked ~ .wrapper label:nth-child(4) img{
     filter: grayscale(0);　　/* labelを押すとグレーがカラーに */
     opacity: 1;
 }
 .img-card{
     position: relative;
     height: 600px;
 }
 .img-card img{
     position: absolute;
     transition: all ease-in .5s;　/* tansitionで写真がふわっと現れるように設定 */
     opacity: 0;　　               /* 最初は0に設定し、非表示 */
     max-width: 800px;
     max-height: 500px;
 }
 /* labelを押すと写真が表示されるようにoppacityを1に設定 */
 #img1:checked ~ .img-card img:nth-of-type(1){
    opacity: 1;
 }
 #img2:checked ~ .img-card img:nth-of-type(2){
    opacity: 1;
 }
 #img3:checked ~ .img-card img:nth-of-type(3){
    opacity: 1;
 }
 #img4:checked ~ .img-card img:nth-of-type(4){
    opacity: 1;
 }

まとめ

inputのradioボタンとlabelを使ってフォトギャラリーを作る方法を紹介しました。Javascriptなしでも十分表現できました。 応用すれば、クリックしたときに、いろいろアニメーションさせることができそうです。ぜひ、工夫してみてください。

<input>のid="" と <label>のfor="" でふたつを紐づける

 <input id="check">
 <label for="check"></label>