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

HTML文書に外部スタイルシートファイルを組み込む方法

HTML文書に外部スタイルシートファイルを組み込みたい場合は、<link>要素を使用します。

外部スタイルシートとは、拡張子が「.css」である独立したテキストファイルのことです。このファイル内にすべてのスタイルルールを定義しておけば、<link>要素を使って、任意のHTML文書からそのファイルを読み込むことができます。

外部スタイルシートのメリット

外部スタイルシートを利用すると、複数のページで共通のデザインを一つのファイルで管理できます。デザインを変更する際も、CSSファイルを編集するだけで全ページに反映されるため、サイト全体のメンテナンス性が大幅に向上します。

スタイルシートファイルの作成例

ここでは、次のようなルールが記述された「new.css」という名前の簡単なスタイルシートファイルを例に考えてみましょう。

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

この例では、見出し要素（h1〜h3）に対して文字色や字間（レタースペーシング）、余白などのスタイルを一括して指定しています。

HTML文書への読み込み方法

作成したnew.cssは、以下のように<head>要素内に<link>要素を記述することで、任意のHTML文書に読み込めます。

<head>
   <link type = "text/css" href = "new.css" media = "all" />
</head>

各属性の意味

  • type属性： リンク先のファイルがCSSであることを示します（値は「text/css」）。
  • href属性： 読み込むCSSファイルの場所（パスまたはURL）を指定します。
  • media属性： スタイルを適用する対象デバイスを指定します。「all」を指定するとすべてのデバイスに適用されます。

  1. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ

  2. HTMLリンク（ハイパーリンク）の基本！aタグの構文とtarget属性の使い方を解説

    HTMLのリンク（ハイパーリンク）とは、クリックすると別のドキュメントへジャンプできる要素のことです。Webページ同士をつなぐ役割を担っており、HTMLにおいて最も重要な機能の一つといえます。基本構文HTMLリンクは、<a>タグを使って以下のように記述します。<a href=URL target=値>リンクテキスト</a>href属性には、リンク先のアドレス（URL）を指定します。ローカルファイルへのパスでも、外部サイトのURLでも指定可能です。また、target属性は、リンク先のドキュメントをどこに開くかを指定する属性で、以下の4つの値を設定できます。値説