HTMLで外部ファイルを読み込む時、CSSとJSファイルでは書き方が違うから「あれ？」って忘れがち。
そんな外部ファイル群の読み方まとめ。
外部ファイルには、画像やビデオなどの「コンテンツファイル」と処理が書かれた「プログラムファイル」が存在する。「コンテンツファイル」と「プログラムファイル」では読み込む場所が異なるのでその違いについても紹介していきます。
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>
iframeで別ページの要素を表示する
iframeタグを使い、別ページの情報を表示する方法。
以前iframeについて感動したことを書いた（参考：HTMLだけ（iframe）で別ページを表示させる方法）が、iframeでも外部ファイルを読み込める。
まとめ
外部ファイルの読み込みは、未だに分からなくなることがある。
特にCSSとjavascriptのファイルや、jQueryやVue.jsを使う時毎回調べる羽目になってしまうので、ここでまとめてすっきりしました☆
コメント