エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
画像をCSSだけで、ポップアップする - CSS note
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
画像をCSSだけで、ポップアップする - CSS note
画像を簡単なCSSでレスポンシブ,キーボードアクセシビリティ対応のポップアップ表示する WordPress界隈... 画像を簡単なCSSでレスポンシブ,キーボードアクセシビリティ対応のポップアップ表示する WordPress界隈では、画像のポップアップは javascriptを使ったプラグインを利用するのが普通だと思います 画像は、クリックしたりしても:focusや:activeは、使えないためです。CSSだけで実装するLightBoxは、:target 等を使っている例が多いのではないかと思います。 この例は、:target は使わず、よりシンプルに、キーボードアクセシビリティにも対応、レスポンシブデザインにも対応のポップアップビューを実装します。 え、? 動かない! よく見てください。この実装の最大のポイントは、tabindex="0" なんですよ~ img 要素に popup クラスも忘れずに追加してくださーい リンク付き画像の場合は、リンクに飛んで行ってしまいますので、リンクを無効にするスタイル等