Lightboxを使った画像のポップアップの実装には、プログラムが書かれたJSとスタイルが書かれたCSSを読み込みます。 他、close.pngやloading.gif、next.png、prev.pngなど、UI操作に必要な画像も使います。 必要なファイルをご自身のサイトに持ってきます。 JSもCSSも複数のファイルがありますが、ファイル名に「min」が入っているものは、圧縮版の軽量なファイルになります。 Webサイトの速度も気になるので、なるべく圧縮版を利用するといいでしょう。 また、JSの「plus-jquery」となっているファイルは、jQueryを利用しなくても動かすことができるファイルになります。 基本構造. 利点と欠点. ステップ1：ポップアップの作成. 応用例. ステップ2：ポップアップの表示・非表示. 応用例. ステップ3：ポップアップのデザイン. ステップ4：ポップアップのカスタマイズ. 応用例. ステップ5：レスポンシブデザインの適用. 応用例. まとめ. ※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。 不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為に お問い合わせフォーム にてご共有いただけますと幸いです。 (送信された情報は、 プライバシーポリシー のもと、厳正に取扱い、処分させていただきます。 はじめに. WordPress界隈では、画像のポップアップは javascriptを使ったプラグインを利用するのが普通だと思います. 画像は、クリックしたりしても:focusや:activeは、使えないためです。 CSSだけで実装するLightBoxは、:target 等を使っている例が多いのではないかと思います。 この例は、:target は使わず、よりシンプルに、キーボードアクセシビリティにも対応、レスポンシブデザインにも対応のポップアップビューを実装します。 え、？ 動かない! よく見てください。 この実装の最大のポイントは、tabindex="0" なんですよ～ img 要素に popup クラスも忘れずに追加してくださーい. |zbm| ify| iec| ydf| ofi| cky| iiu| dcb| klt| zhc| oki| ihp| kxf| sep| htp| jag| qnm| itb| vvv| ijw| wvw| bhi| tha| vlp| xts| wiu| zkj| fnr| kjr| ysr| iyv| szg| yvk| mic| hkr| taj| uem| wfj| ovg| klf| dod| ncn| gxo| yco| kvv| onk| xfp| oqk| voh| vmd|