ywork2020.com

Title

メディア要素の情報源を指定する

目次 (INDEX)

src とは

ここで説明する src とは次の語句からなる HTML 要素の属性です。
source
読み: ソース
意味: 源、資源、元

目次に戻る

src 属性の概要

この属性は、メディア要素のデータ元ファイルの URL を設定します。

ここで言っているメディアとは音源ファイル、画像ファイル、動画ファイル、プログラムコードのファイルなどのことです。

src 属性で設定する情報源のファイルは、結局のところ HTML ファイルとは別のファイルがあり、 それを参照して利用する為の属性ということになりますので、以下のような要素がこの属性を必要とすることになります。

目次に戻る

サンプルコードと実行結果

src 属性を使ったサンプルを幾つか紹介します。

サンプルコード: HTML 
<body>
	<img src="./sample.png" alt="ファイルアイコンの画像サンプル" width="50%">
	<video src="./sample.mp4" controls width="50%">
	<p id="idDateP"></p>
	<script src="./sample.js"></script>
</body>
サンプルコード: script ( sample.js ) 
<script>
	let objDate = new Date();
	let arrDayName = new Array('日','月','火','水','木','金','土');
	let varGreeting;
	if(objDate.getHours()>3 && objDate.getHours()<19){
		varGreeting = "こんにちは! 今日は ";
	}
	else{
		varGreeting = "こんばんは! 今日は ";
	}
	document.getElementById("idDateP").innerHTML = varGreeting + (objDate.toLocaleDateString() + " (" + arrDayName[objDate.getDay()] + ") です。");
</script>
実行結果:
ファイルアイコンの画像サンプル

目次に戻る

メモ

src 属性と使用の雰囲気が似ている要素と属性があります。
それは link 要素 と href 属性です。
参考になるかもしれませんのでリンクしておきました。 また、ソースファイルの URL 指定は自サイト内であれば相対参照を使うと思いますので、そちらも リンク しておきます。

目次に戻る