CDNを使う方法【かなり簡単】

CDNを使う方法【覚えておくと便利】
HTML、CSSを勉強していていると、GoogleのFont AwesomeやGoogle Font、JavaScriptのフレームワークのjQuery、Twitter社の開発したCSSのフレームワークのBootstrapを使う機会が出てきたけど、どうやって使うんだろう。という疑問にサクッとお答えします。

HTML、CSSを勉強していていると、GoogleのFont AwesomeやGoogle Fonts、JavaScriptのフレームワークのjQuery、Twitter社の開発したCSSのフレームワークのBootstrapを使う機会が出てきたけど、どうやって使うんだろう。という疑問にサクッとお答えします。

ボクはプログラミング学習を2018年から始めて約1年。HTMLとCSSの勉強を進めていく過程で、Font Awesome、Bootstrapなど先に挙げたものを使う機会が増えてきました。

そんな中で、これらを使う上で全く共通している超基本的なことがあるので、それを覚えておくと、簡単に利用することができます。

それは、「CDN」です。

CDNとはコンテンツ・デリバリー・システムの略で、ネット経由でサービスを利用できる仕組みです。なので、重いデータやプログラムを自分のパソコンに入れなくてもサービスが使えるので、余計なプログラムやデータをパソコンに保存せずに済むので安心です。

最近はパソコンの保存容量が莫大に進化してきてはいるものの、いちいち重いデータを保存するのはなんかナンセンスな感じもするし抵抗ありますよね。

Font Awesome、Google Fonts、jQuery、Bootstrapに共通すること、それは、CDNを利用して使えることです。

CDNを利用することで、これらのサービスを使う準備ができます。あとは、各々のサイトを見て、細かい使い方を見ていけば、使うことができます。

それでは、CDNの基本的な使い方をみていきましょう。

CDNを使う方法

とても簡単です。

1.それぞれ使いたいサービスのページに移動

2.CDNのlink要素をコピー

3.コピーしたlink要素を、htmlファイルのhead要素の中にペーストして貼り付ける

以上で、Font Awesomeなり、Bootstrapなり、使いたいサービスが使える準備ができた状態になります。あとは、ページを見て細かな使い方を確認し、使うだけです。

具体的に、Font Awesomeを例にして使い方をみていきましょう。

1.Font Awesomeのページに移動

Font Awesomeに限らず、たいていは、CDNのlink要素の場所まで直観で行けるようにサイトがデザインされています。

なので、頻繁にページの見た目が変わったりしますが、直観でいけますので、心配しなくても大丈夫だと思います。

Font Awesomeのページを開いて、「 Start Using Free 」をクリックします。

Font Awesomeのページを開いて、「 Start Using Free 」をクリックします。

すると、link要素がすぐに現れましたので、これをコピーしちゃいましょう。

すると、link要素がすぐに現れました。これをコピーしちゃいましょう。

Font Awesomeを使いたいHTMLファイルを開いて、コピーしたlink要素をhead要素の中にペーストします。

Font Awesomeを使いたいHTMLファイルを開いて、コピーしたlink要素をhead要素の中にペーストします。

これで使用準備が整いました。

試しにFont Awesomeを使ってみます。丸で囲んでいるとこをクリックするとコピーできます。

試しにFont Awesomeを使ってみます。丸で囲んでいるとこをクリックするとコピーできます。

htmlファイルの好きなところにペーストするだけで使えます。body要素の中にペーストしました。

htmlファイルの好きなところにペーストするだけで使えます。body要素の中にペーストしました。

表示を確認してみます。ちっちゃいですが、無事にアップルマークが表示され、Font Awesomeが使えていることが確認できました。

表示を確認してみます。ちっちゃいですが、無事にアップルマークが表示され、Font Awesomeが使えていることが確認できました。

以上が、CDNを使ってサービスを使用する大まかな方法となります。

どのサービスにも共通するので覚えておきたいポイントは、とにかくCDNのlink要素をHTMLファイルのhead要素内にコピペしておくということですね。

あとは細かな使い方はググったりサイトで直接確認しつつ、使うという感じで大丈夫です。

コメント

タイトルとURLをコピーしました