サービス

CodePenでjQueryやreact、外部CSSを読み込んで利用する方法!

ポイント

CodePen上で、jQueryやreact.js・vue.jsなどのライブラリや、外部CSSの読み込みが可能です!

プログラマーやWebデザイナーの方がコードに関する情報を発信する際に重宝されているのCodePenですが、ライブラリや外部CSSを利用したコードを紹介したい場合にどうすればよいかお悩みではありませんか?

CodePenでは、簡単にこれらファイルを読み込んで利用可能です!

設定手順をご紹介します!

ライブラリ、外部ファイルの読み込み手順

ライブラリ、外部ファイルの読み込み手順

まずは設定画面を開く

CodePenのコード入力画面を開いたら、まずは右上にある「Settings」を開きましょう。

設定画面

設定画面を開くと、以下の画面が開きます。

外部CSS、JSライブラリのそれぞれの読み込み方法について説明します。

外部CSSを読み込む場合

設定画面左側のタブから「CSS」を選択して、画面右側を少し下にスクロールします。

すると、Add External Stylesheets/Pens という項目が現れ、画像赤枠のようなURL入力欄が表示されます。

このURL入力欄に、読み込ませたいCSSファイルのURLを入力しましょう。

URL入力後、外部CSSの読み込みは完了です。

読み込ませたいファイルが3つ以上ある場合は、「+ add another resource」をクリックすれば枠を追加できます。

すべての読み込みが完了したら、「Save & Close」ボタンを押してウィンドウを閉じましょう。これで完了です。

また、上部虫眼鏡マークのテキストボックスにてファイル名を入力すると、一部cssファイルは自動的にURLを検索してくれますが、そこまで有名どころが揃っているわけでもないため、自身で参照先のURLを探してきてペーストするのがよいでしょう。

JSライブラリを読み込む場合

設定画面左側のタブから「JS」を選択すると、「Add External Scripts/Pens」 という項目が現れ、画像赤枠のようなURL入力欄が表示されます。

このURL入力欄に、CSS同様読み込ませたいJSライブラリのURLを入力しましょう。

参考までに2022年6月現在、最新のjQueryとreact.js、vue.jsのCDNはこちらになります。

代表的JSライブラリのCDN

jQuery 

https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js

react.js 

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

vue.js 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

読み込ませたいファイルが3つ以上ある場合は、「+ add another resource」をクリックすれば枠を追加できます。

すべての読み込みが完了したら、「Save & Close」ボタンを押してウィンドウを閉じましょう。これで完了です。

まとめ

ということで、あっという間にできました。

CodePenでも実際のコーディングでもそうですが、CDN版は参照先URLを指定するだけで済むんで簡単ですね。

実際のシステムやサイトではローカルにダウンロードして利用する方がよいとも言われていたりしますが、状況に応じて使い分けるとよいでしょう!

CodePen上ではこんな感じであっという間に設定出来るので、是非お試しください!

-サービス

© 2022 アプリめし