Lightbox のような高級感を CSS のみで実現サンプルコード 使い方 CSS部分(スタイルシート)は流用可能． 複数の画像を置くときは HTML部分の pop1 となっている部分を pop2 など画像毎に名前を変えていく． これでより簡単に LightBox 風に画像を設定することが出来る． <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
