エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Lightbox のような高級感を CSS のみで実現
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Lightbox のような高級感を CSS のみで実現
サンプルコード 使い方 CSS部分(スタイルシート)は流用可能. 複数の画像を置くときは HTML部分の pop1 ... サンプルコード 使い方 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