CSSでウザい広告を作る


[LCのアドベントカレンダー2020](https://qiita.com/advent-calendar/2020/linuxclub)の記事です。神木です。
授業でサイトを作ることになったのでウザい広告を作りました。

どのくらい非道徳的で良心に反した広告が許されるのか規約や法律がわからないため、あるあるなやつを作りました。https://webtan.impress.co.jp/e/2018/02/20/28241#change20190110 などを参考にしました。


<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## アンカー広告

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kamikigit" data-slug-hash="RwGZWMJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="TOP">
  <span>See the Pen <a href="https://codepen.io/kamikigit/pen/RwGZWMJ">
  TOP</a> by Kamikigit (<a href="https://codepen.io/kamikigit">@kamikigit</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## アンカー広告（下）
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kamikigit" data-slug-hash="mdrMJgB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="BOTTOM">
  <span>See the Pen <a href="https://codepen.io/kamikigit/pen/mdrMJgB">
  BOTTOM</a> by Kamikigit (<a href="https://codepen.io/kamikigit">@kamikigit</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## じわじわ浮き出る広告
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kamikigit" data-slug-hash="BaLdoVb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="fadein">
  <span>See the Pen <a href="https://codepen.io/kamikigit/pen/BaLdoVb">
  fadein</a> by Kamikigit (<a href="https://codepen.io/kamikigit">@kamikigit</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 途中から急に動きながら浮き出てくる広告
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kamikigit" data-slug-hash="yLaoYrO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="fadein2">
  <span>See the Pen <a href="https://codepen.io/kamikigit/pen/yLaoYrO">
  fadein2</a> by Kamikigit (<a href="https://codepen.io/kamikigit">@kamikigit</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## バツボタンが小さすぎるポップアップ広告
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="kamikigit" data-slug-hash="QWKMjXb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="popup">
  <span>See the Pen <a href="https://codepen.io/kamikigit/pen/QWKMjXb">
  popup</a> by Kamikigit (<a href="https://codepen.io/kamikigit">@kamikigit</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


カウントダウン付きのポップアップ動画広告とか、チラチラ画面が切り替わるマンガの広告とか、クリックすると別タブに飛ぶ広告とか、音声つき動画広告の自動再生とか、気が向いたらやりたいです。


## 参考文献
https://homepagenopro.com/html/css_popup.html
https://www.digitalocean.com/community/tutorials/css-position-sticky