src属性値とは何ですか？
Webページを作成する上で、画像や動画、外部ファイルを読み込むことは非常に多くあります。これらのリソースを読み込むために、HTMLでは様々なタグと属性を使用します。その中でも、"src"属性は特に重要な役割を担っています。
src属性の役割
src属性は "source" の略であり、HTML要素が参照するリソースの場所を指定するために使用されます。具体的には、画像を表示する<img>タグ、動画を埋め込む<video>タグ、外部スクリプトを読み込む<script>タグなど、様々な要素で使用されます。
src属性値には、読み込むリソースのURLを指定します。URLは、ローカルファイルパスまたはウェブ上のリソースを指し示すことができます。例えば、
<img src="images/sample.jpg" alt="サンプル画像">上記のようなコードの場合、"images"フォルダ内の"sample.jpg"という画像ファイルを読み込んで表示します。
src属性を使用する主なHTML要素
src属性は、様々なHTML要素で使用されます。以下に、代表的なものをまとめます。
| 要素 | 説明 | 例 |
|---|---|---|
<img> |
画像を表示する | <img src="images/sample.jpg" alt="サンプル画像"> |
<audio> |
音声ファイルを再生する | <audio src="audio/sample.mp3" controls></audio> |
<video> |
動画ファイルを再生する | <video src="video/sample.mp4" controls></video> |
<script> |
外部スクリプトを読み込む | <script src="js/script.js"></script> |
<iframe> |
別のHTML文書を埋め込む | <iframe src="https://www.example.com" width="500" height="300"></iframe> |
src属性値の注意点
- src属性値は、相対パスまたは絶対パスで指定することができます。
- 指定したパスにファイルが存在しない場合、画像は表示されません。
- 外部サイトからリソースを読み込む場合は、セキュリティに注意する必要があります。
参考文献
関連QA
Q1: src属性値に外部サイトの画像URLを指定できますか？
A1: はい、指定できます。ただし、著作権には十分注意してください。
Q2: src属性値に指定したファイルが見つからない場合はどうなりますか？
A2: 画像が表示されず、ブラウザによってはエラーメッセージが表示される場合があります。
Q3: src属性値をJavaScriptで動的に変更できますか？
A3: はい、変更できます。JavaScriptを使用することで、ユーザーの操作などに合わせて表示する画像を動的に変更することができます。
その他の参考記事:jquery img src 変更