便利な無料ツール【CodePen】の使い方

Web上でHTML、CSS、JavaScriptのコードを組み立て、リアルタイムでその結果を見ることのできるツールがCodePenです。

WordPressのプロフィール欄にアイコンが表示されていたので気になって調べました。

表示されていたアイコンは、これ ⇒

会員登録さえすれば無料で使えます。オリジナルデザイン用にCSSの組み立てをしたいなら、ぜひ使いたいツールです。会員登録しなくても使えますが、保存などはできません。

CodePenとは?

CodePen とは何か? 『百聞は一見に如かず』

コレです。

See the Pen Untitled by はむはむたまご (@tamago_hamham) on CodePen.

CodePenのサイトでHTML、CSS、JavaScriptをコーディングすると、その結果がリアルタイムで表示されます。

元々はWeb開発者のためのツールです。コードの組み立て、テスト、シェア、発表ということに使われて、開発者同士のコミュニケーションツールとしても役立っているようです。

たとえばWordPressの中でCSSを組み立てる時、記述した内容が思った通りに反映するか、確認する作業は意外と面倒です。先にCodePenでテストしておけば、作業が軽減できるはずです。

CodePen 登録

CodePenは、ユーザー登録をしなくても使うことはできます。ただし、保存や公開ができません。

その場限りの落書き的な使い方なら問題ありませんが、せっかく組み立てたコードを後から確認したり修正したり、埋め込み機能を使ったりしたいなら、登録することをお勧めします。

登録には、メールアドレスを登録するか、SNSと連携するかを選べます。

最初のユーザー登録は、画面の[Sign Up for Free] もしくは[Sign Up] ボタンから。

Freeプラン と PROプランの違いを確認する

CodePen 使い方

登録が完了したら早速使ってみましょう。大まかな手順は次の通りです。

  1. Pen]をクリックします。⇒ 新規Penが開きます。
  2. テストしたいコードを記述します。 ⇒ 結果がリアルタイム表示されます。
  3. Save]します。⇒ [Save=保存]しないと埋め込み機能は使えません。

自サイトに埋め込む場合は次に進みます。

  1. Saveすると画面右下に表示される[Embed]をクリックします。
  2. [Embed=埋め込み]用コードをコピーし、自サイトの表示位置に貼り付けます。
    (WordPressの場合、[カスタムHTMLブロック]を使います。)

図で見てみる

新規Penを用意する

[Sign in]している状態で表示されます。

CodePenでは1つのプロジェクトを「Pen」と表現しています。この「Pen」をクリックすると、新規Penが作成されます。

VueやFlutterの場合は「」の中のメニューから選択します。

プレビューを見ながらコードを組み立てる

HTML、CSS、JS、それぞれの領域に、テストしたいコードを記述します。記述と同時にプレビューが表示されます。

保存する

画面左上の[Untitled]横の 鉛筆アイコンをクリックすると、Penに名前を付けられます。

コードの保存は[Save]ボタンをクリックします。ユーザーページにコレクションされていき、後から修正などが可能です。

また、[Save]して初めて[Embed]ボタンが表示されます。

「Embed = 埋め込み」という意味!

自サイトへ埋め込む場合は[Embed]クリック→コードをコピー

画面右下に表示されるボタンの中から[Embed]をクリックします。

必要に応じて埋め込み画面をカスタマイズする

埋め込みの表示方法をカスタマイズできます。

  1. ドラッグすると、埋め込み画面の高さを変えられます。
    1. コードのheight:●●px;部分が連動して数値が変化します。
  2. Theme・・・スキンの Dark/Light を選べます。
  3. Use Click-to-Load・・・プレビューをクリック後に表示するよう選択できます。
  4. Make Code Editable・・・埋め込み画面内での編集の可否を選択できます。
  5. コードの形式を選択できます。CodePenでは[HTML]を推奨しています。

コードをコピーして、サイトに貼り付ける

最後に[Copy Code] ボタンをクリックしてコードをコピーし、自分のサイトの必要な位置に貼り付けます。

WordPressの場合は[HTMLカスタム]ボックスを使います。

CodePenの便利な機能

コード入力を簡略化する機能が用意されています。利用する場合は設定を変更しましょう。

オートコンプリート機能

コードを記述し始めると、自動的にコードの候補を表示してくれる機能をONにできます。

[User Menu]ボタンをクリックし、[Settings]を選択します。

[Settings]メニューの中から[Editor Preferences]を選択します。

  1. [Editor Option]項目内の[Autocomplete]にチェックを入れます。⇒自動更新されます

Font Awesome を使えるようにする

Penの中でWebアイコンフォントのFont Awesomeを利用するには設定が必要です。

CodePenでの設定の前に、Font Awesomeでユーザー登録を済ませておきましょう

こちらの設定は、Penごとに必要です。

Font Awesome のサイトで、自分自身の Kit’s Code をコピーしてきます。

  • Font Awesomサイトにアクセスして、登録を済ませましょう。
  • ユーザー登録後に発行されるKit’s Codeをコピーしてください。

CodePenに戻り、[Open HTML Settings]をクリックします。

[Stuff for]領域に、コピーしたKit’s Codeを貼り付けます。

[Save & Close]をクリックします。

こちらのsampleは、Theme(テーマ)を[Light]にしてみました。
サイトデザインや背景の色がハッキリした色遣いでないと、かえって見づらい気がしますね。

See the Pen Untitled by Sayavee (@tamago_hamham) on CodePen.

おぉ! Cocoonの中でFont Awesome 6 が表示されてる!

CodePenでは、Penの中がひとつのサイトと同等の働きがあるので、Cocoonでは使えないFont Awesome 6 を表示することができました。

あくまでもコードを公開する埋め込み機能なので、「使える」という意味ではありません。

タイトルとURLをコピーしました