サンプル
本サンプル表示用HTML
<input id="r0" type="radio" name="expnd" />
<input id="r1" type="radio" name="expnd" />
<input id="r2" type="radio" name="expnd" />
<label for="r0"><div id="back">
<article>
<div id="box1" class="img_box">
<label for="r1"><img src="img2/1.jpg" alt=""/></label>
<div id="cover1" class="cover"></div>
</div>
<div id="txt1" class="txt_box"> 朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。やがて、彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。<br />
６時５分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。
</div>
</article>
<article>
<div id="box2" class="img_box">
<label for="r2" ><img src="img2/m2.jpg" alt="" /></label>
<div id="cover2" class="cover"></div>
</div>
<div id="txt2" class="txt_box"> ここからの稜線歩きは、登りにもかかわらず、早く周りの山々を見渡したいという気持ちから、思わず足早になるが、一方では、何度も何度も剣・立山を始めだんだん見えてくる周りの山々を眺めては、感激に浸るのであった。そして、幸運なことにブロッケンまで現れ、我々を祝福してくれた。
岩小屋沢岳の手前のそれに匹敵するようなピークに登りつめると、もう３６０度の大パノラマ。言うことなし。 </div>
</article>
</div></label>
HTMLのポイント説明
・各articleにdiv、#box1,#txt1(1番目の場合)を配置し、#box1には画像、#txt1にはテキスト文を入れる。
・画像は拡大サイズのものを配置し、初期は、サムネイルサイズとする。
・各画像（ここでは2枚）にラジオボタンを関連付けする。
・画面全体の大きさの背景div、#backを配置し、ラジオボタンに関連付ける。(拡大表示時に画面のどこをクリックしても元に戻るようにするため)
・拡大時に画像クリックで元に戻るようにするため、画像と同じ位置、同じ大きさになるようなdiv、#cover1を配置しておく。
本サンプル表示用CSS
html,body { height:100% }
#back { height:100%;}
/* ラジオボタンを非表示 */
#r0, #r1, #r2 {
display: none;
}
/* 各項目ごとに左寄せ */
article { clear:left; }
/* 画像挿入枠 */
.img_box {
float: left;
padding: 5px 10px;
max-width: 120px;
max-height:68px;
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
}
/* 画像transition設定 */
.img_box img {
cursor: pointer;
width:100%;
height:100%;
}
/* テキスト枠 */
.txt_box {
padding: 10px 0;
}
/* 写真を覆うカバー */
.cover { width:100%;height:100%;position:absolute;top:0;left:0;display:none;}
/* サムネイルクリックで左寄せ */
#r1:checked ~ label #back #txt1 {
clear:left;
}
#r2:checked ~ label #back #txt2 {
clear:left;
}
/* サムネイルクリックで画像拡大*/
#r1:checked ~ label #back #box1 {
max-width:600px;max-height:338px;
}
#r1:checked ~ label #back #box1 #cover1 {
display:block;
}
#r2:checked ~ label #back #box2 {
max-width:800px;max-height:563px;
}
#r2:checked ~ label #back #box2 #cover2 {
display:block;
}
CSSのポイント説明
・html,body { height:100% }、#back { height:100%;}は、#backが画面全体をカバーするようにする。
・div.img_boxに、max-widthを、画像にwidth:100% を設定することにより、画面サイズに対応してリサイズするようにする。
・サムネイルがクリックされたら、#txt1は、clear:left により改行され、#box1 にtransition によるアニメーションが発生する。
なお、clear:left の記述をしなければ、改行はされず、拡大画像の右側にテキストが回り込むようになるので、拡大画像の大きさによっては、こちらの方がよい場合がある。
・画像が拡大された状態で、画像を含む、画面のどこがクリックされても、transitionがとかれ元の状態に戻る。
はじめまして。
お尋ねしたいことがあるのですが、「本サンプル表示用HTML」のlabel、#r0はどのような働きをしているのでしょうか？「本サンプル表示用HTML」のlabel、#r0を取り除くと#r1又は#r2のラジオボタンにチェックが入っていたとしても、対象が拡大表示されないので疑問に思い質問をさせていただきました。
sheepさんはじめまして。
#r0は、#r1,#r2に相当するサムネイルとテキスト文全体を含むdivです。しかも、それには、何のtransitionも付与していません。
したがって、どちらかの画像が拡大している時点で、画面のどこをクリックしても、transitionが解かれ、元の画面に戻ることになります。
返信ありがとうございます。
#r0は元の画面に戻す役割を担っているんですね。
しかし、それなら#r0のlabelタグのみを削除#したとして、#r1や#r2が拡大表示を元に戻せなくても拡大表示のみなら可能なのでは、と思っているのですが実際は拡大表示されません。
#r0のlabelを削除した場合でも#r1や#r2にチェックさえ付けばcheckedの処理に入ると考えているのですがどうも考えが間違っているようなのです。
基本的なことを伺っていて申し訳ないですが、お教え頂ければ幸いです。
を、削除してみてください。拡大します。
を消してしまうと、
cssの、#r1:checked ~ label #back #box1 { などのところのパスが通らなくなり、拡大は起きません。ここでもlabelを消してください。
labelを消したところ拡大するのを確認できました。
補足し忘れたのですが、こちらが試していたときのソースはHTMLはlabel、#r0を外しcssでは#r1:checked ~ label #back #box1のところを#r1:checked ~ #box1に変えて試していました。
#r1:checked ~ #box1に変えた場合だと拡大することができないのですが、#r1:checked ~ #back #box1だと拡大できるのはなぜなのでしょうか？
div の #back を消せば、#r1:checked ~ #box1 でOKです。
#r1:checked ~ 以下のところは、全部のパスを順序良く通す必要があります。
疑問が生じたら、考えましょう。