×ボタン付き広告を作ってみよう！
×ボタン付き広告
※この画面下に現れます。
×
コード（Codepen）
コードはこちらから見ることができます。
See the Pen ×ボタン付き広告（Popup Ad） by Shin (@shin-ichi) on CodePen.
解説
【HTML解説】
画像と×ボタンをそれぞれ作り、divタグの中に入れています。
【CSS解説】
.image-function{
//画像コンテナのCSSです。（画像と×ボタンを入れておくコンテ）画像の大きさや配置を書きます。
margin: 0 auto;
//中央寄せにするCSSです。
position: fixed;
//画面の中の固定された場所に画像を配置します。
bottom:3%;
//ウィンドウの下から3%の位置に画像を配置します。
left:40%;
//左から40%の位置に画像を配置します。
width: 20%;
//画像の幅を画面の20%にします。
height: auto;
//高さは画像の幅に合わせます（ここでは縦横比を維持）
}
.ad-image{
//画像自体の大きさなどを決めるCSSです。
width: 100%;
//幅を親要素に対して100%にします。（ここでは、上記画像コンテナの幅に対して100%）
height: auto;
//高さは幅によって決まります。（縦横比を維持します。）
margin: 0 auto;
//中央寄せのCSSです。
border-radius: 20px;
//ボタンの角の丸みの半径を20xにします。
z-index: 9995;
//重なりを9995にします。(9999が一番上になる。)
}
.close{
//×ボタンのCSSです。
position: absolute;
//配置は親要素（ここでは画像コンテナ）の決まった位置にします。
width: 20px;
//幅を20pxにします。
height: 20px;
//高さを20pxにします。
display: flex;横並びの配置にします。
align-items: center; 縦軸を中央寄せします。
justify-content: center;横軸を中央寄せします。
cursor: pointer;
//カーソルが乗った時はポインタ（手のアイコン）にします。
top: -15px;
//高さ（位置）を-15pxにします。(好みに合わせて微調整してください。)
right: -0px;
//右0pxの位置に配置します。(好みに合わせて微調整してください。)
z-index: 9999;
//重なりを一番上にします。
border-radius: 50%;
//ボタンの角の丸みを半径50%にします。
border: 2px solid #000000;
//枠線を太さ2px、実線、黒色に指定します。
color: #000000;
//×ボタンの文字色を黒にします。
background-color: #ffffff;
//背景色を白にします。
font-size: 16px;
//フォントサイズを16pxにします。
font-weight: bold;
フォントウエイトをボールド（太線）にします。
}
.floating-image:hover{
//画像にマウスが乗った時のCSSです。
opacity: 0.6;
//透明度を0.6にします。（0が透明、1が不透明）
transition:0.3s;
//透明になるまでの時間を指定します。
}
.hided{
//×ボタンを押した時に広告を消すために使うCSSです。
visibility: hidden;
//非表示にします。
opacity: 0;
//透明にします。
}
/*広告等を下からふわっと表示*/
.ad-fade{
//アニメーションを付けるCSSです。下記のkeyflamesとはセットで使うことが多いです。
opacity:0;
//透明にしておきます。
animation-name: ad;
//このアニメーションの名前です。
animation-duration:2s;
//アニメーションが完了するまでの時間です。
animation-fill-mode: forwards;
//アニメーション終了後の状態を保持します。
}
@keyframes ad{
//adという名前をつけたアニメーションについてのCSSです。
0% {
//0%（開始状態）
opacity: 0;
//完全に透明にしておきます。
transform: translateY(50px);
//Y方向（縦方向）に50px下にずらした所から開始します。
}
100%{
//100%（終了状態）
opacity: 1;
//完全に表示（不透明）します。
transform: translateY(0);
//元の位置に戻ります。
}
}
【JavaScript解説】
const popupContents = document.querySelector('#popup-contents');
//「popup-contents」というidをつけた要素を取り出して、「popupContents」に入れておきます。
const popupImg = document.querySelector('#popup-img');
//「popup-img」というidをつけた要素を取り出して、「popupImg」に入れておきます。
const closeButton = document.querySelector('#close-button');
//「close-button」というidをつけた要素を取り出して、「closeButton」に入れておきます。
closeButton.addEventListener('click', () => {
//closeButton（×ボタン）がクリックされたときに下記コードを実行します。
popupContents.classList.add('hided');
//「popupContents」にクラスが「hided」のCSSを付加します。（付加すると画像コンテナが非表示になります。）
popupImg.classList.add('hided');
//「popupImg」にクラスが「hided」のCSSを付加します。（付加すると画像が非表示になります。）
closeButton.classList.add('hided');
//「closeButton」にクラスが「hided」のCSSを付加します。（付加すると×ボタンが非表示になります。）
});