[エンジニアブログに必須 ]HTML/CSS/JavaScriptのリアルタイムプレビュー機能を持った『CodePen』が便利!

# WEB制作

2020.02.15

みなさんは「CodePen」というすごい便利なウェブサービスをご存じですか?

See the Pen
CodePenの紹介
by sank (@sank_f)
on CodePen.

上に表示されている機能で、ウェブエンジニアブログではよく見ますよね。

ウェブエンジニアブログを始めた時点で絶対これは使いたいと思っていました。
今回はそんな便利な「CodePen」を紹介させていただきます。

プログラミングをリアルタイムプレビューで表示確認ができる『CodePen』の使用方法

『CodePen』 無料登録の手順

まず『CodePen』を使用するのに無料会員登録が必要になりますので、

CodePen

上記のリンクから『CodePen』の公式サイトにいってください。

①[Sign Up for Free]をクリック

『CodePen』登録方法①

②[Sign Up with Email]をクリック

SNSでの登録も可能ですので、「メールアドレスを登録するのはめんどくさい」と思う方はSNSと連携させるといいかもしれません。
わたしは試していませんが、SNSで登録することにより、シェアもより簡単にすることができるかもしれません!

『CodePen』登録方法②

③すべて記入し[Submit]をクリック

  • YOUR NAME:名前
  • CHOOSE A USERNAME:シェアの時などURLの末尾につく文言(基本的に名前と同じで問題ありません)
  • EMAIL:メールアドレス
  • CHOOSE PASSWORD:パスワード

上記4点すべての記入を終え、[Submit]をクリック。

『CodePen』登録方法③

④[Save&Continue]をクリック

ここは特に記入する必要がありません。
何も記入せずに「Save&Continue」をクリックし、登録完了となります。

『CodePen』登録方法④

これで登録は完了しました。

『CodePen』を使用し、ブログで共有しよう

次に『CodePen』の最も考えられる利用方法「ブログでの共有」の仕方についてになります。
こちらも簡単ですので、ぜひ活用してみてください!

①[ペン]をクリック

CodePen』のトップ画面左上の[ペン]をクリック。
翻訳されていない場合は[Pen]になっていますが、場所は変わりません。

『CodePen』使用方法①

②[Save]をクリック

内容を記述した後、右上の[Save]をクリックしてください。

『CodePen』使用方法②

 

③[Embed]をクリック

[Save]をクリックすると、右下に[Embed]が出現するので、こちらをクリックしてください。

『CodePen』使用方法③

④Copy & Paste Code

[Embed]をクリックするとポップアップが出現するので、その下に記述されている「HTML」をWordPressの「テキスト」に記述してください。

これで無事表示されるはずです。
無事表示されているのは確認できたら、ぜひ沢山活用してみてください。

『CodePen』の活用方法(使用するメリット)

『CodePen』は先述したように、ブログでソースのプレビューを見るのに便利ですが、それ以外にも活用方法がありますので参考にしてみてください。

『CodePen』の活用方法

  • 「HTML」、「CSS」、「JavaScript」のリアルタイムプレビューが可能のため、ちょっとした挙動の確認に。
  • 作成したソースや動きを共有できる(ブログなどでの活用方法)。
  • 作業中のデバックに修正箇所だけを取り出し確認できる。

簡単に書くだけでもこれだけのメリットがあります。
これで無料なのですから使わない手はないですよね。

ぜひ無料登録し、いろいろと触ってみてください。
もし使いやすい設定方法があれば教えて下さい。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~