CodePen(Free版)の使い方【主にPen機能を解説】

CodePenは、フロントエンドのデザイナーと開発者向けのソーシャル開発環境です。

CodePen(Free版)をこれから始めたい人向けに使い方をまとめました。

アカウントの作成

CodePenを利用するにはアカウントが必要になります。登録には通常のメールアドレスによる登録のに加え、Twitter、GitHub、Facebookアカウントによる登録も可能なのでいずれか1つを用意しましょう。

CodePenトップページの右上[Sign Up]から登録ができます。

Free版の制限

CodePenは無料版のままでも十分使えるサービスです。

  • Pen、Post、Collectionの3機能の作成数は無制限
  • 無制限のテンプレート
  • デバッグビュー(ログインが必要)
  • 1つの組み込みテーマ
  • Projects機能は、最大10個のファイルをもつプロジェクト1つまで

非公開にこそできないものの、Penの作成数が無制限というのは最高ですね 。

主要な機能は4つ

CodePenは4つの主要な機能があります。これらのうち、Penが最もよく使われる機能です。

  • Pen
  • Project
  • Post
  • Collection

「Pen」機能

Pen の編集画面

Pen機能はウェブページを「Pen」という単位で管理します。

Penはフロントエンドの3要素、HTML、CSS、JavaScriptのコードを書くことによりその結果がリアルタイムでプレビューされるものです。

HTML、CSS、JavaScriptはいくつかの代わりとなる言語もサポートされています。

標準言語変更可能な言語
HTMLHaml, Markdown, Slim, Pug
CSSLess, SCSS, Sass, Stylus, PostCSS
JavaScriptCoffeeScript, LiveScript, TypeScript, Babel

Penを新規作成する

サイドバーから「Pen」を選択するか(左赤枠)、アイコンをクリックして「New Pen」を選ぶ(右赤枠)

Pen Settings

Penごとの設定はSettingsで行います。

Settingsは5つのタブからなります。

HTML タブ

HTML タブ
HTML Preprocessor
HTMLプリプロセッサの選択。None (HTML)、Haml、Markdown、Slim、Pug のいずれかを選択。
Add Class(es) to <html>
<html>要素に追加するクラス。
Stuff for <head>
<head>要素に追加するコード。

CSS タブ

CSS タブ
CSS Preprocessor
CSSプリプロセッサの選択。None (CSS)、Less、SCSS、Sass、Stylus、PostCSS のいずれかを選択。
CSS Base
「normalize.css」または「reset.css」を適用することができます。
Add External Stylesheets/Pens
CDNなど外部CSSのリンク。Penを入力することもでき、その場合はそのPenのCSSがリンクされます。

JavaScript タブ

JavaScript タブ
JavaScript Preprocessor
JavaScriptプリプロセッサの選択。None (JavaScript)、CoffeeScript、LiveScript、TypeScript、Babel のいずれかを選択。
Add External Scripts/Pens
CDNなど外部JavaScriptのリンク。Penを入力することもでき、その場合はそのPenのJavaScriptがリンクされます。

Behavior タブ

Behavior タブ
Code Indentation
コードインデントのタイプとサイズ。
Save Automatically?
Penのオートセーブをするか。
Auto-Updating Preview
有効にすると、コーディング時にプレビューパネルが自動的に更新されます。無効になっている場合は、[Run]ボタンを使用して更新します。

Pen Details タブ

Pen Details タブ
Pen Title
Penのタイトル。
Pen Description
Penの説明。
Tags
Penに付けるタグ。

コードの埋め込み

ブログなどにPenを埋め込むことができます。

Pen編集画面下部から[Embed]を選択
Embed This Pen
Theme
表示テーマの選択。
Default State
チェックを入れた場合、埋め込みがクリックされた場合にロードされます。
Editable State
【Pro機能】チェックを入れた場合埋め込まれたPenが編集可能になります。
Preview
埋め込みPenがロードされた時の初期状態です。このプレビューの状態によってが返されるコードの内容が変わります。
Copy & Paste Code
埋め込みPenのコードです。 「WordPress」「Shortcode Prefill」「Embed iframe」「HTML(recommended)」が用意されています。必要なものを選択してコードをコピーして使います。

「Project」機能

Project機能はPenとは異なり複数のファイルを扱うことができます。

しかし、Free版では1つしかProjectを作成することができない上にファイル数が10までしか作成できません。

ですのでほとんど使う機会はないでしょう。

「Post」機能

PostはMarkdownエディタの機能です。README文書を書くイメージといったところです。

Postの特徴

  • Markdown入力を支援するツールバーを備えている。
  • Penの埋め込みが可能。
  • カスタムCSSが作成できる。
  • タグ付け可能。

「Collection」機能

Collection機能は他の主要な機能に比べると小さいです。

これは、Penをラベルづけするかのよう分類の機能です。

任意のCollectinを作成し、PenにCollectionを対応付けます。1つのPenには複数のCollectionを対応づけることができます。

その他

Fork

Fork ボタン

Forkは他のアカウントが作成したPenをコピーする機能です。Forkした後は自分で自由に編集することができます。

Love

LoveはSNSでお馴染みかと思いますが、CodePenのLoveはLoveなしに加えて3つの段階があります。

左からLoveなし、Love1、Love2、Love3