ywork2020.com

Title

リンクの参照先を設定する

目次 (INDEX)

href とは

ここで説明する href とは次の語句からなる HTML 要素の属性です。
hypertext
読み: ハイパーテキスト
意味: コンピューターを使用し、文書の一部から関連する他の文書を検索したりその文書へ移動したりできる仕組み。
reference
読み: リファレンス
意味: 参照

目次に戻る

href 属性の概要

この属性は、ハイパーリンクの参照先を設定します。

ハイパーリンクとはリンク先のページファイルの読込みや、ソースファイルの読込みをする役割をもっています。

href 属性が使われる要素は以下のようなものです。

目次に戻る

サンプルコードと実行結果

ここでは a 要素と link 要素の href 属性をサンプルの題材にしました。

a 要素の href 属性はリンク先のページの URL を設定します。 また、link 要素の href 属性は このページに読み込む必要がある ソースファイルの URL を設定します。

サンプルコード: CSS ( sample.css )
#idSample{
	background-color: ##cornflowerblue;
	border: thin solid ##gray;
	color: ##white;
	padding: 0.2em 0.5em;
}
サンプルコード: HTML
<head>
	<meta charset="utf-8">
	<title> href (エイチレフ) </title>
	<link href="./sample.css" rel="stylesheet" type="text/css">
</head>
<body>
	<a href="./index.html" id="idSample" target="_blank"> 独学 Webプログラミング! - YWORK </a>
</body>
  • 04: link href="./sample.css" (link 要素の href 属性に sample.css という名前のファイルの URL を設定しています。)
  • 07: a href="./index.html" (a 要素 の href 属性に このサイトのトップページ URL を設定しています。)
実行結果:

目次に戻る

メモ

href 属性と仕様が似ている属性として src 属性 が挙げられます。
また、href 属性の URL 設定は自サイト内であれば相対参照を使うと思いますので、 そちらも リンク しておきます。

目次に戻る