ラジオボタンを画像にしてから画像をクリックすると、画像の表示を切り替えられるようにすることができますが、なんとなくしか画像の表示切り替えをする仕組みが理解できていなかったので練習しておこうと思いました。
練習しやすいかなと思ったのはHTMLとCSSで画像ギャラリーにしてみることがいいかなと思うのでやってみます。
ラジオボタンの画像をクリックできるようにする
まずはラジオボタンと画像を作成して画像をクリックできるようにHTMLを記述する練習から始めようと思います。
- ラジオボタンの作成
- ラベルで関連付け
- ラジオボタンを画像にする
上記の流れで練習してみました。
HTMLでラジオボタンを作る
画像をクリックして切り替え表示する画像ギャラリーをまとめるためのdiv要素を作成します。
そしてdiv要素の中にinput type=”radio”でラジオボタンを作成します。
<input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item1" />
このときにHTMLで記述して表示されたラジオボタンは最終的にはCSSで非表示にしないと、画像とラジオボタンの2つが存在してしまうのでinput要素にクラス属性を指定して後ほどCSSで非表示にできるようにしておきます。
あとはラジオボタンを表示したinput要素にはid属性も指定しておきます。
この指定したidは、このあとに記述するHTMLのlabelタグとinput要素を関連させるために必要です。
labelタグでラジオボタンと関連をさせる
次にlabelタグを記述してinput要素と関連させるfor属性、クラス属性、img画像を記述します。
<label for="gallery-item1" class="gallery-label"><img src="img/gazou1.jpg" width="120" class="gallery-preview" /></label>
label要素のfor属性は関連付けしたいinput type=”radio”のラジオボタンに対して関連させるため、input要素で記述したid名をlabelのfor属性の属性値としても指定します。
クラス属性も記述しておきます。あとでCSSでラベルにCSSを適用できるようにするためです。
そしてlabelタグを閉じる前にimgタグで画像を指定して表示させておきます。label要素で記述するimgタグの画像は、画像ギャラリーの下で小さな画像になる部分です。
それなのでラジオボタンの代替としての画像になるのでinput type=”radio”で表示させたラジオボタンの数のぶんだけlabel要素のimgタグ画像にしておきます。
関連させたラジオボタンを画像にする
ラジオボタンを画像にして切り替えができる画像ギャラリーを作成するためには小さな画像をクリックしたら大きな画像に切り替えができるように、もう一個imgタグで画像を表示させました。
<img src="img/gazou1.jpg" width="500" class="gallery-fullsize" />
CSSで適用できるようにclass属性も付けておきます。
HTMLでラジオボタンとラベルをつけて画像を使用できるまでにした完成画像は上の画像です。ラジオボタン4つに対して画像を4つ使用してるので、下にはあと3つ同じHTMLが存在します。
そしてHTMLで記述してきた流れの記述をまとめたのは以下です。
<div id="gazou-container">
<div class="small-gazou">
<label for="gallery-item1" class="gallery-label"><img src="img/gazou1.jpg" width="120" class="gallery-preview" /></label>
<input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" checked /><img src="img/gazou1.jpg" width="500" class="gallery-fullsize" />
</div>
<div class="small-gazou">
<label for="gallery-item2" class="gallery-label"><img src="img/gazou2.jpg" width="120" class="gallery-preview" /></label>
<input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" />
<img src="img/gazou2.jpg" width="500" class="gallery-fullsize" />
</div>
<div class="small-gazou">
<label for="gallery-item3" class="gallery-label"><img src="img/gazou3.jpg" width="120" class="gallery-preview" /></label>
<input type="radio" name="gallery-list" class="gallery-selector" value="3.jpg" id="gallery-item3" />
<img src="img/gazou3.jpg" width="500" class="gallery-fullsize" />
</div>
<div class="small-gazou">
<label for="gallery-item4" class="gallery-label"><img src="img/gazou4.jpg" width="120" class="gallery-preview" /></label>
<input type="radio" name="gallery-list" class="gallery-selector" value="4.jpg" id="gallery-item4" />
<img src="img/gazou4.jpg" width="500" class="gallery-fullsize" />
</div>
</div>
これでラジオボタンの画像をクリックできるようにするまでのHTMLの記述が完成しました。
ラジオボタンをinput要素でid指定、画像はlabel要素でimgで画像表示させた画像がfor属性でラジオボタンと繋がりができてるので、画像をクリックしてもラジオボタンにチェックが入る仕組みを作成することができます。
画像をクリックして表示切り替えができるようにする
HTMLでマークアップしてラジオボタンの画像をクリックできるようにした後は、画像をクリックして表示切り替えができるようにするCSSを書いていきます。
練習する内容が画像ギャラリーにすることを目的にした練習なので、CSSでやることは以下流れで練習しました。
- 画像の位置指定
- ラジオボタンの非表示
- ラジオボタンを横並びにする
- 小さい画像をクリックして選択したら大きい画像に切り替わるようにする
という上記の流れをCSSで練習していきます。
CSSで画像の位置指定
画像ギャラリーを作成するためにHTMLでdiv要素で囲んだ<div id=”gazou-container”></div> をCSSで基準位置にします。
#gazou-container {
position: relative;
width: 600px;
height: auto;
padding-top: 390px;
padding-bottom: 15px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px #8684ed solid;
}
img.gallery-fullsize {
position: absolute;
top: 30px;
left: 50px;
display: none;
box-shadow: 10px 10px 15px -10px;
border-radius: 50%;
}
そして画像ギャラリーの大きな画像を表示するために記述したimg画像の位置を<div id=”gazou-container”></div>の左上を基準にして位置指定しました。
position:absoluteにすると<div id=”gazou-container”></div>を基準にして左上から始まる位置指定topとleftで調整します。
さらに大きな画像は小さな画像をクリックしたら表示することになるので非表示にしておきました。
ラジオボタンを非表示にする
次にCSSでラジオボタンを非表示にします。
HTMLでラジオボタンを作成して表示させた要素はinput要素です。そしてinput要素に練習で指定してるclass属性の属性値が「gallery-selector」です。
input.gallery-selector {
display: none;
}
それなのでラジオボタンを消して非表示にするためにはinput要素のgallery-selectorに対してCSSでdisplay:noneで非表示にしました。
ラジオボタンを非表示にするCSSの使用は別のラジオボタンのデザイン作成の時にも使用することがあるかと思うので、書くCSSは簡単だけど覚えておきたいことの一つです。
ちなみにラジオボタンをCSSで非表示にしないと上記のようなデザインになってしまうのです。
ラジオボタンを横並びにする
次はCSSで小さい画像ギャラリーの画像を囲んでるdiv要素を横並びにしました。
今回の練習で画像ギャラリーの画像は4つ使用してます。このときの4つの画像がdiv要素でブロック要素になってると思うのでCSSでインラインブロックにすればいいのだと思い練習がてらやったら上手く横並びできました。
このときの指定で最初はdiv要素に記述した「small-gazou」というclass属性の属性値をつけていたので.small-gazouでCSSを適用しました。
div.small-gazou {
display: inline-block;
}
しかし、よくよく考えれば「div.small-gazou」にして指定した方が良さそうだったのでdiv.small-gazouに変更してます。
変更した理由は、あとあと忘れてしまい何かでsmall-gazouと属性値をつけてしまいデザイン崩れをやらかしそうというミスを防げると思ったからです。
初歩的なことなのですが独学なので、たまにやらかすのです。
ラジオボタンの画像選択を切り替えるCSS
最後にラジオボタンの画像をクリックした選択画像の切り替えをできるようにするCSSを書いていきます。
input要素の中の小さな画像をはじめに画像ギャラリーの中から選択されクリックするわけなので、小さな画像のimgにclass属性の属性値の「gallery-selector」と、クリックして切り替わり表示される大きな画像に対してのCSSが必要なのだと思います。
そのため画像の選択切り替えができるCSSを使用して実現できるようにすればいいのだと思ってるのですが、指定する方法に苦戦したので調べてみました。
checkedの使い方が重要だった
ググって調べてみると画像の切り替えでもCSSで「:checked」を使うようです。
CSSの:checkedは擬似クラスなのですが、擬似クラスを使うことによってラジオボタンの要素と連動させることができる使い方ができるようなのです。
今回の画像切り替えの練習で言えば、小さい画像にしてる画像ギャラリーはinput要素にあるので「input要素がクリックされたら」という条件になるかなと思っています。
そして:checked擬似クラスが有効になったときに大きな画像を表示させたいのですが苦戦しました。
というのも理屈は理解できても「input.gallery-selector」で先に非表示にしてるため:checkedで有効になった要素はどう表示させるか練習していて分からなかったです。
調べました。
そして少し理解できたので練習継続です。
練習の結果は以下のようにCSSを書きました。
input.gallery-selector:checked ~ img.gallery-fullsize {
display: block;
}
これだけでしたw
ようは非表示だった要素を:checkedで有効にしたら、大きい画像の表示ができるようにセレクタ指定が重要だったのです。
セレクタは関節セレクタでチルダを使用しています。
関節セレクタは親要素が同じになる兄弟関係の弟に適用されるセレクタです。
もしくは隣接セレクタにして「+」としても画像をクリックして切り替えが可能でした。
まとめ
デモページ作ってないので画像ですいませんが、練習しながら完成させた画像ギャラリーが上記の画像です。
画像では左から二番目の画像をクリックして選択された画像が大きな画像で表示してます。
ラジオボタンの画像をクリックして表示切り替えをする練習をしたわけですが、HTMLでマークアップすることと、CSSで位置指定とラジオボタンの非表示まではスムーズに練習が進んだものの、肝心の画像切り替えるCSSの使い方が難しかったです。
HTMLとCSSで作成した画像ギャラリーの需要があるのかはわかりませんが練習するにはもってこいの練習材料でした。
