GIFがアップできない？Qiitaでは CodePen 埋め込みが最強の解決策だった話
Qiitaで記事を書いていると、
- GIFをアップできない
- 容量オーバーで弾かれる
- 画質が劣化して読者に伝わりづらい
こんな悩みにぶつかること、ありますよね
アニメーションを説明したいだけなのに、倍速処理→GIFにする→容量確認
かなり面倒
Codepen これを知っておくべき
See the Pen Untitled by riiconn (@riicon72) on CodePen.
CodePen は知っていますか？
もしまだ使っていなければ、めちゃくちゃ損しています
なぜなら Qiita は HTML / CSS / JavaScript が記事内でそのまま動く ため、
CodePen の Embed を貼るだけで…
🎁 GIFの代わりに“本物の動作”をそのまま見せられる
というチート級の技が使えるからです
✨ CodePen を使えば Qiita に“動くデモ”をそのまま載せられる
Qiita は SandBox 上でコードを安全に実行できるため、
CodePen の共有コード（iframeタグ）を貼るだけでアニメーションがリアルタイムで動きます
つまり、こういうメリットが一気に手に入ります
✔ GIF不要（そもそも作らなくていい）
✔ 動作が劣化しない（ヌルヌル 144fps級）
✔ 複雑なアニメーションや Canvas もそのまま動く
✔ 修正は CodePen 側でOK → Qiitaの記事は自動更新
✔ コードがそのまま見えるので読者がコピペしやすい
正直、GIF時代から完全に卒業できるレベルの便利さです
CodePenをQiitaに埋め込む手順
🎄 デモ作品（CodePen）
See the Pen Untitled by riiconn (@riicon72) on CodePen.
まとめ：GIFで苦しむ時代は終わり
GIFを作って圧縮して…という作業はもう不要
Qiitaは動いているコードをそのまま載せられる
だからこそ、エフェクト系・アニメーション系の記事は
CodePen × Qiita が最強コンボ
です