<link>

スタイルシートやJavaScriptなどの外部ファイルを読み込むことができる要素です。また、rel属性やrev属性で他のページとの関係(次のページ・前のページ等)を表すことができます。一部のブラウザではその関係に基づき、ブラウザ上部にリンクが生成される場合もあるようです。


ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N3 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

仕様

・構成
要素区分 エンドタグ ネストできる要素 備考
<head>要素の子要素 なし なし

・属性
属性名 必須 意味 値
href リンク先URL URL
charset リンク先の文字コード 例：Shift_Jis
hreflang リンク先の言語コード 例(日本語)：ja
type リンク先の文書タイプ 例：text/html
rel 現在のページとリンク先との関係
alternate
lang属性と併用で、その文書が翻訳されたページであることを示し、media属性と併用すると、別メディアのページであることを示す。
stylesheet
外部に作成されたスタイルシートであることを示す。alternateを併用すると、ユーザーごとのスタイルシートを設定することができる。
start
検索ロボットに対して、作者が最初に見てほしいと思う文書を示す。
next
次の文書であることを示す。
prev
前の文書であることを示す。
contents
目次であることを示す。
index
索引であることを示す。
glossary
その文書に関係する用語集であることを示す。
copyright
著作権表示であることを示す。
chapter
章を示す。
section
節を示す。
subsection
小節を示す。
appendix
附属した文書であることを示す。
help
詳細な説明が書かれた文書(他サイト含む)であることを示す。
bookmark
ブックマークであることを示す。ブックマークとは、長い文書の中のある重要な入り口に対して設定されたリンクである。
rev リンク先と現在のページとの関係 relと同様。
target 表示先名
_blank
新しいウィンドウで開く。
_self
ハイパーリンクを貼り付けたフレームで読み込む。
_parent
現在のフレームの上位フレームで読み込む。上位フレームが無い場合は_selfと同様。
_top
フレーム分割を解除し、ウィンドウ全体で読み込む。親フレームが無い場合は_selfと同様。
media 出力対象機器
screen
非ページ型のコンピュータースクリーン
tty
端末・携帯など
tv
テレビ
projection
プロジェクター
handheld
画面の小さい、モノクロ・ビットマップ画像・大域幅に制限のあるモバイル機器。
print
ページ型の不透明素材・印刷プレビューモードでのスクリーン出力
braille
点字出力機器
aural
音声合成装置
all
全ての機器
class class名 スタイルシートを設定したclass名
id id名 スタイルシートを設定したid名もしくは、任意のテキスト
title 説明文 任意のテキスト
style スタイル 任意のスタイル
lang 言語コード 例(日本語)：ja
dir 読む方向
rtl
右から左に読む
ltr
左から右に読む

・イベント
イベント 仕様
onclick クリック時に発生
ondblclick ダブルクリック時に発生
onmousedown 要素上でマウスボタンを押したときに発生
onmouseup 要素上でマウスボタンを離したときに発生
onmouseover ポインティングデバイスが要素上を通過したときに発生
onmousemove ポインティングデバイスが要素上で動くと発生
onmouseout 要素の領域から出るときに発生
onkeypress 要素上でキーが押されて、要素から離れたとき発生
onkeydown 要素上でキーが押されたとき発生
onkeyup 要素上で押されたキーを離したとき発生

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css">
  </head>
  <body>
    <table class="list"  width="40%">
    <caption>style.cssのlistクラスのスタイルです。</caption>
      <tr>
        <td class="head">見出し１</td>
        <td class="head">見出し２</td>
        <td class="head">見出し３</td>
      </tr>
      <tr>
        <td>内容１</td>
        <td>内容２</td>
        <td>内容３</td>
      </tr>
    </table>
  </body>
</html>

表示結果

style.cssのlistクラスのスタイルです。
見出し１ 見出し２ 見出し３
内容１ 内容２ 内容３

▲PageTop

関連項目

HTML

<head>

▲PageTop

▲