プログラミングやコーディングの勉強をしていると、ググった先でたまに見かけるこれ。
See the Pen
EBBrOX by y.sato (@satoyou)
on CodePen.
気になっているかた。いらっしゃるのではないでしょうか？
そんな疑問にお答えするためにこの「CODEPEN」の使い方について解説していきたいと思います。
それでは早速いってみましょう！
もくじ
CODEPENとは？
HTML、CSS、JavaScriptのコードを書くとその場で表示を確認できるウェブサービスです。無料と有料がありますが、無料で十分使えます。
その他にはこんなことができます。
- 自分が書いたコードを共有できる
- 人の書いたコードを編集できる
- ウェブサイトに画面を埋め込める
わたしはこんな使い方をしています。
- ちょっとしたことを確認したいとき
- 思いついたコードがイメージ通りに動くか確認したいとき
サインインの方法
右上の「Sign Up」をクリックします。
Twitterなどのアカウントでもできますが、今回はメールアドレを使ってサインアップする方法を紹介します。「Sign Up with Email」をクリックします。
①CODEPEN内で使う名前でなんでもOKです。
②ユーザーIDです。ログインで使います。
③メールアドレスです。
④パスワードです。
⑤全部入力したらこちらのボタンをクリックします。
先ほど入力したメールアドレスにメールがくるので「Click to Verify Email」をクリックすると登録完了です。
CODEPENの使い方
それでは画面を見ていきましょう。
まずは左上の「Pen」をクリックです。
右側に表示されているのは他のユーザーが作成したもので、クリックするとコードが見られます。
- HTMLを書く場所
- CSSを書く場所
- JavaScript書く場所
- プレビュー画面
右上の「Save」をクリックすれば保存もできます。
ワードプレスなどのブログへの埋め込み方法
ワードプレスなどのブログへの埋め込みかたを見ていきましょう。
コードを書き終えたら右下の「Embed」をクリックします。表示されない場合は「Save」で保存してみましょう。
- 黒とか白とか見た目を選べます。
- 貼り付けたものを自動で動かすか、クリックして動かすかです。動きのあるものをチェックを入れずにたくさん貼るとサイトが重くなるのでそれを防ぎます。
- コードを編集可能にする。有料会員向けの機能です。
- ここをマルッとコピーしてブログに貼り付けます。
これはわたしがテストで貼り付けたものです。
See the Pen
EBBrOX by y.sato (@satoyou)
on CodePen.
さていかいかがだったでしょうか。
とてもお手軽に使えますので、コーディングに興味があったり、インプットしたものをアウトプットの場として活用したり、ブログに貼り付けたりと、色々な活用法ができます。
気になったかたはぜひ使ってみてはいかがでしょうか。
それではまた！ごきげんよ〜♪
