HTMLファイルなどに別のファイルを呼び込む際、link要素を用いているという方がほとんどのはず。しかし、link要素にはほかにもいろいろな役割を担うことができます。本記事では、HTML link要素の機能をメインにして、わかりやすく説明をしていきます。
HTMLのlink要素とは
まずは、HTMLにおけるlink要素に関して理解を深めていきましょう。よくURLに対して「リンク」という言葉を用いたり、掲載URLをクリックしてURL先のページにアクセスすることを「リンクを踏む」という言葉で表現したりしますね。一般的に「リンク」という言葉は、外部リソースにアクセスする際の手段のように捉えられています。
しかし、ここでさらに「リンク」という言葉を厳密に定義すると、現在のファイルと外部のリソースの関係性を指定するものという言い方ができます。たとえば、次のような階層のHTMLファイルとCSSファイルがあったとしましょう。
Potepan
┣ index.html
┗ styles.css
HTMLファイルとCSSファイルが上記のような関係性のとき、以下のようにHTMLファイルからCSSファイルを呼び出すことができます。
index.htmlからstyles.cssを呼び出すlink要素の一例
<link rel="stylesheet" type="text/css" href="styles.css">
現在はindex.htmlとstyles.cssが同じ階層なので書き方がシンプルです。しかし、index.htmlとstyles.cssに、以下のような階層の違いがあったらどのような書き方をすればいいのでしょうか。
Potepan
┣ index.html
┗ css
┗ styles.css
HTMLファイルとCSSファイルが上記のような関係性のときには、次のようにHTMLファイルからCSSファイルを呼び出すことができます。
index.htmlからstyles.cssを呼び出すlink要素の一例
<link rel="stylesheet" type="text/css" href="css/styles.css">
先ほどのlink要素との違いは「href=”css/styles.css」の部分にあります。styles.cssがcssという名前のフォルダ直下にあるため、index.html視点では「cssフォルダ → styles.css」という関係性になっているわけですね。
最初にも述べた通り、link要素とは「現在のファイルと外部のリソースの関係性を指定するもの」です。ここでいう現在のファイルとはindex.html、そして外部のリソースとはstyles.css。この2つのファイルの関係性は変わりうるので、常に呼び出す側のファイル視点で関係性をコードに書く必要があるというわけです。
link要素に使える属性まとめ
先ほどの例にも「rel」や「type」、「href」など、link要素に伴ういろいろな属性が登場しました。日常的にlink要素を使っている人はあまり意識しないとは思いますが、こちらでは改めてlink要素に使われる属性について、その役割を見ていくことにしましょう。
rel：外部リソースのタイプを明示
「rel」は、呼び出される外部リソースのタイプを明示するための属性です。このrelはそもそも「relation（関係）」という意味の英語から来ており、外部リソースと現在のファイルの関係性は何かを指定するためのものなのです。
link要素自体、stylesheetを呼び出すときにしか使用したことがない方は「rel=”stylesheet”」としか書いたことがないかもしれませんが、他にも呼び出すことができる外部リソースがあります。以下にrelで指定できる外部リソースタイプを一部、見てみましょう。
- stylesheet：CSSファイルの明示
- canonical：正規URLの明示
- start：1番初めの外部リソースの明示
- help：ヘルプとなる外部リソースの明示
他にもrelで指定できるさまざまな外部リソースタイプがあります。これらを指定しておくことでWebページのSEO対策にも効果があるため、必要な項目については実装しておくと良いでしょう。
type：外部リソースのMIMEタイプを指定
「type」は、外部リソースのMIMEタイプを指定するための属性です。ではMIMEタイプとはいったいなんでしょうか。簡単に言うと、ファイルのタイプを一定の形式で表すためのものです。以下にtypeで指定できる外部リソースタイプを見てみましょう。
- text/html／text/xml／text/css／text/plain：HTML・XML・CSS・TEXTファイルを指定
- image/png／image/jpeg／image/gif：PNG・JPEG・GIFファイルを指定
- audio/mpeg：MP3ファイルを指定
- video/mpeg／video/mp4：MPEG・MP4ファイルを指定
- application/pdf／application/x-shockwave-flash：
他にtypeで指定できるさまざまな外部リソースタイプがあります。外部リソースを指定する際は事前に調べてみましょう。
href：外部リソースのURLを指定
「href」は、外部リソースのURLを指定するための属性です。この属性はlink要素において必ず指定しなければならないものであり、ファイルを指定する際には現在のファイルと外部リソースとの階層の違いを意識するという注意点があります。
また、現在のファイルとの関係において変わるパスのことを相対パスといいます。一方で、外部リソースに至るまでの全てのファイルパスを記述することを絶対パスと言います。絶対パスの場合には、現在のファイル位置を考慮せずにhrefに指定することができます。しかし、記述が長くなってしまうという欠点があります。
importance：外部リソースの重要度を指定
「importance」は、外部リソースの重要度を指定するための属性です。この属性は、link要素に対して「rel=”preload” 」や「 rel=”prefetch”」が指定されているときにのみ有効となります。importanceはその属性名の通り、Webページコンテンツの優先順位をつけるために使用されます。
media：外部リソースのメディアを指定
「media」は、外部リソースのメディアを指定するための属性です。media属性で指定できるメディアタイプの一部を見てみましょう。
- all：すべてのメディアタイプを指定
- aural：オーディオデバイスを指定
- handheld：モバイルデバイスを指定
- screen：PC用スクリーンなどを指定
- tv；TVタイプのデバイスを指定
またメディアタイプのほかに、メディア特性を指定することもできます。こちらも一部を紹介します。
- width：メディア表示領域の横幅を指定
- height：メディア表示領域の縦幅を指定
- orientation：メディアが縦表示か横表示かを指定（指定には「portrait（縦表示）」か「landscape（横表示）」を明示する必要がある
外部リソースとしてメディアを指定する際には、media属性を使うようにしましょう。
まとめ
本記事では、HTML link要素の機能をメインにして、わかりやすく説明をしていきました。HTMLのlink要素には、これまで知らなかったような機能や属性がまだまだたくさん存在します。link要素を使う際には改めてオフィシャルドキュメントを見るなどして、どんな使い方ができるかどうか調べていきましょう！
【関連記事】
▶︎【HTML】align属性の使い方まとめ（center/right/left）
▶︎a（アンカー）タグのhref属性をマスター！htmlでリンク先を指定する方法を解説
