src属性(エスアールシーアツトリビュート)とは | 意味や読み方など丁寧でわかりやすい用語解説

src属性とは、HTML要素が外部に存在するリソースを読み込む際に、そのリソースの場所（URL）を指定するために用いられる属性である。Source（ソース、供給元）の略であり、Webページに画像、スクリプト、外部フレーム、動画、音声などのコンテンツを組み込む上で不可欠な役割を果たす。この属性がなければ、Webページは単なるテキストの羅列となり、現代の豊かなマルチメディアコンテンツやインタラクティブな機能を実現できない。例えば、Webページに画像を表示するには<img>要素を使用し、そのsrc属性に画像のファイルパスを指定する。同様に、JavaScriptファイルを実行するためには<script>要素のsrc属性にスクリプトファイルのパスを、外部のWebページを埋め込む際には<iframe>要素のsrc属性にそのページのURLを指定する。src属性は、Webブラウザがコンテンツを適切に探し出し、ページ上に表示したり実行したりするための「住所」の役割を担っている。

src属性で指定するパスには、主に絶対パスと相対パスの二種類がある。絶対パスは、リソースの正確な場所をインターネット上のどこからでも一意に特定できる完全なURLであり、「https://www.example.com/images/logo.png」のようにプロトコル、ドメイン名、パスのすべてを含む。これに対し、相対パスは、そのHTMLファイルが存在する場所を基準として、リソースへの相対的な位置を示す。例えば、HTMLファイルと同じディレクトリにある画像ファイルであれば「logo.png」と記述し、サブディレクトリ内であれば「images/logo.png」のように記述する。相対パスはWebサイトの構造変更時に管理しやすい利点がある一方で、HTMLファイルの移動によってパスが壊れる可能性も考慮する必要がある。絶対パスは外部サイトのリソース参照や、サイト内のリソースを常に特定の場所から参照させたい場合に有効である。

src属性は様々なHTML要素で利用されるが、その動作は要素の種類によって異なる。<img>要素では、指定された画像ファイルがブラウザによってダウンロードされ、ページの指定された位置に表示される。ブラウザはHTMLの解析中に画像ファイルのリクエストを開始し、ファイルの取得が完了次第、レンダリングを行う。<script>要素では、指定されたJavaScriptファイルがダウンロードされ、その内容が実行される。通常、スクリプトの実行はページのHTML解析を一時停止させるため、大規模なスクリプトを読み込むと表示が遅れる可能性がある。この問題に対処するため、defer属性やasync属性を付加することが一般的である。defer属性はHTML解析をブロックせず、ページの解析完了後にスクリプトを実行する。async属性もHTML解析をブロックしないが、スクリプトはダウンロード完了次第、非同期で実行されるため、実行順序が保証されない場合がある。<iframe>要素は、別のWebページや文書を現在のページ内に埋め込むために用いられる。src属性には埋め込みたいコンテンツのURLを指定し、ブラウザはその内容を現在のページ内で独立した閲覧コンテキストとして表示する。これはセキュリティ上の制約も伴い、埋め込まれたコンテンツは親ページのリソースに直接アクセスできないよう、サンドボックス化されることが一般的である。<video>や<audio>要素内で使用される<source>要素もsrc属性を持つ。これは、異なる形式の動画ファイルや音声ファイルを提供し、ブラウザが再生可能な形式を自動的に選択できるようにするために用いられる。

src属性を通じて読み込まれるリソースは、Webページのパフォーマンスに直接的な影響を与える。特に画像やスクリプトはファイルサイズが大きくなりがちであり、多数のリソースを一度に読み込むとページの表示速度が著しく低下する可能性がある。このため、Web開発においてはsrc属性を適切に管理し、最適化することが重要である。具体的な最適化手法としては、画像ファイルの圧縮、より軽量な画像形式（WebPなど）の利用、スクリプトのミニファイなどが挙げられる。また、すべてのリソースをページの初期表示時に読み込むのではなく、ユーザーがそのコンテンツに到達した時点で初めて読み込む「遅延読み込み（Lazy Loading）」の技術も有効である。これは、スクロールしないと見えない位置にある画像などに対して、初期段階ではsrc属性を設定せず、JavaScriptでユーザーの操作に応じて動的にsrc属性をセットすることで実現される。コンテンツデリバリーネットワーク（CDN）を利用してリソースを配信することも、世界各地のサーバーからユーザーに最も近いサーバーを通じてリソースを配信し、読み込み時間を短縮することに寄与する。

src属性の使用にはセキュリティ上の考慮も不可欠である。特に、外部のスクリプトやiframeを読み込む際には、そのソースが信頼できるものであることを確認する必要がある。悪意のあるスクリプトを読み込んでしまうと、Webサイトのデータが盗まれたり、ユーザーのブラウザ上で不正な操作が行われたりする可能性がある。クロスサイトスクリプティング（XSS）のような脆弱性は、ユーザーが入力したデータがサニタイズされずにそのままsrc属性の値として利用されることで発生することがあるため、入力値の厳格な検証とエスケープ処理が必須である。また、Content Security Policy (CSP) と呼ばれるセキュリティ機能を利用することで、読み込みを許可するリソースのドメインを制限し、不正なリソースの読み込みを未然に防ぐことができる。