CDNを読み込む方法【使い方解説】
今回はCDNを読み込む方法を紹介します。 CDNについて詳しくは下の記事で紹介しているので良かったら見てください。
CDNを読み込む方法
jQueryやFont Awesomeなど多くの有名なサービスではCDN用のURLが公開されています。そのURLを、HTMLファイルの<head>内からscriptタグで読み込むだけで設定は完了です。
注意点としては読み込みにURLを使っているため、サービスのバージョンが変わっても自動的にアップデートされるわけではありません。そのため、自分でURLを書き直す必要があります。
最新版を確認したい方は下のURLからどうぞ。
- jQuery CDN: https://code.jquery.com/
- Font Awesome: https://fontawesome.com/start
例１ jQueryの場合
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>例２ Font Awesomeの場合
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">CDNで使えるツール例
Google-code-prettify
Googleが提供しているコード表示をキレイに色分け（シンタックスハイライト）するためのツールです。GitHubで公開されているコードをhead内に読み込まえることでコードのシンタックスハイライトが可能になります。読み込み方など詳しくは下の記事をどうぞ。
なお、コードを書く際は普通の文字では「＜」と「＞」が表示されません。表示させるにはエスケープ文字（エスケープシーケンス）を使用する必要があります。エスケープ文字の書き方については下の記事で紹介しているのでぜひ参考にしてみてください。
Font Awesome
上でも挙げたとおり、Font AwesomeもCDNで使えます。詳しい使い方は下の記事を参考にしてみてください。
はてなブログで使う場合は、反映されない場合があり、ひと手間掛ける必要があります。はてなブログで上手く反映されない場合は、下の記事を参考にしてみてください。
