I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > WEB関連 > jQueryなどサイト制作によく使うCDNまとめ

jQueryなどサイト制作によく使うCDNまとめ

jQueryなどサイト制作によく使うCDNまとめ

サイト制作時に、サイトの構成ファイルやサーバーへの負荷を軽くするためなど、CDN(Content Delivery Network)として既に公開されているスクリプトを直接リンクで借用することがあります。
他サイトでも利用されていればブラウザキャッシュに保管されていて読み込みが早いですし、自サイトにスクリプトを設置する必要がないため、スクリプトのダウンロード・設置の手間が掛からないというメリットがあります。
また、バージョンの指定が楽なので環境にあわせたスクリプトを最小限の労力で活用できます。

ここではよく使うCDNを紹介します。

jQuery

Google

3.0系

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2.0系

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

1.0系

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

ユーザーも多く動作も軽い。jQueryのCDNならこちらを使うのが安定でしょう。

https://developers.google.com/speed/libraries/#jquery

jQuery 公式

3.0系

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2.0系

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

1.0系

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

公式の展開しているものですが、動作が少々重いのとユーザーの量を考えるとGoogleのCDNを利用したほうがよいかもしれません。

https://code.jquery.com/

Bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

CSSフレームワークとして有名なBootstrapのCDNです。
リセットCSSとしてReboot.cssを併用することが多いのですが、Reboot.cssはCDN化されていません。

https://www.bootstrapcdn.com/

Font Awesome

Bootstrapでも採用されていた各種アイコンフォントを利用するためのサービスです。
現在ではCDNの利用にはメールアドレスが必要になっています。
一度メールアドレスを入力すれば、同じメールアドレスで複数のサイトでCDNを利用することが可能です。

https://fontawesome.com/start

Google Fonts

多種多様なWEBフォントを利用できます。
閲覧者側のデバイスに影響されずにサイトのフォントを指定できるので、便利に利用しているサイトも多く存在します。

https://fonts.google.com/

ajaxzip3

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

フォームに入力された郵便番号から住所を検索する時などに使用します。

https://github.com/ajaxzip3/ajaxzip3.github.io

この記事が気に入ったらシェアしてください。

関連記事

カラーミーでカテゴリー商品一覧画面・グループ商品一覧画面で表示を変える方法

カラーミーでカテゴリー商品一覧画面・グループ商品一覧画面で表示を変える方法

カラーミーで共通のパーツを複数の画面で呼び出す方法

カラーミーで共通のパーツを複数の画面で呼び出す方法

カラーミーのカテゴリー機能とグループ機能の違い

カラーミーのカテゴリー機能とグループ機能の違い

創作サイトの携帯電話・スマートフォンなどモバイル対応の必要性

レスポンシブデザインなサイトの作り方

創作サイトの携帯電話・スマートフォンなどのモバイル対応方法(中級者編)

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。