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

HTMLで外部ファイルの読み込み方法 HTML
この記事は約3分で読めます。
スポンサーリンク

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を使う時毎回調べる羽目になってしまうので、ここでまとめてすっきりしました☆

SNSフォローボタン
エンデ・バタローをフォローする
HTMLサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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