【CodePen】よく見るコード&プレビュー表示をやってみよう

codepen WEBツール

WEB制作系のブログや学習系のサイトでよく見るこのようなソースコード&プレビュー表示。

See the Pen CSS画像丸く切り抜く 位置指定 by sukimadou (@sukimadou) on CodePen.

今回はWEBツール「CodePen」を使って このプレビュー表示をやってみましょう。

CodePenとは

今回使用するCodePenというWEBツールは、ブラウザ上でHTMLやCSSのコーディングができるツールです。

書いたコードがリアルタイムでプレビューされるので、コーディング練習にも最適です。

1番の特徴は作成したソースコードをシェアできること!

CodePenを使ってみよう

アカウント登録

CodePenは無料で使用できるツールですが、アカウントが必要になります。

CodePenのサイトにアクセスしてまずはアカウント登録をしましょう。

→CodePen

CodePen

右上の「Sign Up」からアカウントを作成します。

CodePen

TwitterGitHubFacebookのアカウントかメールアドレスから選んで登録できるので、好きなものを選んで作成してください。

コード書いてプレビューを作成

CodePen

アカウント登録が済んだら「Pen」をクリック。

CodePen

こちらがまっさらな新規画面。
HTML、CSS、JSの枠内へコードを入力すると赤枠部分にリアルタイムでプレビューされます。

CodePen

このような感じです。

左上のタイトルは鉛筆マークをクリックすると変更できます。

作成したプレビューをサイトに埋め込む

プレビューを作成したらサイトに埋め込んでみましょう。

CodePen

右下の「Embed」をクリック。(小さくて見づらい…)

CodePen

この画面で埋め込みの仕様を決めます。

  • Themeのタブでプレビュー表示モードを「light」か「Dark」に
  • Preview部分の「HTML」「CSS」でどちらをデフォルト表示にするか決定
  • 赤矢印部分をドラッグで表示時の高さを設定

仕様の設定が済んだら「Copy&Paste Code」のグレー部分のコードを表示したいサイトへコピー&ペーストして埋め込み完了です。

See the Pen CSS画像丸く切り抜く 位置指定 by sukimadou (@sukimadou) on CodePen.

こんな感じで表示されればOKです。

CodePenで画像を使用する

CodePenで画像を使用したい場合、私はGoogleドライブに画像をあげてそれをリンクで引っ張って使用しています。

Googleのアカウントを持っていれば誰でも無料で使えます。

→Googleドライブ

Googleドライブ

Googleドライブにアクセスしたら使用したい画像を赤枠部分にドラッグ&ドロップでアップロードします。

Googleドライブ

アップロードした画像を右クリックしてリンクを取得します。

Googleドライブ

ブログやサイトに埋め込む場合やコードを共有する場合は、リンクの設定を「リンクを知っている全員」にしてリンクをコピー。

See the Pen CSS画像丸く切り抜く 位置指定 by sukimadou (@sukimadou) on CodePen.

HTMLやCSSで画像を呼び出すコードにコピーしたものをペーストすればOKです。

タイトルとURLをコピーしました