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

HTMLのlinkタグで外部リソースとの関係を定義する方法

linkタグとは？

HTMLの<link>タグは、外部リソースとの関係を定義するための要素です。最も一般的な用途は、外部スタイルシート（CSSファイル）の読み込みです。

<link>タグは<head>〜</head>タグの中に記述します。開始タグのみで構成される空要素のため、終了タグは必要ありません。

外部CSSファイルを読み込む仕組み

スタイルを別ファイルに分離することで、HTMLのコードがすっきりし、複数ページで同じデザインを再利用できるようになります。

  • CSSファイル側： すべてのCSSコードを記述します（拡張子は.css）
  • HTML側： <link>タグのhref属性でCSSファイルへのパスを指定します

<link>タグには、リソースの種類を示すrel属性（rel="stylesheet"）と、ファイルの場所を示すhref属性を指定します。

実装例：外部CSSをHTMLに読み込む

以下のコードでは、HTMLファイルから「mystyles.css」というCSSファイルをリンクしています。

HTMLファイル

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="mystyles.css">
   </head>
   <body>
      <h1>見出し</h1>
      <p>これはデモ用のコンテンツです。</p>
   </body>
</html>

CSSファイル（mystyles.css）

h1 {
  color: green;
}
p {
  font-size: 14px;
}

このコードを実行すると、<h1>要素が緑色で表示され、<p>要素の文字サイズが14pxに設定されます。このように、<link>タグを使えばHTMLとCSSを分離して管理でき、サイト全体のメンテナンス性が大きく向上します。

  1. HTMLのdatalistタグの使い方！入力候補リストを作成する方法

    datalistタグとは？HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。<datalist>タグを使用する際のポイントは以下の2点です。・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる・選択肢は<datalist>〜</datalist>の中

  2. Windows PCでResource Hackerを使う方法|EXEファイルの編集とアイコン変更ガイド

    Windowsの実行ファイル(.exe)を自分好みにカスタマイズしたいと思ったことはありませんか?あるいは、実行ファイルのアイコンを変更して、見た目をもっとおしゃれにしたいと考えたことはないでしょうか。 もしそうであれば、「Resource Hacker」という便利なユーティリティがおすすめです。このツールを使えば、実行ファイルやリソースファイルの中身を表示・名前変更・編集・追加・削除することができます。しかも、完全無料で利用できるのが嬉しいポイントです。 Resource Hackerの使い方 ※本チュートリアルは上級者向けの内容です。作業を始める前に、必ずシステムの復元ポイントを作成してお