エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント2件
- 注目コメント
- 新着コメント
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Lightbox ぽいモーダルウィンドウをCSSだけで | UNICO LABO
サムネイル画像をクリックすると大きいサイズの画像がモーダルウィンドウ表示される、あの効果。従来、j... サムネイル画像をクリックすると大きいサイズの画像がモーダルウィンドウ表示される、あの効果。従来、jQuery プラグインの Lightbox などを導入することが多いと思いますが、今回は CSSのみで実装してみましょう。 サンプルコード <!-- HTML --> <div id="sample"> <a href="#figure"><img src="//picsum.photos/100?image=0" alt=""></a> <figure id="figure"> <a id="overlay" href="#overlay"> <img src="//picsum.photos/600?image=0" alt=""> <figcaption>どこかをクリックするとモーダルウィンドウを閉じます</figcaption> </a> </figure> </div> /* CSS
2019/07/24 リンク