初心者きつね「ブログでコードの解説をしたいんだけど、何かいいツールない？」
このような悩みを抱えている人がいましたら、ぜひCodePenをお勧めします。
CodePenとは、ソースコードや、そのコードがどのような表示をするのかを公開できるツールのことです。
このCodePen、特にブログ内でコーディングを教える際は重宝しますので
「これから技術系のブログを書いてみたい！」という方は、ぜひ利用してみてください。
CodePenとは？
CodePenとは、ソースコードやその表示結果を提示することができるサイトのことです。
例えば、ボクのブログをよくみている人は
このような表示をしているのをみたことがあると思います。
See the Pen 円が左から右に移動するアニメーション（ease-out） by わい (@y_programing) on CodePen.
こちらの表記は、CodePenを利用して提示しています。
左側に各言語のコードが記載されており、右側には表示結果が出てくるので
どのようなコードを書けばどのような表示結果になるのがひと目でわかります。
CodePenの特徴
CodePenには以下のような特徴があります。
テキストベースのブログでもコードの解説ができる
CodePenを利用すれば、文章を主な媒体としたブログにおいても
理解しやすいコードの解説をすることができます。
YouTubeなどの動画配信プラットフォームだと、VSCodeなどの画面を映して実際にコードを手入力している様子などを写すことができるでしょうが
ブログなどの文章がメインの媒体ではそういうわけにはいきません。
しかし、CodePenを使えば、実際に書かれたコードを出力することができますので、なだけでなく
「コードを見せるだけなら、スクリーンショットでも良いのでは？」
と思った方もいるかもしれませんが、実務などで分からないところを調べて出てきたコードを参考にしたいときに
スクショが貼られているだけだと、コピペができないので、自分で1からコードを打つ必要があります。
これは大変な手間ですよね。
しかし、CodePenで提示されたコードはコピペができますので
サイトの結果を参考にしながら、簡単に編集することができます。
完成した状態（特にアニメーション）を見せることができる
CodePenのもう1つの特徴が、完成した状態、特にアニメーションを見せることができることです。
CodePenでは実装したコードだけではなく、そのコードによってサイトに表示される結果も見ることができます。
特に、CSSやjsで実装するアニメーションがどのような動きを見せるかを提示するのに重宝します。
アニメーションは、プロパティ内の値を1つ変更するだけでも違う動きになったり、実行の秒数などが変化したりするので
そういった細かい違いを見せるのにCodePenはピッタリなんです。
それだけではなく、細かい部分のミスに気づきやすいので、その後の調整もしやすいメリットがあります。
CodePenでコーディングを行う方法
まずは、CodePenでコーディングを行なってみましょう。
CodePenのサイトに行き、アカウントを作成していない人は新規登録で作りましょう。
既にアカウントを作っている人は、ログインしてください。
ログインできたら、右上の方に「New Pen」という箇所がありますので、そこをクリック。
すると、HTMLやCSSなどのコードを入力できる画面に行くことができるので
それぞれにコードを入力していきます。
コードが反映されると、下の画面に表示が反映されます。
CodePenをブログに埋め込む方法
コードが完成したら、右下の方にある「Embed」をクリックします。
すると、「Copy Code」という箇所が出てくるので、そちらを押してコードをコピーします。
コピーできたら、WordPressに貼り付ける場合はブロックエディターの+マークを押して、「カスタムHTML」を選択します。
すると、「HTMLを入力…」と表示されますので、CodePenでコピーした内容をそのまま貼り付けましょう。
コーディングした内容と、完成形のResultが表示されるはずです。
最後に
いかがでしたでしょうか？
ブログなどの文章がメインの媒体でコードを表示したいときは、
また、今回のCodePenのような、コードを表示する機能を持つプラグインとして「Code Block Pro」があります。
そのコードによってどのような表示結果になるかを示すことはできませんが、こちらもコード解説の時によく使用しますのでぜひ参考にしてみてください。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
＼ 最新情報をチェック ／
コメント