LoginSignup
216
233

More than 3 years have passed since last update.

CodePenの使い方(知らない人向け)

Last updated at Posted at 2020-03-01

CodePenとは

CodePenは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスです。

CodePenの良いところ

  • ソースコード、その表示を他のサイトに埋め込める(シェアできる)
  • HTML,CSS,JSの外部ライブラリなども使用できる
  • 他人のソースコードを見ることができる
  • 基本無料で使うことができる

CSSやJSの挙動をシェア先で確認できるのがいいですね。

CodePenの登録

CodePenを使用するには、ユーザー登録をする必要があります。
https://codepen.io/にアクセスしましょう。
スクリーンショット 2020-03-01 13.53.19.png
画面右上のSignUpをクリックして登録します。

スクリーンショット 2020-03-01 15.30.28.png
登録せずとも画面左のStart Cordingでコーディングきますが、登録をすることによって自分のソースコードを保存し、いつでも編集することができるようになります。

CodePenの使い方

スクリーンショット 2020-03-01 21.06.39.png
登録が完了したら、画面左メニュー内のCREATE欄からPenをクリック。
スクリーンショット 2020-03-01 21.10.06.png

真っさらなページが表示されます。
ここに直接HTML,CSS,JavaScriptを書き込んでいくと、画面下半分のエリアにリアルタイムでコードの内容が表示されていくことになります。

HTMLはお決まりのDOCTYPEから記述する必要はなく、bodyタグの中に書くイメージで大丈夫ですし、CSSを読み込む必要もありません。

Saveボタンを押すと保存され、DashBoardに格納されます。

ライブラリの読み込み

CodePenのいいところは、リアルタイムで動くものを作れる他に、何と言ってもライブラリ等を読み込むことが可能なところです。
例えば、CSSではSCSS、JS関連のjQueryVueなんかも使うことができます。

使い方は簡単でSettingsボタン、または言語名横の歯車ボタンを押すと設定画面が開かれます。
スクリーンショット 2020-03-01 21.21.29.png

CSS関連であれば、左のメニューからCSSを選択し、CSS PreProcessorからプルダウンで使用したいものを選択するだけ。
スクリーンショット 2020-03-01 21.22.12.png

また、jQueryであれば
スクリーンショット 2020-03-01 21.34.46.png
JSを選択し、下の検索窓に「jQuery」と入れると候補が出てくるので、それをクリックするだけです。簡単ですね。

Qiitaへの埋め込み方

ソースコードの記述が完了し、シェアしたい場合は
スクリーンショット 2020-03-01 21.37.35.png
右下のメニューからEmbedをクリック。
スクリーンショット 2020-03-01 21.39.17.png

Embed This Penという画面が表示されます。
この下部にあるCopy & Paste Code内のタグをコピーし、貼り付けるだけです。(見切れててごめんなさい)
デフォルトで形式がHTMLになっているので、大概はこのままコピーすればすぐにできるはずです。
他のブログサービスなんかにもそのまま使えると思います。

実際に埋め込んでみました

SCSS

See the Pen RwPodXg by fumu (@fumu238) on CodePen.

CSSにコンパイルする必要がないのでとても楽です。
しかし、SCSS欄の下にView Compiledと出るのでそれをクリックするとあら不思議、CSSにコンパイルされたコードも見ることができます。

jQuery

See the Pen MWwoJqo by fumu (@fumu238) on CodePen.

簡単なものですが、こんな感じです。

216
233
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
216
233