今更ですがCodepenを登録して使い始めました。
英語でよくわからない、という方のために登録して初歩的な使い方をするまでをご紹介します。
Codepenって？
よく見かけると思うこれです。
See the Pen
Codepenって？ by kkdd (@kk8kk)
on CodePen.
簡単に説明するとCodepenとは、オンライン上でHTML・CSS・JSを書いて、実際の動きを手軽に確認することができるサービスです。
また、実際に書いたコードは保存しておくことができます。
登録して使ってみよう
とりあえずCodepenのサイトを開きます。
CodePen
ちなみに会員登録しなくても左側のボタンから実際に使用することはできます。
ただコードの保存などができなくなるので、その点はご注意ください。
それでは実際に登録して使ってみましょう。右上の『sign up』をクリックします。
無料会員の登録画面が表示されます。twitter、GitHub、Facebookで登録する方法がありますが、今回はメールアドレスで登録してみます。
上から名前、ユーザーネーム（自身のページのURLに使用されます）、メールアドレス、パスワードを入力します。
内容に問題なければ『Submit』をクリックしましょう。
これで無事に登録が完了しました！
すぐにHTML、CSS、JSを入力できる画面が表示されます。
ためしにHTMLとCSSを入力してみると、下のプレビュー画面に表示がされました。
ちなみにHTMLの方はbodyなど大本の部分の設定は必要ありません。
ちなみに名前の横の設定アイコンをクリックすると詳細の設定ができます。
HTML
| HTML Preprocessor | HamlやMarkdownなどの記述方法の設定ができます |
|---|---|
| Add Class(es) to <html> | <html>タグにクラスを加えることができます |
| Stuff for | headタグ内に必要なmetaなどの記述を設定できます |
CSS
| CSS Preprocessor | SCSSやsassなどの言語を設定できます |
|---|---|
| CSS Base | リセット用のcssの選択ができます |
| Vendor Prefixing | 『-webkit-』などのようなベンダープレフィックスを自動でつけるか選択できます。 |
| Add External Stylesheets/Pens | 外部のcssのURLを入力すると使用することができます |
JS
| JavaScript Preprocessor | BabelやTyprScriptの言語を設定できます |
|---|---|
| Add External Scripts/Pens | 外部のJSのURLを入力すると使用することができます |
| Add Packages | JavaScriptパッケージを読み込むことができます |
埋め込みをする
一番使うであろう埋め込み機能ですが、画面の右下に『Embed』というボタンがあるのでそちらをクリックします。
あとはコードが表示されるので、そちらをコピーして埋め込みたい場所にペーストするだけです。
左側にオプションもあるので、必要に応じて設定をしてください。
| Default Tabs | デフォルトで開いているタブ（HTMLを最初に開いておくかCSSにするかなど）を選択できます |
|---|---|
| Theme | テーマを選択できます。『default』『Light』『Dark』を設定できます |
| Use Click-to-Load | クリックしてから表示結果を表示するかどうかを設定できます |
| Make Code Editable | コードを編集可能にするかどうかを選択できます |
クライアントワークでは気を付けないといけないですが、単純にコードを共有したり検証したり保存したり…という場合にはとても便利なCodepen。
ぜひ使ってみてください。
