公開日：
更新日：
CodePenとは？
HTML、CSS、JavaScriptを入力するとリアルタイムで結果をプレビュー表示できる無料のWebサービスです。（有料版もあります）
保存したコードは他のユーザーも見ることが出来ます。
CodePenでできること
- ブラウザ上で入力したHTML、CSS、JavaScriptをプレビュー表示しながら編集
- コードのダウンロード
- コードの公開
- WEBサイトへの埋め込み
- 作成したコードを保存
- お気に入り機能
- Forkをして編集
- console
- プライベートモード（有料会員限定）
- ファイルアップロード（有料会員限定）
CodePenの登録方法
- CodePenにアクセス
- 「Sign Up for Free」を選択
- SNS・Githubか、メールアドレスで登録するかを選びます。
今回はメールアドレス（Sign Up with Email）を選択します。
- 「Sign Up with Email」を選択すると入力フィールドが表示されるのでそれぞれ入力して「Submit」を選択します。
- 登録に成功すると以下のページに遷移します。
Codepenの使い方
新しいPenを作る
画面右上のアイコンを選択してプルダウンメニュー内の「New Pen」を選択すると新しいPenのページに遷移します。
画面の見方
左からHTML、CSS、Javascriptの入力スペースがあり、下のスペースには入力した結果がリアルタイムでプレビュー表示されます。
作成したPenを保存して一覧で確認する
codepenは自動保存機能があるので入力が終わると自動で保存されます。また、手動で保存する場合は画面上部の「save」を選択します。
画面左上の「Untitled」はPenのタイトルになります。
デフォルトではUntitledになる為、タイトル横の鉛筆アイコンをクリックして任意の名前に変更します。
右上のアイコンをクリックして「Your Work」を選択すると今ままで作成したページの一覧が表示されます。
作成したPenを削除する
一覧ページから削除する
Your Workページの削除したいpenの「･･･」メニューからしてDeleteを選択すると削除します。
Penページから削除する
画面下のDeleteを選択すると削除されます。
他のユーザーのcodepenを見る
codepenは世界的に使用されており、他ユーザーのcodepenを見ることでかなり勉強になります。
世界的なクリエイターの素晴らしいコードがリアルタイムで次々と公開されています。
メニューの「Trending」を選択すると今トレンドのcodepen一覧が表示されます。
お気に入りに追加して一覧で見る
ブラウザのブックマーク機能と同じですが、お気に入りに追加していつでもアクセスできるようになります。それが「love」機能です。
ページの上部にハートマークがあります。
選択すると白いハートが赤いハートになり、お気に入り追加が完了します。
「Profile」ページに遷移して「loved」のタブを選択するとお気に入りの一覧が表示されます。
まとめ
codepenは環境構築をせずにHTML，CSS、Javascriptを気軽に試せるwebサービスです。
最近ではvue、Flutter専用のテンプレートも用意されているので、よりリッチなwebサービスになっています。
他にも様々な機能がありますので、別の記事で紹介したいと思います。
シェアする
シェアする
シェアする
シェアする
フォローする