このページについて
このページではHTMLで使えるsrcの機能と使い方を掲載しています。
src属性
srcは外部リソースの場所(URL)を指定します。ここで言う外部リソースとは「他のファイルも使う」事を言います。
このsrcは外部リソースを使うタグであればほぼ使います。基本的には同じサーバー内にあるファイルを参照するために使う事が多いですが、用途によっては外部サーバーのファイルを読み込んだりもしたりします。
srcの書き方
srcは扱う事ができるタグと一緒に書きます。そして値の部分に各リソースの場所やURLを指定します。srcが扱えるタグはaudioタグ/iframeタグ/imgタグ/inputタグ/scriptタグ/sourceタグ/trackタグ/videoタグの8種類です。
<iframe src="/外部ファイル"</iframe>
<img src="画像ファイル">
<form>
<input type="button" src="画像ファイル" alt="代替えテキスト">
</form>
<script src="/スクリプト"></script>
<audio controls>
<source src="音楽ファイル" type="audio/ogg">
</audio>
<video controls>
<source src="動画ファイル" type="video/mp4">
</video>ざっと書くとこんな感じになります。それぞれのファイルの場所の指定方法に関しては次で解説します。
ファイルの場所やURLの指定方法
srcは外部リソースを扱う関係で必ずURLや場所を書く必要があります。これは少々複雑にはなりますが正しくファイルを読み込むために必要なのでしっかりと把握しておきましょう。
まず、呼び出す側のHTMLファイルと呼び出される側のファイルの位置関係によって書くべき内容が異なってきます。
1つ上のフォルダから呼び出す
呼び出す側のHTMLファイルより1つ上のフォルダにあるファイルを呼び出す場合。
この場合、呼び出し側のHTMLファイルはフォルダ2にあるんですが、呼び出したいファイルはフォルダ1にあります。その場合はこのように書きます。
同じフォルダ内のファイルを呼び出す
呼び出す側のHTMLファイルと呼び出される側のファイルが同じフォルダ内にある場合はかなり簡単に書く事ができます。そのファイル名を正確に書くだけとなります。
同じフォルダ内にある別のファイルを呼び出す場合はファイルの名前のみを書きます。
同じフォルダ内にある別のフォルダを参照
呼び出し元のHTMLフォルダと同じ場所にある別のフォルダの中にあるファイルを呼び出す場合はこのように書きます。以下の画像では呼び出し側HTMLもフォルダ1もフォルダAの中にありますが、呼び出したいファイル自体はフォルダ1の中にあります。
pictureやaudioなど、ファイルの種別ごとにフォルダを分けて保管している際に使える書き方になります。
サーバーのルート下にあるフォルダ
サーバーのルート下にあるフォルダの中にあるファイルを呼び出したい場合の書き方になります。
画像だけだと「1つ上のフォルダから呼び出す」のと一緒に見えると思いますが、このルート下というのは非常に重要になってきます。
サーバーでもSSDでもスマートフォンでも、データを保存する区画はシステムによって管理されています。その管理下であり一番最初にある階層の事をルートディレクトリと言います。これは画像で見ても文字で見ても理解しにくいワードなのですが、要するに「一番先頭にある場所」だと思ってもらって構いません。
1つ上のフォルダ内のファイルを呼び出す場合は../と書きましたが、ルート下にある場合は/だけです。1つ上は呼び出し側から見た扱いですが、ルート下はサーバーの中では1つしかありません。そのため固有の呼び出し方があるわけです。
絶対と相対
もう一つこれに関連して解説しておきます。ファイルのURLや場所を参照する際に使われる方法は2種類あります。それが絶対参照と相対参照です。
絶対参照は簡単に言えば「URLや場所のアドレスを全て書いたもの」になります。例えば外部サーバーにあるファイルを参照する場合などに使われます。
相対参照は「呼び出し側から見た、呼び出される側のファイルの位置を指定」する書き方になります。ここまでに書いてきた4種類の書き方は全て相対参照になります。
どちらを使うのが正解とかはありませんが、よく使われるのは相対参照です。これはサーバーのフォルダ構造を把握されないようにするとか、ドメインが変わっても問題ないとか色々とメリットがあります。
まとめ
srcは外部ファイルを呼び出す際の場所を指定する機能を持っています。その指定方法は大きく4つあり、それぞれ「呼び出す側」と「呼び出される側」の位置関係によって書き方が異なります。相対参照や絶対参照などの名前も一応覚えておきましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。