Pure CSS – CSS だけを使ってイメージギャラリーを作ろう!!
このブログでは, これまでに CSS/CSS3 を使って色々なものを作ってきました.
- CSS3 を使って Mac の Dock っぽい表現
- CSS3 でスターウォーズを再現
- CSS3 とほんのちょっとの JavaScript で雪を降らす
- あけおめ企画 – 画像を一切使用せず CSS で鏡餅年賀状を描いてみた
ん~懐かしい. 上記のサンプルを見て分かる通り CSS はもはや CSS ではなくなってきています. 良くも悪くも立派なプログラミング言語?と言ってもいいでしょう.
本来, CSS というのは文章の構造と見た目を分離するために創られました. ですが, CSS3 の登場で自由度が格段に上がりました.
画像で表現していた角丸は border-radius で, JavaScript で表現していたアニメーションは transition や animation で行うことができるようになりました.
今回はそんな CSS/CSS3 を使ってイメージギャラリーを作ってみました. JavaScript は一切使用していません. CSS/CSS3 の可能性の片鱗を感じていただければ幸いです.
Sample and Download
今回制作したサンプルはこちら. jsdo.it version はこちら.
下のサムネイルをクリックすると上の画像が変わるのが分かるかと思います.
ダウンロードはこちらからできます.
Code
今回のサンプル全体のコードです.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Gallery</title> <style> * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: "Meiryo", Arial, Helvetica, sans-serif; } body { background: #eee; } h1 { margin: 10px 20px; } #wrapper { margin: auto; position: absolute; width: 520px; height: 490px; top: 0; right: 0; bottom: 0; left: 0; background: white; box-shadow: 0px 0px 8px 0px #aaa, 0px 0px 8px 0px #aaa, 0px 0px 16px 0px #aaa; } /** * スライダ */ ul#slider { margin: 20px auto; position: relative; width: 480px; height: 360px; list-style: none; } ul#slider li { -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; position: absolute; } ul#slider.normal li:not(:target) { opacity: 0.0; } ul#slider.normal li:target { } /** * サムネイル */ ul#thumb { margin: auto; padding: 20px; width: 520px; display: -webkit-box; display: -moz-box; display: -o-box; display: box; box-shadow: inset 0px 0px 8px 0px #fff; background-color: black; list-style: none; overflow-x: auto; } ul#thumb li { -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin: 0px 10px; } ul#thumb li img { border: 1px solid #aaa; } ul#thumb li:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0.75; z-index: 0; } ul#thumb li:not(:hover) { z-index: auto; } </style> </head> <body> <h1>Image Gallery</h1> <div id="wrapper"> <ul id="slider" class="normal"> <li id="0"> <img src="img/IMG_0061.jpg" width="480" height="360" /> </li> <li id="1"> <img src="img/IMG_0066.jpg" width="480" height="360" /> </li> <li id="2"> <img src="img/IMG_0071.jpg" width="480" height="360" /> </li> <li id="3"> <img src="img/IMG_0101.jpg" width="480" height="360" /> </li> </ul> <ul id="thumb"> <li> <a href="#0"> <img src="img/IMG_0061.jpg" width="50" height="50" /> </a> </li> <li> <a href="#1"> <img src="img/IMG_0066.jpg" width="50" height="50" /> </a> </li> <li> <a href="#2"> <img src="img/IMG_0071.jpg" width="50" height="50" /> </a> </li> <li> <a href="#3"> <img src="img/IMG_0101.jpg" width="50" height="50" /> </a> </li> </ul> </div> </body> </html>
Tips
ハッシュタグを活用して画像の表示/非表示
CSS の target 擬似クラスを使えばインタラクティブに特定の要素を指定することができます. target 擬似クラスはハッシュタグ(url の #~)と一致する id を持つ要素とマッチングします.
つまり, http://hoge.html#abc といページにアクセスした際に
li:target { ... }
と書けば, id が abc の要素に target {…} の内容が適応されます.
逆に,
li:not(:target) { ... }
と書けば, id がマッチしない要素全てに {…} の内容が適応されます.
今回のサンプルではこの仕組を利用して, 画像を1枚だけ表示するようにしています.
ul#slider.normal li:not(:target) { opacity: 0.0; }
tmlib を使って template 化
tmlib を使えば簡単に image gallery を template 化できます.(tmlib についてはこちら) jsdo.it version はこちら.
以前書いたエントリー同様 template を script タグ内に書いて format で置換することで, 構造とデータを分離することができます.
下記は上記のサンプルを tmlib で template 化したものです. 見た目は同じですが, コードがシンプルになり画像の管理が楽になります.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Gallery - tmlib ver</title> <style> * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: "Meiryo", Arial, Helvetica, sans-serif; } body { background: #eee; } h1 { margin: 10px 20px; } #wrapper { margin: auto; position: absolute; width: 520px; height: 490px; top: 0; right: 0; bottom: 0; left: 0; background: white; box-shadow: 0px 0px 8px 0px #aaa, 0px 0px 8px 0px #aaa, 0px 0px 16px 0px #aaa; } /** * スライダ */ ul#slider { margin: 20px auto; position: relative; width: 480px; height: 360px; list-style: none; } ul#slider li { -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; position: absolute; } ul#slider.normal li:not(:target) { opacity: 0.0; } ul#slider.normal li:target { } /** * サムネイル */ ul#thumb { margin: auto; padding: 20px; width: 520px; display: -webkit-box; display: -moz-box; display: -o-box; display: box; box-shadow: inset 0px 0px 8px 0px #fff; background-color: black; list-style: none; overflow-x: auto; } ul#thumb li { -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin: 0px 10px; } ul#thumb li img { border: 1px solid #aaa; } ul#thumb li:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0.75; z-index: 0; } ul#thumb li:not(:hover) { z-index: auto; } </style> <script src="tmlib.js"></script> <script> var data = [ { id : "0", img : "img/IMG_0061.jpg", width : 480, height : 360, alt : "地元の駅前" }, { id : "1", img : "img/IMG_0066.jpg", width : 480, height : 360, alt : "地元の海と空" }, { id : "2", img : "img/IMG_0071.jpg", width : 480, height : 360, alt : "地元の海の岩" }, { id : "3", img : "img/IMG_0101.jpg", width : 480, height : 360, alt : "地元の夕空" }, ]; TM.main(function(){ var eResult = null; var eTemplate = null; eResult = TM.$id("slider"); eTemplate = TM.$id("img-template"); eResult.innerHTML = formatTemplate(eTemplate.innerHTML, data); eResult = TM.$id("thumb"); eTemplate = TM.$id("thumb-template"); eResult.innerHTML = formatTemplate(eTemplate.innerHTML, data); }); /** * テンプレートをフォーマット * {...} を data で置き換える. */ var formatTemplate = function(template, data) { var result = ""; for (var i=0,len=data.length; i<len; ++i) { result += template.format(data[i]); } return result; }; </script> </head> <body> <h1>Image Gallery - tmlib ver</h1> <div id="wrapper"> <ul id="slider" class="normal"> <script type="template" id="img-template"> <li id="{id}"> <img alt="{alt}" src="{img}" width="{width}" height="{height}" /> </li> </script> </ul> <ul id="thumb"> <script type="template" id="thumb-template"> <li> <a href="#{id}"> <img src="{img}" width="50" height="50" /> </a> </li> </script> </ul> </div> </body> </html>
ちなみにダウンロードしていただいたファイルには, この tmlib version も含まれています.
Reference
元ネタはこちら.
以上 Pure CSS のコーナーでしたー!! ちなみに使っている画像は我が地元の風景です. こうやって見るとほんとド田舎だなぁ~
JavaScript を使わずに CSS のみでイメージギャラリーを作ってみました.
『Pure CSS – CSS だけを使ってイメージギャラリーを作ろう!!』
http://t.co/W2NZ24qr
#web #css
『Pure CSS – CSS だけを使ってイメージギャラリーを作ろう!!』
http://t.co/W2NZ24qr
のサンプルを jsdo.it に移植しました.
よかったら参考にしてください.
#css #css3 #purecss