【HTML】外部ファイルの読み込み方法

HTMLで外部ファイルを読み込む時、CSSとJSファイルでは書き方が違うから「あれ？」って忘れがち。
そんな外部ファイル群の読み方まとめ。
外部ファイルには、画像やビデオなどの「コンテンツファイル」と処理が書かれた「プログラムファイル」が存在する。「コンテンツファイル」と「プログラムファイル」では読み込む場所が異なるのでその違いについても紹介していきます。

初めての目次

head内で読み込むファイル
Body内で読み込む要素
まとめ

head内で読み込むファイル

ファビコン（favicon）

<link rel="shortcut icon" href="favicon.ico">

CSSファイル

<link rel="stylesheet" type="text/css" href="style.css" />

javascriptファイル

<script src='common.js'></script>

jQuery(Google CDN)

jQueryのGoogle CDNからの読み込み。
読み込むバージョンはリンクから選んでください。
下の例は、2020年3月現在の最新版jQuery(3.4.1)になります。

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

Vue.js

Vue.jsはvue.orgからの読み込み。
読み込むバージョンはリンクから選んでください。
下の例は、2020年3月現在の最新版Vue.js(2.6.11)になります。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

Body内で読み込む要素

画像・イメージ

<img src="image.jpg" alt="画像" />

ビデオ・ムービー

// 自動再生
<video src="video.mp4" poster="thumb.jpg" autoplay muted></video>
// 再生ボタンや停止ボタン、ボリューム設定などできるコントローラー付きビデオ
<video src="video.mp4" poster="thumb.jpg" controls></video>
// ループ再生
<video src="video.mp4" poster="thumb.jpg" loop autoplay muted></video>
// インライン再生。スマホやタブレットで全画面再生を防ぐ
<video autoplay muted playsinline src="video.mp4"></video>
// 様々な動画形式を読み込む
<video controls>
　<source src="video.mp4"></source>
　<source src="video.webm"></source>
　<source src="video.ogg"></source>
　※現在の環境は動画再生に対応していません <!-- 動画が再生されない時のメッセージ -->
</video>