NEGIKA BLOG

WEB/DTP DESIGNER NEGIKA

NEGIKA BLOG

WEB/DTP DESIGNER NEGIKA

2019.09.07

Web

ブログにソースコードを埋め込むのが簡単!CodePenを使ってみよう

ブログにソースコードを埋め込むのが簡単!CodePenを使ってみよう

「CodePen」とは、ソースコードを共有できるサービスで、ブログにソースコードを埋め込んだり、テスト表示させることが可能です。今回はそんな「CodePen」を紹介したいと思います。

基本的に無料(有料版あり)で使うことが出来ます。アカウント作成も必要ですが、簡単に作成できるのでとても便利です。

CodePenとは?

CodePenはソースコードのプレビューも可能!

「CodePen」とは、ソースコードを共有できるサービスで他者とソースコードも共有することができます。
自身でも簡単に作成でき、Html、css、JavaScriptが自由に編集できて、ブログにこのように出力できます。

See the Pen
bolg_codepen
by 葱 (@negika)
on CodePen.

アカウント作成に必要なのは?

CodePenのアカウント作成に必要なのはこの4つ!作成の仕方のとても簡単です。

  • 名前(出力されるので注意/変更可)
  • アカウント名(URLになる/変更不可)
  • メールアドレス
  • パスワード

CodePenのアカウント作成と使い方

今回は、CodePenのアカウント作成と簡単な使い方までご紹介します。

1CodePenから「Sign Up」をクリック

下記のCodePenトップページにアクセスし、「Sign Up」をクリックします。
https://codepen.io

2入力画面が表示される

「Sign Up」をクリックしたら、下記のような入力画面が表示されます。

3アカウント登録

名前、アカウント名、メールアドレス、パスワードを入力し、「Submit」をクリックします。
※名前はソースコード出力時に表示されるので注意!
※アカウント名は自身のURLになります。

4プロフィール入力画面

とりあえずこちらはなにも記載せず、「Save&Continue」をクリックします。

5説明画面

説明画面が表示されますが、「I’d rather not take tour right now」をクリックします。

6ついにエディター表示

こちらがコードがかける画面です。

7レイアウトは右上から

画面のレイアウト変更は「Change View」から変更できます。

8書いてみよう!

簡単にHTML/CSSを記入してみました。

9出来たら右下の「Embed」をクリック

完成したら右下の「Embed」をクリックして出力します。

10あとはコピペだけ!

枠内をコピーして、ブログ等に貼り付けてください。

まとめ

以上、「CodePen」のアカウント作成の仕方と簡単な使い方でした。作成しながら確認できてブログ上でも完成版が確認できるのが便利ですよね!

この記事のURLとタイトルをコピーする

SPONSOR

PROFILE

negika

WEB/DTP Designer

工業高校と大学でデザインと建築を学び、その後専門学校でWEBを学ぶ。制作会社勤務を経てフリーランスへ。

→プロフィールはこちら

CONTACT

ホームページ制作/ウェブデザイン/コーディング/印刷物デザインのご依頼/お見積もり/制作実績閲覧はこちらからご連絡ください↓外注先をお探しの制作会社様もお気軽にご相談ください↓

CONTACT