Help us understand the problem. What is going on with this article?

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

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.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした