［エンジニアブログに必須 ］HTML/CSS/JavaScriptのリアルタイムプレビュー機能を持った『CodePen』が便利！
2020.02.15
みなさんは「CodePen」というすごい便利なウェブサービスをご存じですか？
See the Pen
CodePenの紹介 by sank (@sank_f)
on CodePen.
上に表示されている機能で、ウェブエンジニアブログではよく見ますよね。
ウェブエンジニアブログを始めた時点で絶対これは使いたいと思っていました。
今回はそんな便利な「CodePen」を紹介させていただきます。
プログラミングをリアルタイムプレビューで表示確認ができる『CodePen』の使用方法
『CodePen』 無料登録の手順
まず『CodePen』を使用するのに無料会員登録が必要になりますので、
上記のリンクから『CodePen』の公式サイトにいってください。
①［Sign Up for Free］をクリック
②［Sign Up with Email］をクリック
SNSでの登録も可能ですので、「メールアドレスを登録するのはめんどくさい」と思う方はSNSと連携させるといいかもしれません。
わたしは試していませんが、SNSで登録することにより、シェアもより簡単にすることができるかもしれません！
③すべて記入し［Submit］をクリック
- YOUR NAME：名前
- CHOOSE A USERNAME：シェアの時などURLの末尾につく文言（基本的に名前と同じで問題ありません）
- EMAIL：メールアドレス
- CHOOSE PASSWORD：パスワード
上記４点すべての記入を終え、［Submit］をクリック。
④［Save&Continue］をクリック
ここは特に記入する必要がありません。
何も記入せずに「Save&Continue」をクリックし、登録完了となります。
これで登録は完了しました。
『CodePen』を使用し、ブログで共有しよう
次に『CodePen』の最も考えられる利用方法「ブログでの共有」の仕方についてになります。
こちらも簡単ですので、ぜひ活用してみてください！
①［ペン］をクリック
『CodePen』のトップ画面左上の［ペン］をクリック。
翻訳されていない場合は［Pen］になっていますが、場所は変わりません。
②［Save］をクリック
内容を記述した後、右上の［Save］をクリックしてください。
③［Embed］をクリック
［Save］をクリックすると、右下に［Embed］が出現するので、こちらをクリックしてください。
④Copy & Paste Code
［Embed］をクリックするとポップアップが出現するので、その下に記述されている「HTML」をWordPressの「テキスト」に記述してください。
これで無事表示されるはずです。
無事表示されているのは確認できたら、ぜひ沢山活用してみてください。
『CodePen』の活用方法（使用するメリット）
『CodePen』は先述したように、ブログでソースのプレビューを見るのに便利ですが、それ以外にも活用方法がありますので参考にしてみてください。
『CodePen』の活用方法
- 「HTML」、「CSS」、「JavaScript」のリアルタイムプレビューが可能のため、ちょっとした挙動の確認に。
- 作成したソースや動きを共有できる（ブログなどでの活用方法）。
- 作業中のデバックに修正箇所だけを取り出し確認できる。
簡単に書くだけでもこれだけのメリットがあります。
これで無料なのですから使わない手はないですよね。
ぜひ無料登録し、いろいろと触ってみてください。
もし使いやすい設定方法があれば教えて下さい。
