lity.js活用ガイド：画像・YouTube動画を魅力的にポップアップ表示する方法｜DAD UNION – エンジニア同盟Webサイトを訪れたユーザーに印象的な体験を提供するためには、画像や動画の見せ方が重要です。中でも、クリックひとつで拡大表示されるポップアップ機能は、視覚的なインパクトを高め、コンテンツの魅力を効果的に伝える手段の一つです。 本記事では、軽量かつ使いやすいライブラリ「lity.js」を使って、画像やYouTube動画、Google Mapなどをポップアップで表示する方法を初心者向けにわかりやすく解説します。導入から実装まで、ステップごとに紹介していますので、ぜひご自身のWebサイトにも活用してみてください。 CSSの記述 まずは、lity.cssファイルを読み込み、必要に応じてスタイルを調整します。 <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; l
