CodePenとは? コードの埋め込み、コードの共有

CODE
スポンサーリンク
Toshi
Toshi

Webデザイン(プログラミング)を学習しよう!といった時、いろいろな準備がありますがこの「CodePen」を使ってしまえばHTML」「CSS」「JavaScriptWebブラウザ上で簡単に学習できてしまいます!この魅力的なツール「CodePen」につてお伝えしたいと思います!

今回解説していく内容は以下です!

 本記事の内容

・CodePenとは?
・CodePenの使用方法
・CodePenを埋め込む方法
・JavaScriptの拡張機能(jQuery)をCodePenで使おう!


スポンサーリンク

CodePenとは?

「CodePen」とはWebブラウザ上で「HTML」「CSS」「JavaScript」を書きながら実際にどんな感じでWeb上に反映されるのかデザインを確認しながらコーディングできます。一般的なWebのコーディング(プログラミング)の例をあげると

コーディング < Web上でのコード反映確認(デザインが適応された部分の確認) < 修正 という流れになります。

ですが「CodePen」を使うと

コーディング反映確認  < 修正

修正という感じで本来であれば、3つのSTEPを踏まなければいけませんがこの「CodePen」を使用することによって2つのSTEPだけでWebデザインを勉強するにはもってこいなツールです。

また、「CodePen」では他の人のコード(プログラム)を確認したり自分の作ったコードを共有することができます。「CodePen」の使用は誰でも「簡単」かつ「無料」で行うことができます。

CodePenに登録しよう!

早速ですが、CodePenを使うために登録を行ないましょう。

CodePen

まずは、「Sign Up」をクリックします!

すると、SNSと連携するか「Email」を登録することによりすぐに利用が可能となります!

CodePenの使用方法

登録できたら早速使用してみましょう!NewPenをクリックします。

すると、以下の画面が出てきます!タイトルは左上から決め、Saveでコードの保存ができます!HTML」「CSS」「JavaScriptを入力するところはわかれているので気をつけましょう。

ということで初めてのCodePenがこちら!

See the Pen
初めてのCodePen
by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

HTML」「CSSを試しにクリックしてみてください!コード(プログラム)が確認できるかと思います。

CodePenを埋め込む方法

CodePenでプログラムを書いたら誰かに見てもらいたくなるはず!積極的にシェアしていきましょう。やり方はとても簡単です!

WordPressの記事に埋め込む

WordPress等のサイトにHTML形式でコードを埋め込むには「Embed」よりHTMLをコピーします。

WordPressに埋め込む際は、「ビジュアル」ではなくHTML形式の「テキスト」にコピーしたコードをそのまま貼ってあげればOKです!

SNSにシェア

SNSにシェアしたいって方は、「Share」からの「Twitter」か「Facebook」を選択してあげましょう!

JavaScriptの拡張機能(jQuery)をCodePenで使おう!

JS」といってもいろんな拡張機能があるためその拡張機能が使いたいよ!って方はこの方法を知っておかなければ使用することができません。まずはJS」の横の歯車を押します。

すると以下のようなセッティング画面が現れるため、そこに使いたいJSの拡張機能(リンク)を貼り付ければ完了となります。

貼り付ければ完了、といいましたが実は調べていれることができます!

「Search CDNjs(jQuery,Lodash,Rect,Angular,Vue,js,Ember…)」

ありました!jQuery、最近ではRectやVue.jsが主流になってきているようですが私がはじめにJavaScriptを学んでいた時に使っていた拡張機能はjQueryでした。ということで検索バーで「jQuery」を調べるとちゃんとでてくることがわかりました!

ちなみにこの「jQuery」がちゃんと動作するのかも確認しました!

昔書いていた記事で「DEMO」をjQueryで作っていたのですが「WordPressのテーマ変更後より」うまく動作しなくなったためこの「CodePen」でコードを書き直し載せてみました!

See the Pen
KEYCODE一覧
by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

DEMOが動作しなくなった昔の記事は以下!

まとめ

Toshi
Toshi

いかがでしたか?「CodePen」の基本的な使い方はわかったと思います。プログラミング学習をやりやすく、また楽しくさせるのがこの「CodePen」。ぜひプログラミング学習を始めた方はとくにこの「CodePen」というツールをどんどん活用していきましょう!

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
CODE
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント