こんにちは、ハルキです。
HTMLでは、CSSやメディアなどの様々な外部ファイルを読み込むことができます。
しかし、外部ファイルの読み込み方が分からず、困っている方も少なくないのでは、、、。と思い、今回はHTMLで外部ファイルを読み込む方法について分かりやすく説明していきます。
最近エディタを使い始めた方や、コードをド忘れしてしまった方は、ぜひ読んでみてください。
目次
headタグ内で読み込む外部ファイル
headタグ内で読み込む外部ファイル
- CSSファイル
- JavaScriptファイル
- ファビコン
この３つを紹介していきます。
CSSファイル
|
1 |
<link rel="stylesheet" type="text/css" href="sample.css"> |
CSSを外部ファイルとして読み込みたい場合は、上のコードを使用します。
・rel=”stylesheet”とすることで、ブラウザがHTMLを読み取った時に、「これはCSSが書かれた外部ファイルなんだな。」と、教えることができます。
・type=”text/css”で、MIMEタイプを指定することができます。
HTML5以降は、自動的にtext/cssが指定されるので、この部分は消して使用しても良いです。
・href=””では、開きたい外部ファイルの名前を指定します。(今回はsample.cssとしています。)
JavaScriptファイル
|
1 |
<script type="text/javascript" src="sample.js"></script> |
JavaScriptを外部ファイルとして読み込みたい場合は、上のコードを使用します。
・type=”text/javascript”で、MIMEタイプを指定することができます。
HTML5以降は、自動的にtext/javascriptが指定されるので、この部分は消して使用しても良いです。
・src=””では、開きたい外部ファイルの名前を指定します。(今回はsample.jsとしています。)
ファビコン
|
1 |
<link rel="icon" type="image/x-icon" href="sample.png"> |
ファビコンとは、Webブラウザを開いた際、タブ部分に表示されるアイコンのことです。
また、ブックマークアイコンとしても使用されます。
・rel=”icon”とすることで、ブラウザがHTMLを読み取った時に、「これはファビコンなんだな。」と、教えることができます。
・type=”image/x-icon”で、MIMEタイプを指定することができます。
HTML5でも、ファビコンのtype属性は記載が必要なので、注意しましょう。
・href=””では、開きたい外部ファイルの名前を指定します。
(今回はsample.pngとしています。)
bodyタグ内で読み込む外部ファイル
bodyタグ内で読み込む外部ファイル
- 画像ファイル
- 動画ファイル
画像ファイル
|
1 |
<img src="sample.png" alt="サンプル"> |
・src=””で画像のソースを指定します。
デバイスにある画像を指定したい場合は「相対パス」、画像URLから指定したい場合は「絶対パス」を使用しましょう。
参考
【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！Webliker
・alt=””では、画像の説明を記載します。
記載は任意ですが、SEO対策になるので、書いておくことをおすすめします。
(今回はサンプルとしています。)
動画ファイル
|
1 |
<video src="sample.mp4"></video> |
・こちらも同じく、srcで動画のソースを相対パスまたは絶対パスを使って指定します。
よく使うCDN一覧
よく使うCDN
- jQuery
- Vue.js
- Font-Awesome
- Bootstrap
この４つのCDNを紹介します。
CDNは、いづれもheadタグ内で読み込むことができます。
jQuery
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
jQueryは、最も有名なJavaScriptのフレームワークです。
ここでは、Googleが配信しているCDNを記載しています。
(2020年12月時点での最新バージョン(3.5.1)を記載しています。)
Vue.js
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> |
Vue.jsは、導入・開発がしやすいJavaScriptのフレームワークです。
最新バージョンはVue.js公式サイトから入手することができます。
(2020年12月時点での最新バージョン(2.6.12)を記載しています。)
Font Awesome
|
1 |
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> |
Font Awesomeを使うことで、さまざまなアイコンを表示することができます。
ここでは、バージョン5のCDNを記載しています。
Bootstrap
|
1 2 |
<!-- CSSのみ --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> |
|
1 2 3 4 |
<!-- JavaScript --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> |
Bootstrapを使用することで、難しいコードを書かずに、レスポンシブサイトを制作することができます。
最新バージョンはBootstrap公式サイトから入手することができます。
(2020年12月時点での最新バージョン(4.5)を記載しています。)
まとめ
いかがでしたか？
今回は外部ファイルの開き方から、よく使うCDNまでを説明しました。
これで、本格的にHTMLを書き始める準備が整いましたね！
この記事がお役に立てれば幸いです。
