【完走賞ゲットだぜ！】CSSで紹介できなかったボールを供養する!

## はじめに
みなさん初めまして。🎅🏻

Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。

今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 **全員** に完走賞がおくられる企画を開催しています。🎉 🎉 

Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。

この記事は、そのカレンダーの25記事目です。🎉🎉🎉🎉

25記事目は、 「**【完走賞ゲットだぜ！】CSSで紹介できなかったボールを供養する!**」です。

1日目から24日目まで、1日1個ペースでボールを紹介してきました。
その中では、お気に入りのものや、特徴的なプロパティの使い方をしたボールを中心に紹介してきました。

11月から作成を始め、中には、クオリティに納得できなく、紹介を断念した選抜落ちボールも存在します。

そのため、この記事では、そんな選抜落ちしたボールたちを雑に供養していこうと思います。

## 供養したいボールたち
作り方などの詳しい紹介はしません。 (こめんなさい)
詳しい作り方を知りたい方は、直接Codepenをごらんください。

### プレシャスボール
選抜入りしたボールに負けないくらいクオリティ高いと思ってる。 
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="Yzvomgg" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/Yzvomgg">
  プレシャスボール3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### サファリボール
`clip-path`使いすぎなのと迷彩柄が画像によって違うので、いい感じにできなかった。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYroBpO" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/vYroBpO">
  プレシャスボール3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-default-tab="result" data-slug-hash="ExRqxQP" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ExRqxQP">
  サファリボール3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 没案
最初は2Dで作ろうとしていました。
チープに見えるので、もう少しクオリティを上げるために陰影をつけて、立体的に見えるようなものにしようと思い没案になりました。

#### モンスターボール
<p class="codepen" data-height="300" data-slug-hash="ZExdQPV" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ZExdQPV">
  モンスターボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="mdxZymV" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/mdxZymV">
  プレミアボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="yLKdyXK" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/yLKdyXK">
  スーパーボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="gOeNbeL" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/gOeNbeL">
  ハイパーボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="poLXgbd" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/poLXgbd">
  マスターボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="VwXJeEv" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/VwXJeEv">
  モンスターボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="OJvqLPq" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/OJvqLPq">
  モンスターボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="LYdKGvV" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/LYdKGvV">
  モンスターボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="OJveNJO" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/OJveNJO">
  ルアーボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="MWVMyyR" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWVMyyR">
  ムーンボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="vYRqLWN" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/vYRqLWN">
  ヘビーボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</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="300" data-slug-hash="JjLQXZb" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/JjLQXZb">
  レベルボール</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## まとめ
この記事では、そんな選抜落ちしたボールたちを雑に供養しました。
この記事でアドベントカレンダーを完走できることを思うと感慨深いです。


アドベントカレンダー25日を通して、いろいろなボールを作成しました。

このテーマを選んだきっかけは、ポケモンスカーレット・バイオレットの発売に乗じて、アドベントカレンダーの話題の一つになればいいなという思いと、25個以上あるテーマで、CSSで作りやすそうなモンスターボールをテーマに設定しました。

カレンダーを最後まで見守って、応援していただいた皆さんありがとうございます。
この記事もぜひいいねをお願いします。
まだ、全部見てないよという方は、ぜひ以下のリンクから他の記事をご覧いただけると嬉しいです。

https://qiita.com/advent-calendar/2022/degudegu2510

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510