ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/05/02
NEW
【週刊ドットインストール】 あなただけの学習ロードマップを作成!、動画ページから動画一覧を確認しやすくなりました
2024/04/26
NEW
あなただけの学習ロードマップを作成します 【GW学習を加速】
PREMIUM
GLightboxでポップアップする画像ギャラリーを実装しよう
画像をクリックすると大きく表示してくれる、GLightboxの使い方を学んでいきます。
0%
動画レッスン一覧
(10)
#01 macOSで学習環境を整えよう
(02:47)
無料公開中
概要
素材ファイルのダウンロード
プロジェクトフォルダの設定
ブラウザでの確認
未完了
#02 Windowsで学習環境を整えよう
(02:10)
無料公開中
素材ファイルのダウンロード
プロジェクトフォルダの設定
ブラウザでの確認
未完了
#03 画像を配置してみよう
(01:34)
無料公開中
画像の確認
imgタグの配置
未完了
#04 GLightboxを導入していこう
(02:36)
開発者ページの確認
linkタグの配置
scriptタグの配置
導入に関する注意点
未完了
#05 クリックして大きな画像を表示してみよう
(01:39)
aタグの配置
class属性の追加
動作確認
未完了
#06 幅や高さを指定してみよう
(01:32)
data-width属性
data-height属性
未完了
#07 画像に説明を添えてみよう
(02:03)
data-title属性
data-description属性
data-desc-position属性
未完了
#08 複数の画像を配置してみよう
(02:36)
複数画像の配置
object-fit
text-decoration
未完了
#09 異なるグループを設定してみよう
(01:54)
動作確認
data-gallery属性
未完了
#10 クリックして動画を再生してみよう
(01:51)
画像の配置
動画URLの指定
未完了
リリース情報(note)
JavaScriptなしで学ぶ、『GLightboxでポップアップする画像ギャラリーを実装しよう』をリリースしました
関連キーワード
基礎講座
(400)
初心者向け
(388)
HTML
(119)
CSS
(121)
JavaScript
(162)
Web制作
(49)
詳細情報
最終更新日
2024年4月22日
バージョン情報
#REF!