Pure CSS – CSS だけを使ってイメージギャラリーを作ろう!!

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

このブログでは, これまでに CSS/CSS3 を使って色々なものを作ってきました.

ん～懐かしい. 上記のサンプルを見て分かる通り CSS はもはや CSS ではなくなってきています. 良くも悪くも立派なプログラミング言語?と言ってもいいでしょう.

本来, CSS というのは文章の構造と見た目を分離するために創られました. ですが, CSS3 の登場で自由度が格段に上がりました.

画像で表現していた角丸は border-radius で, JavaScript で表現していたアニメーションは transition や animation で行うことができるようになりました.

今回はそんな CSS/CSS3 を使ってイメージギャラリーを作ってみました. JavaScript は一切使用していません. CSS/CSS3 の可能性の片鱗を感じていただければ幸いです.

image gallery

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 がマッチしない要素全てに {…} の内容が適応されます.

今回のサンプルではこの仕組を利用して, 画像を１枚だけ表示するようにしています. 

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&#91;i&#93;);
                }
                
                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 のコーナーでしたー!! ちなみに使っている画像は我が地元の風景です. こうやって見るとほんとド田舎だなぁ～

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT