Lightbox のような高級感を CSS のみで実現

最終更新日: 公開日: 2021年12月
lightbox 風な動作を CSS のみで実現してみた.
ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う.

前回書いた記事は高級感というところまではいっていないので,さらに改造して,中央部分から大きくなるようにアニメーションさせてみた.

前回の「CSS のみでポップアップウィンドウ(レイヤー)を表示する方法」にさらに div などを追加している.
中央付近から大きくするために

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

を使うことができなかったせい.

Lightbox 風なポップアップウィンドウを CSS だけで実装

最近,コアウェブバイタルの件もあって,なるべく javascript を使わないで何とかならないかと考えている.

そんな時に,あるプログラムを考えている最中にモーダルウィンドウ風なポップアップウィンドウを作る必要が生じて,それは別に javascript で作っているので,ウィンドウも javascript で作ればよかったのだが,なんとなく,CSS で出来るんじゃないかと考えていたら出来たので紹介する.

「lightbox CSS」「ライトボックス CSS」などで検索すると出てくるページで,:target を使っている例があった.これも参考になる.
こちらは :checked を使った方法である.
CSSのみでの多階層ドロップダウンメニューを作成」や「目のマークでパスワードの表示を切り替える実装方法」などでも同様に checkbox と checked を使って CSS のみで動きのある HTML を実現しているので,こちらも参考にしてもらえばと思う.

さらにこの実装方法ではウィンドウの中をクリックしても閉じないように工夫したところに特長があるが,これは既に書いた「CSS でポップアップウィンドウを実装」と同じ方法で実現している.

実際の動作は以下の写真をクリックして確認してほしい.

サンプルコード

CSS

<style type="text/css" media="screen">
.overlay {
  position: fixed; /* 背景 */
  background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#pop-up {
  display: none;
}
#pop-up:checked + .overlay {
  visibility: visible;
  opacity: 1;
  z-index: 100000;
  background-color: #000000E0;
  width: 100%;
}
.popWindow {
  max-height: 95%;
  max-width: 95%;  
  transform: scale(0.3); /* クリックした直後のサイズ */
  z-index: 100010;
  font-size: 13px;
  line-height: 18px;
  margin: 10px auto;
  padding: 4px 10px;
  text-align: center;
  transition: all 0.5s 0s ease;
  display: flex; /* 中央 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#pop-up:checked + .overlay .popWindow {
  transform: scale(1); /* 最終的なサイズ */
  height: 100%;
}
.pbox {
  display: flex; /* 中央 */
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 5px;
  overflow: auto;
}
.popWindow .ptitle {
  font-size: 15px;
  margin: 8px;
  color: #FFF;
}
.popWindow .close {
  position: relative;
  float: right;
  transition: all 5ms;
  font-size: 24px;
  line-height: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
  padding: 2px;
}
.popWindow .close:hover {
  color: #06D85F;
}
.pbox::-webkit-scrollbar-track {
  background: none;
}
.pbox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.pbox::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 5px;
}
.clickable:hover {
  cursor: pointer;
}
@media screen and (max-width: 700px){
  #pop-up:checked + .overlay {
    visibility: hidden;
    opacity: 0;
  }
}
</style>

HTML

<input type="checkbox" id="pop-up">
<label id="popupi" for="pop-up" class="overlay">
  <label class="popWindow" for="pop-up">
    <div class="pbox">
    <label>
      <label class="close clickable" for="pop-up">×</label>
      <div class="ptitle">ヨルノヨ</div><img itemprop="image" loading="lazy" src="/wp/wp-content/uploads/2021/12/yoruunoyo-1024x683.jpg" alt="ヨルノヨ" width="1024" height="683" />
    </label>
    </div>
  </label>
</label>
<div class="c">
  <label for="pop-up" class="clickable">
    <img itemprop="image" loading="lazy" src="/wp/wp-content/uploads/2021/12/yoruunoyo-1024x683.jpg" alt="ヨルノヨ" width="600" height="400" />
  </label>
</div>

苦労した点

  • 中央から大きくなっていくようにする部分
  • 画像の縦幅がウィンドウサイズを超えたときにスクロールバーを出すようにした
  • 拡大画像を中央にする部分
  • 写真やウィンドウの中をクリックしても閉じない部分

試行錯誤の末に出来たので不要なコードが入っているかもしれないが,それは指摘していただけると助かります.

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop