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 」をクリックします。
すると、link要素がすぐに現れましたので、これをコピーしちゃいましょう。
Font Awesomeを使いたいHTMLファイルを開いて、コピーしたlink要素をhead要素の中にペーストします。
これで使用準備が整いました。
試しにFont Awesomeを使ってみます。丸で囲んでいるとこをクリックするとコピーできます。
htmlファイルの好きなところにペーストするだけで使えます。body要素の中にペーストしました。
表示を確認してみます。ちっちゃいですが、無事にアップルマークが表示され、Font Awesomeが使えていることが確認できました。
以上が、CDNを使ってサービスを使用する大まかな方法となります。
どのサービスにも共通するので覚えておきたいポイントは、とにかくCDNのlink要素をHTMLファイルのhead要素内にコピペしておくということですね。
あとは細かな使い方はググったりサイトで直接確認しつつ、使うという感じで大丈夫です。
コメント