【Service】ソースコードと動作をブログなどに出力できる「CodePen」を使用してみよう

Pocket

今回はブログなどに綺麗にソースコードを挿入することができる「CodePen」というサービスの基本的な使い方をメモしていきます。
このサービスの最大の特徴は、挿入したコードをリアルタイムで表示を確認しながら開発をすることができるサービスです。

「CodePen」のサービスを実際に確認してみましょう

 

See the Pen
GRopEdB
by egg (@egg0522sei)
on CodePen.

こんな感じでソースコードと実際の表示をタブを切り替えることで表示することができます。
色んなサイトで見かけることがあるのではないでしょうか?基本的に無料で使用できるサービスで、HTML、CSS、Javascriptが初期設定で使用できます。
このサービスを使用するには会員登録が必要です。

「CodePen」の使用方法

1.会員登録

まずは

https://codepen.io/

に飛んで会員登録をします。ちなみに会員登録しなくてもサービスを利用することもできますが、コードを編集したい場合など、会員登録していおいたほうが便利なので登録しておくことを推奨します。

CodePren

 

2.ログイン後、コードを記述する

CodePen02

サイドメニューにある「Pen」をクリックします。

CodePen03

いかにもソースコードを書いてくださいと言わんばかりの画面が現れましたね。初期設定では左から「HTML」、「CSS」、「Javascript」のコードを挿入していくことで、ブラウザ上での動作を確認することができます。では実際に、書いてみます。

CodePen04

画面下のほうに実際の動作が表示されます。画面上部の「Save」で状態を保存することができます。

 

3.他のサイトに出力する

ではこの作成したプログラムを他のサイトに出力してみましょう。

CodePen05

サイドメニューにある「Dashboard」をクリックします。

CodePen05.5

作成したプログラムコード一覧が表示されますので、出力したいコードを選択します。

CodePen06

 

CodePen07

保存されているコードが表示されましたね。次に少々見づらいのですが、画面右下の「Embed」をクリックします。

CodePen08

このような画面が表示されますので、赤枠で囲まれたCopy & Paste Code」内のコードをコピーし、貼り付ければ出力できます。

初期設定がHTMLになっていますが、大体はこのままコピーすれば使用できると思います。

では実際に埋め込んでみます。

 

See the Pen
GRopEdB
by egg (@egg0522sei)
on CodePen.

いかがでしょうか?ソースコードと実際の動きが確認出来て、プログラムの知識をメモしたり、紹介するにあたってとても便利なサービスですね(*’ω’*)

それでは今回はここまです。お疲れ様でした(・ω・)ノシ

エッグ

シェアする

コメントを残す

メールアドレスが公開されることはありません。

コメントする