今回は番外編みたいな記事になってしまうのですが、以前紹介させて頂きました「codepen」を利用して、HTMLとCSSのみで様々なデザインを作成してみましたので、紹介させて頂きます！（使えるか分かりませんが、コピペOKです笑）
私も本業の方で、バナーにアニメーションを設置する時とか、特にアニメーションを使うときにリアルタイムで反映されるcodepenを愛用しています。（サーバーに複数ファイルをアップする作業が面倒なので…）
codepenなんて聞いたことないよ！という方は以下の記事でcodepenの使い方を参考にしてみてください。
的みたいなもの
最初は、複数のサイズが異なる円を重ねて、的みたいなものを作ってみました。こちらはpositionを使って作成していますが、他の方法でも作成できそうですね！
See the Pen
circle1 by matsushima (@matsushin)
on CodePen.
アニメーション図形
次のデザインは最初に紹介しました、的みたいな図形をアニメーションを使って、正方形→正円形を繰り返すアニメーションになります。自分で作っておいてこれを言うのも何ですが、ちょっと気持ち悪いですね笑
アニメーション部分の記述は枠線だけでなく色を変えたり、サイズ大きくしたり小さくしたりしても面白いと思います。アニメーションは色々な応用ができて楽しいですね！
See the Pen
rect→circle by matsushima (@matsushin)
on CodePen.
まとめ
codepenはリアルタイムでデザインを確認しながら、コーディングできるだけでなく、他のユーザーが作成したデザインも鑑賞することができます。中にはこれ本当にHTMLとCSSだけで作ったの!?と思えるようなデザインもたくさんあり、コードも確認することができます。
Webデザイナー・コーダーの方は、サイトの中に目立つコンテンツを作る機会も多くあるかと思いますので、とても参考になりますし必見です！
