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

HTML link要素のhref属性の使い方を解説

HTMLの<link>要素におけるhref属性は、外部リソースのURLを指定するために使用します。スタイルシートなどの外部ファイルを読み込む際に、その場所をブラウザに伝える重要な役割を担います。

構文

href属性の基本的な構文は以下のとおりです。

<link href="url">

上記の「url」には、リンク先のドキュメントのURLを指定します。それでは、<link>要素のhref属性を使った具体的な例を見てみましょう。

使用例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="new.css">
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is demo text.</p>
</body>
</html>

上記の例では、外部ドキュメント「new.css」をhref属性を使って読み込んでいます。このドキュメントは、以下のようなCSSスタイルファイルです。

h1{
   color: blue;
}
p{
   background-color: red;
}

出力結果

このコードを実行すると、以下のような出力が得られます。「new.css」で定義したスタイルが見出しとテキストに適用されていることが確認できます。

HTML link要素のhref属性の使い方を解説

このように、href属性を活用することで、HTML文書から外部のCSSファイルを簡単に読み込み、ページ全体のデザインを一元管理できるようになります。

  1. HTMLのopen属性とは？details要素の使い方とサンプルコード解説

    HTMLのopen属性は、details要素の内容をHTMLドキュメント上で最初から表示状態（開いた状態）にするためのブール属性です。この属性を指定すると、ユーザーがsummary要素をクリックしなくても、ページ読み込み時にdetails要素内のコンテンツが展開された状態で表示されます。 構文 open属性の基本的な構文は以下のとおりです。 <details open></details> open属性はブール属性のため、値を指定せずに属性名だけで記述できます。属性を省略した場合、details要素は初期状態で閉じられ、ユーザーがsummary要素をクリックしたときに初

  2. HTMLのlow属性とは？meter要素での使い方とコード例をわかりやすく解説

    HTMLのlow属性は、ゲージ（計測バー）の値が「低い」とみなされる範囲の境界値を定義するための属性です。この属性を適用できるのは、<meter>要素のみであり、他のHTML要素では使用できません。low属性に指定した数値より小さい値がmeter要素に入力された場合、ブラウザはその状態を「低い値」として認識し、多くの場合ゲージの色が変化して視覚的に警告を表現します。low属性と対になるものとして、値が「高い」とみなされる範囲を定義するhigh属性も存在します。low属性の基本構文low属性の記述方法は以下のとおりです。<meter low=数値></meter&g