src
初級読み方：ソース｜英語：Src
img タグや script タグでファイルのパスを指定する属性だよ。Sourceの略。いつ使う？ 画像を表示するとき（<img src="photo.jpg">）やJavaScriptファイルを読み込むとき（<script src="app.js">）に使うよ。間違いやすいポイント: ファイル名のスペルミスや、ファイルの場所（パス）を間違えると画像が表示されない・スクリプトが動かないよ。大文字小文字も区別されるから注意しよう。
やさしい説明
src（ソース）属性とは、画像やスクリプトなど外部ファイルの場所を指定する属性です。「source（ソース＝元）」の略です。
「この画像ファイルを表示してね」「このJSファイルを読み込んでね」とブラウザに伝える役割です。
srcに書くのはファイルの「パス（住所）」です。同じフォルダ内のファイルなら名前だけ、別の場所ならフルパスやURLを書きます。
具体例・使い方
<!-- 画像を表示 -->
<img src="images/cat.jpg" alt="猫の写真">
<!-- JavaScriptファイルを読み込み -->
<script src="main.js"></script>
<!-- 外部サイトの画像 -->
<img src="https://example.com/logo.png" alt="ロゴ">いつ使う？
ページに画像を表示するとき、JavaScriptファイルを読み込むとき、動画を埋め込むときに使います。Webページに外部ファイルを取り込む場面で必ず登場します。
間違いやすいポイント
❌ パスの間違いで画像が表示されない
<!-- ❌ フォルダ名が間違っている -->
<img src="image/cat.jpg">
<!-- ✅ 正しいフォルダ名 -->
<img src="images/cat.jpg">画像が表示されないときは、まずパスのスペルを確認しましょう。大文字小文字も区別されます。
よくある疑問
Q: srcのパスが間違っているとどうなる？
A: 画像なら×マークが表示され、スクリプトなら404エラーがコンソールに出ます。開発者ツールのNetworkタブで確認できます。
Q: srcに外部URLを書いていい？
A: はい。<img src="https://example.com/photo.jpg">のように外部サイトの画像も表示できます。ただし相手サイトが画像を削除すると表示されなくなります。
Q: srcとhrefの違いは？
A: srcはリソースを「埋め込む」（画像やスクリプトをページに取り込む）、hrefはリソースに「リンクする」（クリックで移動する）という違いがあります。
関連用語
📖 関連レッスン
レッスンを見る →