悩む人「CodePen」にコードを書いてNotionなどのツールにストックしていきたいと考えているんだけど使い方がわからないので教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- CodePenの登録方法
- CodePenの使い方（保存と同時のインデントを整える等の設定etc）
- ブログやNotionへの埋め込み方法
- コードのダウンロード方法
- Penのシェア方法
- その他（Penの削除や復元方法）
是非、最後までご覧ください。
CodePenとは？
閲覧しているサイトで下記のような画面を見たことがあるかと思いますが、これが「CodePen」です。
ブラウザ上でHTML・CSS・JavaScriptなどのコードを書いて、その結果をリアルタイムで表示してくれます。
コーディングの練習からブログに埋め込みコードを紹介したり、Notionに埋め込みコードをストックすることもできます。
また、動作確認用に使うこともできたり、ブログにコードのみを書いて紹介するよりもCodePenを埋め込むことでコードの表示結果も反映されるためコードの信頼性の担保にもなります。
「CodePen」には、無料・有料プランとありますが、コーディング練習、動作確認、ブログやNotionに埋め込む等の利用あれば無料プランで十分だと思います。
無料プランと有料プランの違い
※「日本語に翻訳」した画像を掲載しています。
個人プラン
チームプラン
有料プランの詳細については下記サイトでご確認ください。
※内容は英語ですが「日本語に翻訳」できます。
登録方法
公式サイトにアクセス
「Sign Up」をクリックします。
下記の画面が表示されるのでお好きな方法で登録して下さい。
ここでは「Sign Up with Google」で登録していきます。
「Sign Up with Google」をクリック後、下記の画面が表示されるのでアカウントを選択します。
アカウントを選択後に下記の画面が表示されますので「」で閉じます。
これで「CodePen」を使えるようになりました。
余談：登録せずに利用することもできますが、、、「保存」はできません。
「Start Coding」をクリックします。
「Save」をクリックします。
「保存」ができません。
※保存するには「ログイン」または「サインアップ」する必要がありますと表示されます。
CodePenの使い方
「Settings」をクリックします。
「Pen Settings」が開きます。
「HTML」を選択します。
HTML Preprocessor
記法を下記から選択できます。
- None
- Haml
- Markdown
- Slim
- Pug
Stuff for <head>
例えば、fontAwesomeのアイコンを使いたい場合には、下記の赤枠にfontAwesomeのCDNを貼り付けることでfontAwesomeのアイコンが使えるようになります。
「CSS」を選択します。
CSS Preprocessor
記法を下記から選択できます。
- None
- Less
- SCSS
- Sass
- Stylus
- PostCSS
CSS Base
リセットCSSの選択が出来ます。
Vendor Prefixing
ベンダープレフィックス（「-moz-」「-webkit-」など）を自動で付与するか選択できます。
「JS」を選択します。
JavaScript Preprocessor
言語を下記から選択できます。
- None
- Babel
- TypeScript
- CoffeeScript
- LiveScript
Add External Scripts/Pens
例えば、検索窓に「jQuery」と入力すると候補が表示されるため赤枠の「jquery」を選択することで「jQuery」が使えるようになります。
または
HTMLのheadタグにjQueryのCDNを読み込むこともできます。
「Behavior」を選択します。
Format on Saveを「On」にします。
保存でインデントが自動で整うようになります。
「Editor」を選択します。
「your global Editor Settings」をクリックします。
Autocompleteに「」を付けます。
「b」と入力すると候補が表示されるようになります。
「Change View」を選択します。
画面の配置を変更できます。
画像を表示させる方法
「Assets」をクリックします。
「Assets」＞「Photos」を選択します。
検索窓（Search photos… ）から画像を検索します。
画像のURLを貼ります。
画像のURLを貼りました。
用意した画像を表示させる。【3つ方法を紹介】
- Googleドライブ
- Dropbox
- ワードプレスのメディアライブラリ
Googleドライブ
用意した画像をGoogleドライブにドラッグ＆ドロップします。
「画像を選択」＞「」＞「共有」を選択します。
リンクをコピーします。
- 手順①：一般的なアクセスの「制限付き」→「リンクを知っている全員」へと変更します。
- 手順②：「リンクをコピー」をクリックします。
コピーしたリンクを貼り付けました。が、画像が表示されません。
画像を表示させるためには、URLを変更する必要があります。
下記の【before】【after】を参考に文字列を変更することで画像が表示されます。
【before】 https://drive.google.com/file/d/画像ID/view?usp=drive_link 【after】 https://drive.google.com/uc?export=view&id=画像ID
Dropbox編
用意した画像をDropboxにドラッグ＆ドロップします。
「リンクをコピー」をクリックします。
コピーしたリンクを貼り付けます。
「ここに画像のリンクを貼る。」にコピーしたリンクを貼り、その後、下記の【before】【after】を参考に文字列を変更することで画像が表示されます。
【before】 https://www.dropbox.com/s/zdsbhwcg1ta3wsj/andrew-spencer-YUEcePrJsgg-unsplash.jpg?dl=0 【after】 https://dl.dropbox.com/s/zdsbhwcg1ta3wsj/andrew-spencer-YUEcePrJsgg-unsplash.jpg?dl=0
WordPressのメディアライブラリ
- 手順①：画像をメディアライブラリにアップロードします。
- 手順②：アップロードした画像を開きます。
- 手順③：「URLをクリップボードにコピー」をクリックします。
コピーしたURLを貼り付けます。
GoogleドライブやDropboxと違い下記画面の「ここに画像のリンクを貼る。」にコピーしたリンクを貼るだけで画像が表示されます。
「Pen」のタイトルを変更する。
「ペン」のマークをクリックします。
すると「タイトル」を変更できるようになります。
タイトルを変更しました。
埋め込み方法【2つ紹介】
- WordPressブログ
- Notion
WordPressブログ
「Embed」をクリックします。
表示させたいスタイルを決めます。
「Dafault Tabs」で選択しているタブが上のプレビュー画面に表示されます。
スタイルが決まったら「Copy Code」をクリックします。
「ブロック挿入ツールを切り替え」＞「カスタムHTML」を選択します。
「カスタムHTML」にコードを貼り付けました。
「プレビュー」でブログでの見え方を確認できます。
Notion
赤枠の部分に/Coと入力することで「CodePen」の埋め込みが表示されます。
「CodePen」をクリックします。
リンクを貼り付けます。
下記赤枠のURLを貼り付けます。
貼り付けた後「リンクを埋め込む」をクリックします。
Notionに「Pen」が表示されました。
※埋め込まれた「Pen」のサイズは赤枠で囲んでいる箇所で調整可能です。
調整後です。
コードをダウンロード
「Export」＞「Export.zip」を選択します。
zipファイル（media.zip）がダウンロードされました。
zipファイルを開いていきます。
zipファイルを開きました。
フォルダをテキストエディタで開きます。
テキストエディタで開きました。
「dist」から見ていきます。
「dist」>「index.html」を開いています。
「dist」>「style.css」を開いています。
ブラウザで表示させる。
「src」を見ていきます。
「src」＞「index.html」を開いています。
「src」＞「style.scss」を開いています。
ブラウザで表示させる。
SNSでシェア
※今回は、Twitterを例に紹介します。
「Share」＞「Share on Twitter」を選択します。
ツイートの入力画面が表示されます。
「ツイートする」をクリックします。
これでシェアされました。
Penの削除
「Delete」をクリックします。
「I understand, delete my Pen.」をクリックします。
「Your Pen was moved to Deleted Items.」と表示されます。
これでPen（media）が削除済みアイテムに移動されました。
Penの復元
「Your Work」＞「Deleted」＞「Restore」を選択します。
復元されました。
復元するとコードが崩れてしまっているのでMacであれば「⌘＋S」（Windowsは「Ctrl＋S」）でコードを整えます。
コードが整いました。
今回は以上です。