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

HTMLドキュメントにスタイルシートルールを組み込む方法を解説

HTMLドキュメントにスタイルシートのルールを適用するには、主に3つの方法があります。<style>要素を使う方法、style属性で直接指定する方法、そして<link>要素を使って外部スタイルシートを読み込む方法です。

本記事では、その中でも特に推奨される「外部スタイルシート」の読み込み方法について、詳しく解説します。

外部スタイルシートとは

外部スタイルシートとは、拡張子が.cssの独立したテキストファイルのことです。すべてのスタイルルールをこのファイル内に定義しておけば、<link>要素を使って、どのHTMLドキュメントからでもそのファイルを読み込めるようになります。

この方法には大きなメリットがあります。1つのCSSファイルを複数のページで共有できるため、サイト全体のデザインを一括で管理・変更でき、コードの保守性も大幅に向上します。

外部CSSファイルを読み込む基本構文

外部CSSファイルは、HTMLの<head>要素内に<link>要素を記述することで読み込みます。

<head>
    <link href = "..." media = "..." />
</head>

link要素の主な属性

<link>要素で使用する主な属性は以下のとおりです。

属性値説明
typetext/cssスタイルシート言語をコンテンツタイプ（MIMEタイプ）として指定します。必須の属性です。
hrefURLスタイルルールが記述されたスタイルシートファイルの場所を指定します。必須の属性です。
mediascreen
tty
tv
projection
handheld
print
braille
aural
all		ドキュメントを表示するデバイス（メディアタイプ）を指定します。デフォルト値はallで、省略可能な属性です。

具体例：new.cssファイルを作成して読み込む

まず、次のような内容のスタイルシートファイルnew.cssを作成します。

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

次に、このnew.cssファイルを任意のHTMLドキュメントに以下のように読み込みます。

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

これで、見出し

と

に対して定義したスタイルが、読み込んだすべてのHTMLページに自動的に適用されます。

まとめ

外部スタイルシートを活用すれば、デザインと構造を分離でき、サイト全体のスタイルを効率的に管理できます。HTMLドキュメントの<head>内に<link>要素を記述し、href属性でCSSファイルを指定するだけで、どのページにも同じスタイルを簡単に適用できるので、ぜひ活用してみてください。

  1. HTMLドキュメントで最も重要なタグとは？DOCTYPE・html・head・bodyの基本を解説

    HTMLには、コンテンツの書式設定、見出しの作成、レイアウトの調整、セクションの追加など、Webサイトを構築するためのさまざまなタグが用意されています。その中でも、HTMLドキュメントにとって特に重要なのが「DOCTYPE」「<html>」「<head>」「<body>」の4つです。本記事では、それぞれの役割と正しい記述方法をわかりやすく解説します。 1. DOCTYPE宣言（ドキュメントタイプ宣言） DOCTYPEは「ドキュメントタイプ宣言」と呼ばれるもので、そのドキュメントがどのバージョンのHTMLに準拠しているかをブラウザに伝えるために使われます。現

  2. HTMLドキュメントに不可欠な基本タグとは？必須タグの役割を解説

    HTMLドキュメントに不可欠な基本タグとは？ HTMLには、コンテンツの書式設定や見出しの作成、レイアウトの調整、セクションの追加など、ウェブページを構築するためのさまざまなタグが用意されています。その中でも、HTMLドキュメントを成立させるうえで欠かせないのが、DOCTYPE宣言、<html>、<head>、<title>、<body>の5つです。 1. DOCTYPE宣言 DOCTYPE宣言は、そのドキュメントがどのバージョンのHTMLに準拠しているかをブラウザに伝えるための宣言です。HTML5では、次のように一行で記述します。 <