Uncategorized

8月27,28日(勉強29,30日目)

 

📖勉強29日目

✓活動内容
・仕事のため活動なし🍐

📖勉強30日目

✓活動内容
・コーディングの続き

コーディングの続き
　前回は、画像クリックしたらポップアップが表示される実装をするところでおわり、
今回はその実装を完成させました😊

①バナーの部分をクリックすると…

②「Super Good」の画像がポップアップとして表示されました！
　「Super Good」の部分に作品を載せて、その横に設計やこだわったポイントを記載して
　いいく予定です😊

今回実装したソースコードはこちらです！

<>HTML

    <!-- Works -->   
        <section id="work_sct">
            <h2 class="tit1 tit_top2">Works</h2>
            <section id="works_section">
                <div class="sct12">
                    <section>
                        <!-- works1 -->
                        <label for="pup_on1">
                            <div class="works_img1 img1_r">
                                <img src="image/works1.PNG" alt="Webサイト" class="img_btn1">
                            </div>
                        </label>
                        <input type="checkbox" id="pup_on1" >
                        <!-- ポップアップの中身１ -->
                        <div class="pup_ct1">
                            <label for="pup_on1" class="x_icon1">x</label>
                            <div class="pup_img1">
                                <p>テスト</p>
                            <img src="image/popup_img1.png" alt="作品１">
                        </div>
                        <!-- ポップアップの中身１　ここまで -->
                    </section>    
                        <!-- works2 -->
                    <section>
                        <label for="pup_on2">
                            <div class="works_img1 img_btn2">
                                <img src="image/works2.png" alt="バナー" class="img_btn2">
                            </div>
                        </label>
                        <input type="checkbox" id="pup_on2">
                        <!-- ポップアップの中身２ -->
                        <div class="pup_ct2">
                            <label for="pup_on2" class="x_icon2">x</label>
                            <div class="pup_img2">
                                <p>テスト</p>
                            <img src="image/popup_img2.png" alt="作品２">
                        </div>
                        <!-- ポップアップの中身２　ここまで -->
                    </section>
                </div>

                
                <div class="sct34">
                    <!-- works3 -->
                    <section>
                        <label for="pup_on3">
                            <div class="works_img2 img2_b img_btn3">
                                <img src="image/works3.png" alt="バナー">
                            </div>
                        </label>
                        <input type="checkbox" id="pup_on3">
                        <!-- ポップアップの中身３ -->
                        <div class="pup_ct3">
                            <label for="pup_on3" class="x_icon3">x</label>
                            <div class="pup_img3">
                                <p>テスト</p>
                            <img src="image/popup_img3.png" alt="作品３">
                        </div>
                        <!-- ポップアップの中身３　ここまで -->
                    </section>
                    
                    <!-- works4 -->
                    <section>
                        <label for="pup_on4">
                            <div class="works_img2 img_btn4">
                                <img src="image/works4.png" alt="ヘッダー">
                            </div>
                        </label>
                        <input type="checkbox" id="pup_on4">
                        <!-- ポップアップの中身４ -->
                        <div class="pup_ct4">
                            <label for="pup_on4" class="x_icon4">x</label>
                            <div class="pup_img4">
                                <p>テスト</p>
                            <img src="image/popup_img4.png" alt="作品３">
                        </div>
                        <!-- ポップアップの中身４　ここまで -->
                    </section>
                </div>
            </section>
        </section>

<>CSS

/* Works1ポップアップウインドウ */
/* チェックボックスの非表示 */
#pup_on1{
    display: none;
}

/* チェックされたらポップアップウインドウ開く */
#pup_on1:checked + .pup_ct1{
    display: block;
}

.pup_ct1{
    background-color: #ffffff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    overflow-y: scroll;
}
 
  
/* 閉じるアイコン */
.x_icon1{
    background: #ffffff;
    color: #000000;
    font-size: 30px;
    padding: 0 10px;
    position: absolute;
    right: 0;
    cursor: pointer;
}
  
/* 開くボタンworks4つ */
.img_btn1{
    background: #ffffff;
    color: #35ff03;
    cursor: zoom-in;
}
  
  /* ポップアップの内容 */
.pup_img1{
    margin: 40px auto 40px auto;
    width: 90%;
}


/* Works2ポップアップウインドウ */
/* チェックボックスの非表示 */
#pup_on2{
    display: none;
}

/* チェックされたらポップアップウインドウ開く */
#pup_on2:checked + .pup_ct2{
    display: block;
}

.pup_ct2{
    background-color: #ffffff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    overflow-y: scroll;
}
 
  
/* 閉じるアイコン */
.x_icon2{
    background: #ffffff;
    color: #000000;
    font-size: 30px;
    padding: 0 10px;
    position: absolute;
    right: 0;
    cursor: pointer;
}
  
/* 開くボタンworks4つ */
.img_btn2{
    background: #ffffff;
    color: #35ff03;
    cursor: zoom-in;
}
  
  /* ポップアップの内容 */
.pup_img2{
    margin: 40px auto 40px auto;
    width: 90%;
}


/* Works3ポップアップウインドウ */
/* チェックボックスの非表示 */
#pup_on3{
    display: none;
}

/* チェックされたらポップアップウインドウ開く */
#pup_on3:checked + .pup_ct3{
    display: block;
}

.pup_ct3{
    background-color: #ffffff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    overflow-y: scroll;
}
 
  
/* 閉じるアイコン */
.x_icon3{
    background: #ffffff;
    color: #000000;
    font-size: 30px;
    padding: 0 10px;
    position: absolute;
    right: 0;
    cursor: pointer;
}
  
/* 開くボタンworks4つ */
.img_btn3{
    background: #ffffff;
    color: #35ff03;
    cursor: zoom-in;
}
  
  /* ポップアップの内容 */
.pup_img3{
    margin: 40px auto 40px auto;
    width: 90%;
}


/* Works4ポップアップウインドウ */
/* チェックボックスの非表示 */
#pup_on4{
    display: none;
}

/* チェックされたらポップアップウインドウ開く */
#pup_on4:checked + .pup_ct4{
    display: block;
}

.pup_ct4{
    background-color: #ffffff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    overflow-y: scroll;
}
 
  
/* 閉じるアイコン */
.x_icon4{
    background: #ffffff;
    color: #000000;
    font-size: 30px;
    padding: 0 10px;
    position: absolute;
    right: 0;
    cursor: pointer;
}
  
/* 開くボタンworks4つ */
.img_btn4{
    background: #ffffff;
    color: #35ff03;
    cursor: zoom-in;
}
  
  /* ポップアップの内容 */
.pup_img4{
    margin: 40px auto 40px auto;
    width: 90%;
}

まとめ

　この実装では不具合があるため、修正が必要になります💦
不具合は、画像をクリックしてポップアップが表示されますが、表示された状態のまま、
別の画像をクリックするとそのポップアップも立ち上がってしまうことです。

　明日はこの修正含め、ポートフォリオサイトを完成させる予定なので頑張ります😙

RELATED POST