CSSとJavaScriptで実装するライトボックスのアニメーション

CSSとJavaScriptを組み合わせることで、Webページにおしゃれなライトボックス（Lightbox）を実装できます。ライトボックスとは、サムネイル画像をクリックした際に拡大画像が画面上にオーバーレイ表示される、よく使われるUIパターンのことです。本記事では、CSSの:target疑似クラスとトランジションを活用してライトボックスをスタイリングする方法を、具体的なコード例とともに解説します。

実装例

以下の例では、ページ内アンカー（#picture）へのリンクと:target疑似クラスを連動させることで、クリック操作だけでライトボックスの開閉を実現しています。画像の拡大表示にはtransitionプロパティによる滑らかなアニメーションを適用しており、右上部に配置される閉じるボタン（×マーク）は、::beforeと::afterの疑似要素を45度回転させることで、画像ファイルを使わずCSSのみで描画しています。

<!DOCTYPE html>
<html>
<style>
#parent {
    margin: 2%;
    padding: 0;
    box-sizing: border-box;
    background: cornflowerblue;
    text-align: center;
}
html,body {
    height:100%;
    max-height:100%;
    min-height:100%;
}
.smart {
    display: block;
    margin: 0 auto;
    width: 150px;
    height :150px;
}
.animation2 {
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -ms-transition: .4s ease-in-out;
    -o-transition:.4s ease-in-out;
    transition:.4s ease-in-out;
}
.customLightbox img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 0%;
    max-height: 0%;
}
#lightbox-controls {
    position: fixed;
    height: 70px;
    width: 70px;
    top: -70px;
    right: 0;
    z-index: 2;
    background: rgba(0,0,0,.1);
}
#close-lightbox {
    display: block;
    position: absolute;
    overflow: hidden;
    height: 50px;
    width: 50px;
    text-indent: -5000px;
    right: 10px;
    top: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#close-lightbox:before {
    content: '';
    display: block;
    position: absolute;
    height: 0px;
    width: 3px;
    left: 24px;
    top :0;
    background: white;
}
#close-lightbox:after {
    content: '';
    display: block;
    position: absolute;
    width: 0px;
    height: 3px;
    top: 24px;
    left:0;
    background: white;
}
.customLightbox:target {
    top: 0%;
    bottom: 0%;
    opacity: 1;
}
.customLightbox:target img {
    max-width: 100%;
    max-height: 100%;
}
.customLightbox:target ~ #lightbox-controls {
    top: 0px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:after {
    width: 50px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:before {
    height: 50px;
}
@-webkit-keyframes smart {
    0% {
        -webkit-transform: rotate(2deg);
    }
    20% {-webkit-transform: rotate(-2deg);}
    40% {-webkit-transform: rotate(2deg);}
    60% {-webkit-transform: rotate(-2deg);}
    80% {-webkit-transform: rotate(2deg);}
    100% {-webkit-transform: rotate(-2deg);}
}
</style>
<body>
<div id="parent">
<h3>Lightbox Example</h3>
<a href="#picture" class="smart"><img src="https://images.unsplash.com/photo1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=130&ixlib=rb1.2.1&q=80&w=130"/>
<div class="customLightbox" id="picture">
<img class="animation2" src="https://images.unsplash.com/photo-1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=630&ixlib=rb1.2.1&q=80&w=630"/>
</div>
<div id="lightbox-controls" >
<a id="close-lightbox" class="animation2" href="#">Close Lightbox</a>
</div>
</div>
</body>
</html>

実行結果

このコードをブラウザで表示すると、次のような結果になります。サムネイル画像をクリックすると、0.4秒のイージングがかかりながら画像が画面全体へ滑らかに拡大表示され、同時に右上から閉じるボタン（×）がアニメーション付きで出現します。×ボタンをクリックすれば、ライトボックスが閉じて元のページに戻ります。

CSSとJavaScriptで実装するライトボックスのアニメーション

【JavaScript】文字列が同一部分文字列の繰り返しで構成されているか判定する方法

JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】
JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht
CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説
CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。アコーディオンの実装例以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini