TUMUPIRO - ポップアップの仕組みをキラキラ学ぼう✨

活用方法

★ お知らせ表示：新情報を目立たせる
★ 確認：削除前に確認
★ 広告：セール情報を強調
★ フォーム：ログインや登録を簡単に

ポップアップの歴史

★ 1990年代：広告用に誕生（Ethan Zuckerman）
★ 2000年代：ブロッカーで減少
★ 2010年代：モーダルが普及
★ 現在：デザインが進化

フィールド内ボタンのプログラム

以下のコードをコピペして、フィールド内のボタンを実装してみよう！（※実行しないように注意）



    
    
        
        
    



.content-field {
    flex: 3;
    background: #ffffff;
    border: 4px solid;
    border-image: linear-gradient(45deg, #ff69b4, #00ffff, #ffd700) 1;
    border-radius: 12px;
    padding: 30px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #1a1a1a;
}
.popup-button, .timer-popup-button, .sequential-popup-button {
    background: linear-gradient(45deg, #ffd700, #ff00ff, #00ffff);
    background-size: 200%;
    color: #ffffff;
    font-weight: bold;
    padding: 15px 30px;
    font-size: 20px;
    border-radius: 8px;
    text-decoration: none;
    animation: gradientShift 3s infinite, sparkle 1s infinite;
    display: inline-block;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    font-family: 'Orbitron', sans-serif;
    border: 2px solid #ffff00;
}
.popup-button:hover, .timer-popup-button:hover, .sequential-popup-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px #ffff00;
    background-position: 100% 50%;
}


function openTimerPopup() {
    document.getElementById('timer-modal').style.display = 'flex';
    setTimeout(closeTimerPopup, 3000);
}
function closeTimerPopup() {
    document.getElementById('timer-modal').style.display = 'none';
}
function openSequentialPopup1() {
    document.getElementById('sequential-modal-1').style.display = 'flex';
}
function openSequentialPopup2() {
    document.getElementById('sequential-modal-1').style.display = 'none';
    document.getElementById('sequential-modal-2').style.display = 'flex';
}
function openSequentialPopup3() {
    document.getElementById('sequential-modal-2').style.display = 'none';
    document.getElementById('sequential-modal-3').style.display = 'flex';
}
function openSequentialPopup4() {
    document.getElementById('sequential-modal-3').style.display = 'none';
    document.getElementById('sequential-modal-4').style.display = 'flex';
}
function closeSequentialPopups() {
    document.getElementById('sequential-modal-4').style.display = 'none';
}

コードの役割を解説

★ HTMLの役割：HTMLはボタンとその配置を作るよ。`

`が白いフィールドで、その中に3つのボタン（ポップアップを開く、時間で消える、連続ポップアップ）を配置してる。`style="display: flex; gap: 15px;"`で下の2つのボタンを横並びにしてるんだ！

★ CSSの役割：CSSはフィールドとボタンの見た目を整えるよ。`.content-field`で白い背景や枠線をつけて、ボタンを中央に配置してる（`justify-content: center; align-items: center;`）。`.popup-button`などでボタンのキラキラデザイン（グラデーションやアニメーション）を作ってるよ。ホバーエフェクト（`transform: scale(1.1);`）もここで設定してるんだ！

★ JavaScriptの役割：JavaScriptはボタンの動きを作るよ。`openTimerPopup()`で「時間で消えるポップアップ」を表示して、`setTimeout(closeTimerPopup, 3000)`で3秒後に閉じるようにしてる。`openSequentialPopup1()`から`openSequentialPopup4()`までは連続ポップアップの流れを作ってるんだ！

ポップアップの活用方法と歴史

活用方法
★ お知らせ表示：新情報を目立たせる
★ 確認：削除前に確認
★ 広告：セール情報を強調
★ フォーム：ログインや登録を簡単に

ポップアップの歴史
★ 1990年代：広告用に誕生（Ethan Zuckerman）
★ 2000年代：ブロッカーで減少
★ 2010年代：モーダルが普及
★ 現在：デザインが進化

ポップアップのプログラム

以下のコードをコピペして、ポップアップを実装してみよう！（※実行しないように注意）



    
        
        なに？
    



.popup-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.popup-modal-content {
    background: #ffffff;
    border: 4px solid;
    border-image: linear-gradient(45deg, #ff69b4, #00ffff, #ffd700) 1;
    border-radius: 12px;
    padding: 20px;
    max-width: 300px;
    max-height: 80%;
    color: #1a1a1a;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    text-align: center;
    box-shadow: 0 0 12px #ff69b4;
    position: relative;
}
.popup-modal-content p {
    font-size: 20px;
    margin: 10px 0;
}
.popup-modal-content .close-button {
    background: #ff5555;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 8px;
}
.popup-modal-content .close-button:hover {
    background: #ff9999;
}


function openPopup() {
    document.getElementById('popup-modal').style.display = 'flex';
}
function closePopup() {
    document.getElementById('popup-modal').style.display = 'none';
}
document.getElementById('popup-modal').addEventListener('click', (e) => {
    if (e.target === document.getElementById('popup-modal')) {
        closePopup();
    }
});

コードの役割を解説

★ HTMLの役割：HTMLはポップアップの「形」を作るよ。`

活用方法

ポップアップの歴史

ポップアップのプログラム

コードの役割を解説

✨ スポンサー ✨