Uncategorized

8月28~30日(勉強30～32日目)

 

📖勉強30~32日目

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

コーディング

　コーディングはある程度慣れ、次の段階に行くところです😊
次は、レスポンシブデザインを意識したコーディングをすることです！
今のコーディングは、最後にレスポンシブデザインを整える戦略を取りましたが、
それだと効率が悪いと実感しました。
そのため、コーディングをしていく中でレスポンシブデザインを入れていきます👍

　今日の成果は、ポップアップ表示を全画面する実装です！
widthとheightの%を調整することで、ポップアップ表示領域を調整できます！

ポップアップのソースコードはこちらです！

<>HTML

<label for="pup_on5">
                        <div class="works_img2 img_btn5">
                            <h2 class="ab a_btn">
                                <a class="about_btn">詳しく見る</a>
                            </h2>
                            <a id="Contact"></a>
                        </div>
                    </label>
                    <input type="checkbox" id="pup_on5">
                    <!-- ポップアップの中身４ -->
                    <div class="pup_ct5">
                        <label for="pup_on5" class="x_icon5">Close X</label>
                        <div class="pup_img5">
                            <p>テスト</p>
                        <img src="image/popup_img4.png" alt="プロフィール">
                    </div>

<>CSS

/* 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: 20px;
    padding: 10px 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