CSS/記述

HTMLに直接CSSを書き込む方法とその利用例

style属性

HTMLに直接CSSを書き込む場合、style属性を使用して要素ごとにスタイルを指定することができます。以下は、例としてh1要素に赤い文字色と太字を指定する場合のコードです。

<h1 style="color: red; font-weight: bold;">Hello World!</h1>

このように、要素の開始タグにstyle属性を追加し、値としてスタイルを指定します。複数のスタイルを指定する場合は、セミコロン（;）で区切って指定します。

style要素

複数の要素に同じスタイルを適用する場合は、style要素を使用してCSSを記述することもできます。以下は、全てのh1要素に赤い文字色と太字を指定する場合のコードです。

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <style>
      h1 {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <h1>Welcome to my website</h1>
  </body>
</html>

このように、head要素内にstyle要素を記述し、その中にセレクタとスタイルを記述します。この例では、h1セレクタに対してcolorプロパティとfont-weightプロパティを指定しています。このCSSは、全てのh1要素に適用されます。

外部スタイルシート

外部スタイルシートを使う場合は、HTMLファイルとは別にCSSファイルを作成し、それをHTMLファイルから呼び出します。これにより、同じCSSスタイルを複数のHTMLファイルで使い回すことができるため、メンテナンス性やスタイルの統一性が向上します。

まず、CSSファイルを作成します。拡張子は.cssです。以下の例では、style.cssという名前で保存しています。

style.css

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

次に、HTMLファイルからCSSファイルを呼び出します。以下の例では、index.htmlという名前で保存しています。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>外部スタイルシートを使う例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>見出し</h1>
    <p>本文のテキストです。</p>
  </body>
</html>

link要素にrel="stylesheet"とtype="text/css"を指定し、href属性にCSSファイルのパスを指定します。上記の例では、CSSファイルのパスが同じディレクトリ内にあるので、style.cssというファイル名のみを指定しています。もしCSSファイルが別のディレクトリにある場合は、そのパスを正確に指定する必要があります。

このように外部スタイルシートを使うことで、HTMLファイルとCSSファイルを分離することができ、メンテナンス性やスタイルの統一性が向上するとともに、HTMLファイルの読み込み速度も向上します。

セレクター

CSSでは、どの要素にスタイルを適用するかを指定するために、セレクターと呼ばれるものを使用します。セレクターは、HTML要素の要素名、クラス、ID、属性などを指定して、スタイルを適用する要素を指定します。以下に、セレクターについての詳細を説明します。

要素名セレクター

要素名セレクターは、HTML要素の要素名を指定してスタイルを適用するものです。例えば、以下のようにP要素にスタイルを適用する場合、pを要素名セレクターとして指定します。

p {
  color: blue;
}

<p>This text will be blue.</p>

クラスセレクター

クラスセレクターは、CSSでクラスを定義し、HTML要素にクラス属性を設定して、スタイルを適用するものです。クラスセレクターは、.で始まるクラス名を指定します。例えば、以下のように.red-textクラスを定義して、P要素にスタイルを適用する場合、.red-textをクラスセレクターとして指定します。

.red-text {
  color: red;
}

<p class="red-text">This text will be red.</p>

IDセレクター

IDセレクターは、HTML要素にID属性を設定して、スタイルを適用するものです。IDセレクターは、#で始まるID名を指定します。例えば、以下のように#header IDを指定して、H1要素にスタイルを適用する場合、#headerをIDセレクターとして指定します。

#header {
  background-color: blue;
}

<h1 id="header">This is a header.</h1>

子孫セレクター

子孫セレクターは、セレクターを階層的に指定して、スタイルを適用するものです。例えば、以下のようにdiv要素の中のp要素にスタイルを適用する場合、div pを子孫セレクターとして指定します。

div p {
  color: green;
}

<div>
  <p>This text will be green.</p>
</div>

直接子セレクター

直接子セレクターは、「>」を用いて親要素と直接的に子要素を指定する方法です。このセレクターは、指定した親要素の直下にある子要素のみを選択します。

例えば、以下のようにHTMLがあったとします。

<div class="parent">
  <h2>タイトル</h2>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
  </ul>
</div>

この場合、直接子セレクターを使用して、DIV要素の直下にあるH2要素を選択する場合は、以下のように記述します。

.parent > h2 {
  color: red;
}

相対セレクター

相対セレクターは、他の要素を基準にして指定する方法です。一つの要素が別の要素に関連している場合に有効なセレクターです。

例えば、以下のようにHTMLがあったとします。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li class="active">項目4</li>
  <li>項目5</li>
</ul>

この場合、相対セレクターを使用して、LI要素の4つ目の要素を選択し、背景色を変える場合は、以下のように記述します。

.active ~ li {
  background-color: gray;
}

擬似クラス

擬似クラスは、要素の状態を指定するためのセレクターです。例えば、リンクが訪問済みかどうか、マウスが要素の上にあるかどうかなどの状態を指定することができます。

例えば、以下のようにHTMLがあったとします。

<a href="#">リンク</a>

この場合、リンクを訪問済みの状態で表示する場合は、以下のように記述します。

a:visited {
  color: gray;
}

CSSのセレクターの一覧表

以下は、CSSのセレクターの種類を名前、書式、説明に分けてまとめた表です。

CSSのセレクターの一覧
名前	書式	説明
要素セレクター	`要素名`	指定した要素名に一致する要素を選択する。
IDセレクター	`#id名`	指定したid属性値に一致する要素を選択する。
クラスセレクター	`.クラス名`	指定したclass属性値に一致する要素を選択する。
属性セレクター	`[属性名=属性値]`	指定した属性名と属性値に一致する要素を選択する。
複合セレクター	`要素名.クラス名` `要素名#id名`	要素名、クラス名、id属性値を組み合わせて要素を選択する。
子孫セレクター	`祖先要素子要素`	指定した祖先要素内にある子孫要素を選択する。
直接子セレクター	`親要素 > 子要素`	指定した親要素の直接子となる子要素を選択する。
隣接兄弟セレクター	`要素1 + 要素2`	指定した要素1の直後にある要素2を選択する。
汎兄弟セレクター	`要素1 ~ 要素2`	指定した要素1の後にある要素2をすべて選択する。
疑似クラス	`:クラス名`	要素が特定の状態にある場合にスタイルを適用する。

注意：上記表には、全てのセレクター種類が含まれているわけではありません。また、複数のセレクターを組み合わせることで、より複雑な選択を行うことができます。