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

HTMLのlink要素の使い方を徹底解説！外部CSSの読み込み方法と注意点

この記事では、HTMLの<link>要素の基本的な使い方についてわかりやすく解説します。

HTMLの<link>要素は、主にウェブサイトにスタイルを適用するための外部CSSファイルを読み込む際に使用される要素です。

<link>要素は<head>要素の中に記述し、いくつかの属性を指定できます。基本的な記述例は以下の通りです。

<!DOCTYPE html>
<html>
  <head>
    <title>Document title</title>
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

最もよく使われる属性は、上のコード例にもあるhrefとrelの2つです。

  • href:読み込むファイルの場所(パス)を指定します。この例ではmain.cssという名前のスタイルシートを指定しています。
  • rel:「relationship(関係性)」の略で、現在のドキュメントとリンク先のCSSファイルとの関係を示します。スタイルシートを読み込む場合はstylesheetを指定します。

ウェブサイトにスタイルを適用するもう一つの方法として、<style>要素があります。こちらはCSSをHTML文書内に直接埋め込む方式で、いわゆる「埋め込みスタイル」として知られています。

ただし、現代のウェブ開発における標準的な手法は、<link>要素を使ってスタイルを読み込むことです。読み込み元は、自プロジェクト内のyour-project/styles/main.cssのようなファイルでも、別ドメインの外部サービス(CDNなど)でも構いません。

知っておきたい注意点:スタイルの上書きトラブル

同じ文書内で<style>要素と<link>要素の両方を使ってスタイルを定義すると、意図しない形でスタイルが上書きされてしまうことがあります。

例えば、両方の手法を組み合わせた次のコードを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <!-- 埋め込み(内部)スタイル -->
    <style>
      h1 {
        color: red;
      }
      p {
        color: green;
      }
    </style>
    <!-- 外部スタイルシートの読み込み -->
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body>
    <h1>This is a red heading</h1>
    <p>This is a green paragraph</p>
  </body>
</html>

ここで、外部スタイルシート側でh1やpセレクターに対して色が指定されていた場合(例えばblueなど)、その値がredやgreenを上書きします。これは、上のコード例では<link>要素が<style>要素よりも後に記述されているためです。CSSでは、同じ詳細度のスタイルが競合した場合、後から読み込まれたものが優先されます。

このように両者を混在させると、スタイルの適用順序を誤認しやすく、思わぬ表示崩れの原因になります。そのため、スタイルの読み込みは基本的に<link>要素に統一し、<style>要素はどうしても必要な特殊なケースでのみ使うことをおすすめします。

  1. HTMLで画像をリンクとして使用する方法

    HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。基本的な書き方構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画

  2. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <