ウェブ

Codepenの始め方と使い方-記事内にコード埋め込み【無料便利機能】

codepen使い方

「自分で書いたコードを共有したい」「記事内にコードを埋め込みたい」「コードのプレビューを表示したい」この悩みを解決してくれる便利な機能が揃ったサイトを紹介します。

無料会員で自由にコードが書ける「Codepen

ブラウザ上でHTMLCSSJSのコーディングがプレビュー付きで利用できるサービスで、プレビューがリアルタイムで反映されるのでコードの修正にも使用可能です。

WEB制作などでデザインやコンテンツが似ている場合は作業効率アップの為に、コードの使い回しや微修正などでコードを保存しておくことにも使えますね。

クラウドブラウザのため、PCを変えてもどこでもインターネットがあればいちでも利用可能なところもいい。

プル

コーディングの練習にもなるのでCodepenはかなりオススメ。

Codepenの使用例

コードとプレビューの表示

hoverリプレイ
hoverリプレイ

Codepenのユーザー登録

登録することでコードの保存が出来るようになるので、ユーザー登録をします。

Sign Up」をクリック。

Sign Up
Sign Up

「Twitter」「GitHub」「Fecebook」「メールアドレス」のどれか一つ選択

選択画像
選択画像

入力箇所を埋めて「Submit」をクリックすると登録が完了します。

Codepenでコードを書く

ユーザー登録が完了した後は、コードを自由に書くことが出来るようになります。
penをクリックすると、HTMLCSSJSのコーディング画面とプレビュー画面が表示されます。

penクリック
penクリック

上がコーディング画面で下がプレビュー画面です。右上のアイコンから3つ目の窓マークをクリックすることで、レイアウトを右か左にも変更可能。

コーディングとプレビュー
コーディングとプレビュー

CodepenではHTML宣言文は不要で、body内に記述する内容から入力することができます。

HTMLを入力すると自動でプレビュー画面に反映されます。

コード入力
コード入力

HTMLCSSを入力して左上のペンマークをクリックして名前を付けて、右上の「Save」をクリックすると保存が出来ます。

名前変更
名前変更
Save
Save

jQueryslickFont Awesomeなども読み込むことが出来ます。

Codepenのデフォルトは外部リンクは読み込まれていないので、読み込む設定が必要になります。外部リンク設定はCSSの歯車をクリック。

外部リンク
外部リンク

Add External Scripts/Pensの部分で検索するか、直接URLを入力してリンクさせます。

直接URLを入力

CSS

CSS外部リンク設定
CSS外部リンク設定

CSSリンクURL

<!-- slick-theme.css -->
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css

<!-- slick.css -->
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

<!-- fontawesome -->
https://use.fontawesome.com/releases/v5.15.1/css/all.css

JS

JS外部リンク
JS外部リンク

JSリンクURL

<!-- jquery.min.js -->
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

<!-- slick.min.js -->
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js

虫眼鏡の部分にリンクさせたい外部リンクを入力すると候補が出てくるので選択すると、自動でURLが入力されます。

検索URL
検索URL

Codepenで作成したコードを記事内に埋め込む

作成したコードを埋め込むためには右下にある「Embed」をクリック。

コードを埋め込む
コードを埋め込む

HTMLとResultが表示されています。記事内でResultだけを表示したい場合はHTMLをクリックするとResultが全画面で表示することが出来ます。

HTMLとResult
HTMLとResult

「Copy Code」をクリックすると下記コードをコピーすることが出来ます。

コードをコピー
コードをコピー

プレビューの高さの調整

記事内での表示する高さ指定も出来ます。カーソルをプレビューの下をクリックして上下に動かして高さ調整します。

高さ調整
高さ調整

Codeをコピーした後でも、heightの部分を変更すればいつでも変更可能。

高さ調整数値
高さ調整数値

WordPressのブロックエディタで貼り付け

wordpressの管理画面で「投稿」→「新規追加」→「+」→「カスタムHTML」をクリックして枠内に貼り付けをすると記事内にCodepenで作ったものが表示されます。

カスタムHTML
カスタムHTML

↓下記本は自身がこの1冊でWebすべての基本が身についたお勧めの本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

▪1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTMLとCSSとWebデザインを一気にまるごと学べる!1つのサイトを実際に作りながら学んでいくやさしい作りになっている本です。「これからWebサイトを作り始める初心者」「HTMLとCSSを基本から学びたい人」「美しいデザインのWebサイトを作りたい人」「Webの最新技術を学びたい人」この1冊で必要なことがすべて学べます。

book
created by Rinker
¥2,486 (2022/10/04 17:48:05時点 楽天市場調べ-詳細)

参考例

codepenイメージ画像
codepenイメージ

「Codepenをもっと便利に使うための設定について」の解説記事もあるので設定については下記の記事で確認下さい。

more-codepen
Codepenをもっと便利に使うための設定【無料機能】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです。ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説。...

↓さらに、一歩進んだWebサイト制作の知識を学びたい方はこちらもお勧めです。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

▪ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
Web界隈やデザイナーに大人気で、Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、Manaさんによる渾身のHTML&CSSとWebデザインの実践知識が一気に学べる本です。

book
created by Rinker
¥2,728 (2022/10/04 16:49:50時点 楽天市場調べ-詳細)

↓また、さらに初心者から抜け出すために必要な知識を学びたい方ようです。

▪プロの「引き出し」を増やす HTML+CSSコーディングの強化書
HTML・CSSの基本をマスターして初心者を脱して、コーダー/マークアップエンジニアとして制作現場でバリバリ活躍する力をつけたい。そんな方に向けた本です。

プロの「引き出し」を増やす HTML+CSSコーディングの強化書
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
book
created by Rinker
¥3,190 (2022/10/04 22:06:53時点 楽天市場調べ-詳細)
プル

無料でここまでの機能がついているので最大限活かしていきましょう。