HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Link relプロパティとは？使い方と設定可能な値を徹底解説

HTML DOMのLink relプロパティは、現在のドキュメントとリンク先のドキュメントとの関係性（relationship）を取得・設定するためのプロパティです。<link>要素で外部リソースを扱う際には、このrel属性による関係性の指定が必須となっています。

本記事では、relプロパティの基本構文から、指定できる値の一覧、実際のサンプルコードまで、初心者にもわかりやすく解説します。

基本構文

relプロパティの使い方は以下の2通りです。

rel属性値の取得

linkObject.rel

rel属性への値の設定

linkObject.rel = valueString

valueStringに指定できる値の一覧

valueStringには、以下のようなキーワードを指定できます。

値説明
alternate代替バージョンのドキュメント（別言語版や印刷用ページなど）へのリンクを提供します。
authorリンク先ドキュメントの作者（著者）へのリンクを提供します。
dnsprefetchターゲットリソースのオリジンに対し、ブラウザが事前にDNS解決を実行することを指定します。
helpヘルプドキュメントが存在する場合に、そのリンクを提供します。
iconドキュメントを表すアイコン（ファビコンなど）を読み込みます。
licenseリンク先ドキュメントの著作権（ライセンス）情報へのリンクを提供します。
next一連のドキュメント群における「次のドキュメント」へのリンクを提供します。
pingback現在のリンク先ドキュメントへのpingbackを処理するサーバーのアドレスを提供します。
preconnectターゲットリソースのオリジンに対し、ブラウザが事前に接続を行うことを指定します。
prefetch後続のナビゲーションに備えて、ブラウザがターゲットリソースを事前に取得・キャッシュすることを指定します。
preload「as」属性で指定された宛先とその優先度に従い、現在のナビゲーション向けにターゲットリソースを事前に取得・キャッシュすることを指定します。
prerender指定されたWebページをバックグラウンドで読み込むことを指定します。ユーザーがそのページへ移動した際に、表示速度が向上します。
prevドキュメントが一連のシリーズの一部であり、参照先がその前のドキュメントであることを示します。
search現在のドキュメントや関連ページを検索するために利用できるリソースへのリンクを提供します。
stylesheet現在のドキュメントに外部スタイルシートを読み込みます。

サンプルコード

ここでは、Link relプロパティを使った具体的な例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title>Link rel</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-rel</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var extStyle = document.getElementById("extStyle");
    if(extStyle.rel === 'stylesheet')
       divDisplay.textContent = 'The linked document is of type stylesheet';
    else
       divDisplay.textContent = 'The linked document is of type '+extStyle.rel;
</script>
</body>
</html>

上記の例で読み込んでいる「style.css」の内容は以下の通りです。

form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOM Link relプロパティとは？使い方と設定可能な値を徹底解説

この例では、idが「extStyle」のlink要素のrel属性値をJavaScriptで取得し、それが「stylesheet」であるかどうかを判定しています。条件に一致するため、「リンク先のドキュメントはスタイルシートタイプである」というメッセージが画面に表示されます。

  1. HTML DOMのdoctypeプロパティとは？構文と使い方をわかりやすく解説

    HTML DOMのdoctypeプロパティは、現在のHTML文書に関連付けられているDTD（Document Type Declaration：文書型宣言）を返します。このプロパティは読み取り専用であり、文書型の名前をDocumentTypeオブジェクトとして取得します。なお、対象の文書にDTDが指定されていない場合は、nullが返されます。 構文 doctypeプロパティの基本構文は以下のとおりです。 document.doctype サンプルコード それでは、doctypeプロパティを使用した具体例を見ていきましょう。 <!DOCTYPE html> <html>

  2. HTML DOM designModeプロパティの使い方を徹底解説

    HTML DOMのdesignModeプロパティを使用すると、ドキュメント全体が編集可能かどうかを指定できます。このプロパティを活用することで、HTMLドキュメントはWYSIWYG（What You See Is What You Get：見たままが得られる）エディターのように動作し、ブラウザ上で直接HTMLドキュメントを編集できるようになります。designModeプロパティのデフォルト値は「off」に設定されており、これを「on」に変更することで、ドキュメントの編集が可能になります。構文designModeプロパティを設定する際の構文は以下の通りです。document.designMode