【CodePen】難しい設定はいらない!CodePenの使い方

コーディング
まるこ
まるこ

開発環境を一から構築しなくても、Webブラウザ上でHTML/CSS/JavaScriptのコーディングができる【CodePen】をご存知でしょうか?リアルタイムでデザインの表示・動作確認を行える、とても便利なサービスです。
本記事では【CodePen】の登録方法や、基本的な使い方について、簡単に解説していきます。

CodePenとは

CodePenは、HTML・CSS・JavaScriptのコーディングを、Webブラウザ上で行えるサービスです。

通常のコーディングは、開発環境を構築してから作業を行います。しかし、すでに開発環境が整っているCodePenでは、難しい設定は不要です。コーディングの内容は、リアルタイムでWebブラウザ上に反映されるため、動作を確認しながら作業ができます。「エンジニアとデザイナーで、デザインのイメージを共有したい」「デザインの一部の動作をテストしたい」といった場合にも便利です。

また、ソースコードは、SNS上でシェアをしたり、ブログ・Webサイトに埋め込んで公開することもできます。世界中のエンジニアやデザイナーが公開しているソースコードの閲覧も可能です。

CodePenの主な機能

  • コーディングの内容をリアルタイムで確認できる
  • ソースコードをSNS上でシェアできる
  • ブログやWebサイトにソースコードを埋め込める
  • 他のCodePenユーザーが作成したソースコードを閲覧・使用できる

※公開されているソースコードは、オープンソースです。他のユーザーが作成したソースコードを、Webサイト制作時などに、コピーして使用できます。ただし、他のユーザーのソースコードをWebページに使用する際は、著作権の表記が必要です。
詳しくは、CodePenのライセンスページよりご確認ください。

会員登録~Pen機能の基本的な使い方

CodePenは、「会員登録なし・無料会員・有料会員」のいずれかの方法で、使用できます。基本的な機能は「無料会員」でも十分です。必要に応じて、有料会員にグレードアップするのをおすすめします。

会員登録なし動作確認向け。記述したソースコードの保存は不可。
無料会員Pen/Collection機能が無制限で使用可能。
Project機能は1プロジェクト作成可能。(プロジェクト内のファイルは10個まで)
すべてのソースコードが公開対象。
有料会員無料会員の機能はすべて使用可能。
複数人での同時編集(ペアプログラミング)、ソースコードの非公開設定なども可能。※3つのプランがあり、プランによって機能が異なる

会員登録

まずは、公式ページより会員登録を行いましょう。
https://codepen.io/

トップページの画面右上にある[Sign Up]ボタンをクリックして、新規登録ページに移動します。(会員登録をしない場合は[Start Coding]ボタンから、コードエディタに移動できます。)

CodePenトップページ

「Twitter」「GitHub」「facebook」いずれかのアカウントで連携、または「メールアドレス」で登録を行います。(メールアドレスで登録する場合は、必要事項を入力して[Submit]ボタンを押してください。)

無料会員登録ページ

コードエディタの設定

会員登録が完了すると、以下のページが表示されます。画面右上の人型アイコン[User Menu]をクリックすると、プロフィールなどの設定ができます。
コードエディタに移動するには、画面左側のCreate内にある[Pen]ボタンをクリックします。(ユーザーメニュー内の[New Pen]からでもコードエディタに遷移できます。)

登録(ログイン)完了後ページ

ソースコードを記述する前に、必要に応じて各言語のコーディング環境を設定しましょう。(初期設定で問題ない場合は作業不要です。)
右上の[Settings]ボタン、または各言語の歯車ボタンをクリックして、設定画面を開きます。

コードエディタ

Pen Settings内から設定変更したい言語を選択します。設定が完了したら[Save&Close]ボタンで、内容を保存します。

環境設定画面
  • プリプロセッサ内では、以下の言語が選択可能
    • HTML:Haml/Markdown/Slim/Pug
    • CSS:Less/SCSS/Sass/Stylus/PostCSS
    • JS:Babel/TypeScript/CoffeeScript/LiveScript
  • jQueryなどのライブラリも使用可能

ソースコードの記述(コードエディタの仕様)

環境の設定が整ったら、実際にソースコードを記述していきましょう。コードエディタの主な仕様は次のとおりです。

コードエディタの主な仕様
  • タイトル:ペンマークをクリックして入力
  • ソースコード:各言語ごとに記述
  • プレビュー表示:コーディング内容がリアルタイムで反映される
  • [Save]ボタン:入力内容保存

[Share][Export][Fork]ボタンの機能

[Share]ボタン【シェア】リンクのコピー、TwitterなどのSNSでのシェア、テキストメッセージ(SMS)に直接送信
[Export ]ボタン 【保存】GitHub Gistでの保存、zipファイルのダウンロード
[Fork ]ボタン 【取り込み】他のCodePenユーザーが作成したソースコードを、自分のアカウント内に取り込む(完全コピー)※Fork後は自由に編集・保存ができる

保存した内容は、Your Work内に一覧で表示されます。

登録されたPen

ブログやWebサイトへの埋め込み

CodePenは、ブログやWebサイトに埋め込むことができます。まずは[Embed]ボタンをクリックして、埋め込み用コードの取得画面に移動します。

「HTML(Recommended)」を選択し、[Copy Code]ボタンでソースコードをコピーしましょう。

埋め込みコード取得画面

コピーしたソースコードを、ブログやWebサイトの埋め込みたい部分に貼り付けます。(画像は、WordPressの投稿画面に貼り付けたものです。)

WordPress投稿画面

埋め込まれたCodePenの操作方法

ブログやWebサイトに埋め込まれているCodePenでは、次の操作ができます。

See the Pen ボタンデザイン① by Wepot (@Wepot) on CodePen.

言語ボタン対象言語のソースコードを表示
[Result]ボタンコーディング結果の表示・非表示切り替え
[EDIT ON CODEPEN]ボタン埋め込まれていたソースコードが表示され、サイト上でソースコードの編集ができる。※動作確認は行えるが、保存はできない

「大きさ・色を変えてみたい」「別の動きを試してみたい」と思ったら、[EDIT ON CODEPEN]ボタンから編集画面へ移動して、ソースコードをいじってみましょう。[Fork]ボタンをクリックすれば、自分のアカウント内に保存もできます。

まとめ

いかがでしたでしょうか。今回は【CodePen】の基本的な使い方について解説しました。
CodePenは多くのブログやサイトで使用されています。コーディングをされない方でも、「デザインサンプルのストック用」などの使用方法もできます。ご紹介しきれていない機能も豊富にありますので、是非ご自身のスタイルに合わせて、活用してみてください。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。