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

CSS入門：styleタグでHTMLドキュメントにCSSルールを追加する方法

HTMLドキュメントにCSSのスタイルを直接組み込みたい場合は、<style>要素を使用します。このタグは、通常<head>...</head>タグの中に配置します。ここで定義したCSSルールは、そのドキュメント内にあるすべての該当要素に自動的に適用されます。このようにHTMLファイル内に直接記述するスタイルシートは、「内部スタイルシート」と呼ばれます。

基本構文とサンプルコード

<style>タグの中には、外部CSSファイルと同じ形式でセレクタと宣言ブロックを記述します。以下は、ページ全体の背景色と見出し（h1）の文字色・左余白を設定する基本的な例です。

<!DOCTYPE html>
<html>
  <head>
    <style media = "all">
      body {
        background-color: linen;
      }
      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
  </body>
</html>

コードのポイント解説

  • media属性：「media = "all"」と指定すると、画面表示・印刷などすべての出力メディアに対してスタイルが適用されます。特定のデバイスだけに適用したい場合は、「screen」や「print」などの値を指定することも可能です。
  • bodyセレクタ：「background-color: linen;」により、ページ全体の背景色がリネン色（生成りに近い淡い色）に設定されます。
  • h1セレクタ：「color: maroon;」で見出しの文字色をマルーン（暗い赤褐色）にし、「margin-left: 40px;」で見出しの左側に40pxの余白を設けています。

ブラウザでの表示結果

このHTMLファイルをブラウザで開くと、背景がリネン色で塗られたページが表示され、見出しはマルーン色で少し右にずれた位置に描画されます。<style>タグで定義したルールは、ページ内のすべてのh1要素やbody要素に反映されるため、個別にclassやidを指定しなくても一括でスタイリングできるのが特徴です。

利用時の注意点

内部スタイルシートは手軽な一方、スタイル定義がHTMLファイルごとに分散してしまうため、複数ページで共通のデザインを使う場合は、外部CSSファイルを読み込む方法（<link rel="stylesheet" href="style.css">）のほうが保守性に優れています。単一ページやプロトタイプ、学習用途などでは、今回のような<style>要素による記述が非常に便利です。

  1. JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

    JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht

  2. HTMLドキュメントの作成方法とは？基本構造をサンプルコード付きで解説

    HTMLドキュメントは、Webページの構造を定義するものです。大きく分けて「head（ヘッド）」と「body（ボディ）」という2つの部分で構成されており、headにはドキュメントに関する情報（メタデータなど）が、bodyには実際にブラウザ上に表示されるコンテンツが含まれます。head部分は<head>…</head>タグの中に記述し、body部分は<body>…</body>タグの中に記述します。また、HTMLドキュメントは必ず<!DOCTYPE html>という宣言から始まります。これはDTD（Document Type Defin