Webページを彩る方法として、画像や動画をポップアップ表示することがあります。 今回は、lity.jsを使って画像やYouTube動画をポップアップ表示する方法をご紹介します。 CSSの記述 まずは、lity.cssファイルを読み込み、必要に応じてスタイルを調整します。 <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding-top: 20px; } h2{ font-size: 18px; } p{ padding-bottom: 10px; font-size: 18px; } </style> <link href="lity.css" rel="stylesheet"/> HTMLの記述 ポップ
![lity.js活用ガイド:画像・YouTube動画を魅力的にポップアップ表示する方法|DAD UNION – エンジニア同盟](https://cdn-ak-scissors.b.st-hatena.com/image/square/54e56e6fef4ffcd6031b3db2b8fbd2bb16af4e66/height=288;version=1;width=512/https%3A%2F%2Fdad-union.com%2Fwp-content%2Fuploads%2F2022%2F11%2Fpic20221107.jpg)