ywork2020.com

Title

HTML文書を外部リソースと関連付ける

目次 (INDEX)

linkとは

ここで説明する link とは次の語句からなるHTMLの要素です。
link
読み: リンク
意味: 物と物とのつなぎ、連結、関連

目次に戻る

link要素の概要

この要素は、HTML 文書を CSS ファイルなどの外部リソースと関連付けることができます。

単純な例を挙げると、link 要素を使用することで現在の文書に関連するページや、外部のスタイルシートを読み込むことができるようになります。

通常、この要素は <head> ~ <head> の要素内で使用します。

この要素は、開始タグのみで機能します。終了タグを使ってはいけません。
<link href="URL" />

目次に戻る

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

ここでは、このドキュメントとは別の css ファイルを読み込んで、 div 要素のスタイル付けを行っています。

サンプルコード: sample.css (このドキュメントとは別のファイル)
#idShadow{
	font-family: Impact;
	font-size: 60px;
	text-shadow: 20px 10px ##darkgray;
}
  • 02: font-family (文字の書体を設定しています。)
  • 03: font-size (文字の大きさを設定しています。)
  • 04: text-shadow (文字の影を設定しています。)
サンプルコード: HTML
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title> タイトル </title>
		<link rel="stylesheet" type="text/css" href="sample.css" />
	</head>
	<body>
		<div id="idShadow"> div Element </div>
	</body>	
</html>
  • 06: link href="sample.css" (link 要素です。href 属性は インポートするファイルのURLとファイル名を指定します。)
  • 09: div id="idShadow" (div 要素です。この要素が インポートした CSS ファイルで スタイル付けされます。)
実行結果:
div Element

目次に戻る

使用できる属性

目次に戻る