CSSの基本：外部スタイルシートの読み込み方、スタイルの記述方法、定義済みスタイルの適用方法、@mediaルールの使い方

Webデザインを学ぶ上で、CSSは欠かせない技術です。

本記事では、外部スタイルシートの読み込み方、要素にスタイルを直接記述する方法、要素に定義済みのスタイルを適用する方法、そして、@mediaルールを使って異なるデバイスに対応したスタイルを指定する方法を解説します。

CSSの基本的な設定方法について知りたいです。

外部スタイルシートの読み込み方、要素にスタイルを直接記述する方法、要素に定義済みのスタイルを適用する方法、そして、@mediaルールを使って異なるデバイスに対応したスタイルを指定する方法などがあります。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

外部スタイルシートの読み込み方法

外部スタイルシートを読み込むには、HTMLの<head>要素内に<link>要素を追加します。<link>要素は、href属性に読み込む外部ファイルのパスを指定し、rel属性にstylesheetを指定します。以下は、外部ファイルstyle.cssを読み込む例です。

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <!-- ここにHTMLのコンテンツを記述する -->
  </body>
</html>

外部スタイルシートの作成方法

外部スタイルシートは、CSSのコードを記述したファイルです。拡張子は.cssとなります。以下は、外部スタイルシートstyle.cssの例です。

/* 外部スタイルシートの例 */

/* 全体のフォントサイズを指定する */
body {
  font-size: 16px;
}

/* ヘッダーのスタイルを指定する */
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

/* ボタンのスタイルを指定する */
button {
  background-color: #0099ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

外部スタイルシートを読み込むには、<link>要素を使用し、外部スタイルシートを作成するには、CSSのコードを記述した.cssファイルを作成します。これによって、スタイルの再利用性が高くなり、保守性も向上します。

HTMLのヘッダにスタイルを記述する方法

CSSをHTML内で記述する方法の一つに、<style>要素を使ってヘッダにスタイルを記述する方法があります。<style>要素は、<head>要素内に配置され、その中にCSSのコードを記述することができます。

以下は、<style>要素を使用してヘッダにスタイルを記述する例です。

<!DOCTYPE html>
<html>
  <head>
    <title>ヘッダにスタイルを記述する例</title>
    <style>
      /* ヘッダーのスタイルを指定する */
      header {
        background-color: #333;
        color: #fff;
        padding: 20px;
      }

      /* ボタンのスタイルを指定する */
      button {
        background-color: #0099ff;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>ヘッダにスタイルを記述する例</h1>
    </header>
    <button>ボタン</button>
  </body>
</html>

上記の例では、<style>要素内にCSSのコードを記述し、header要素とbutton要素にスタイルを指定しています。この方法を使用することで、HTMLファイル内でCSSを直接記述することができ、外部ファイルを使用しなくてもスタイルを指定できます。

ポイント

ただし、<style>要素を使用してCSSを記述する場合、CSSコードが長くなりすぎると、可読性が低下してしまうため、複数の外部ファイルに分けることが推奨されます。

また、同じスタイルを複数のHTMLファイルで使用する場合は、外部スタイルシートを使用することが望ましいです。外部スタイルシートを使用することで、スタイルの再利用性が高くなり、保守性も向上します。

<style>要素を使用してヘッダにスタイルを記述する方法があります。この方法を使用することで、HTMLファイル内でCSSを直接記述することができます。ただし、CSSコードが長くなりすぎる場合や、同じスタイルを複数のHTMLファイルで使用する場合は、外部スタイルシートを使用することが推奨されます。

HTMLの要素にスタイルを直接記述する方法

HTMLの要素にスタイルを直接指定する方法として、style属性を使用する方法があります。style属性を使用することで、その要素に対してCSSのスタイルを直接指定することができます。

以下は、style属性を使用して要素にスタイルを直接指定する例です。

<!DOCTYPE html>
<html>
  <head>
    <title>要素にスタイルを直接指定する例</title>
  </head>
  <body>
    <header style="background-color: #333; color: #fff; padding: 20px;">
      <h1>要素にスタイルを直接指定する例</h1>
    </header>
    <button style="background-color: #0099ff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer;">
      ボタン
    </button>
  </body>
</html>

上記の例では、header要素とbutton要素に対して、style属性を使用してスタイルを直接指定しています。この方法を使用することで、HTMLファイル内でCSSを直接記述することができ、外部ファイルや<style>要素を使用しなくてもスタイルを指定できます。

要素に定義済みのスタイルを適用する方法

CSSには、事前に定義済みのスタイルがいくつか用意されています。これらのスタイルは、CSSのクラスやIDなどのセレクタを使用して、HTMLの要素に適用することができます。

以下は、定義済みのスタイルを使用して要素にスタイルを適用する例です。

<!DOCTYPE html>
<html>
  <head>
    <title>定義済みのスタイルを適用する例</title>
    <style>
      /* 定義済みのスタイル */
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 class="red">赤い見出し</h1>
    <p class="blue">青いテキスト</p>
  </body>
</html>

上記の例では、.redクラスと.blueクラスに対して、赤色と青色のテキストカラーを指定しています。そして、h1要素には.redクラスを、p要素には.blueクラスを適用しています。このように、HTMLの要素に対して定義済みのスタイルを適用することで、スタイルの再利用性が高くなり、保守性も向上します。

対象ユーザー環境をCSSファイル内に指定する：@media

以下に、対象ユーザー環境をCSSファイル内に指定する方法について解説していきます。

@mediaルールとは

@mediaルールは、CSSファイル内に対象となるデバイスの条件を指定することができます。これによって、異なる解像度やデバイスに応じて異なるスタイルを指定することができます。

以下は、@mediaルールを使用して、異なる解像度に応じて背景色を変更する例です。

/* 通常の背景色 */
body {
  background-color: #f2f2f2;
}

/* 解像度が768px以下の場合の背景色 */
@media screen and (max-width: 768px) {
  body {
    background-color: #dcdcdc;
  }
}

/* 解像度が480px以下の場合の背景色 */
@media screen and (max-width: 480px) {
  body {
    background-color: #b0c4de;
  }
}

上記の例では、@mediaルールを使用して、異なる解像度に応じて背景色を変更しています。解像度が768px以下の場合には、背景色がグレーに、480px以下の場合には、背景色が青い色に変更されます。

@mediaルールの指定方法

@mediaルールを使用するには、以下のように記述します。

@media メディアタイプ and (メディアクエリ) {
  /* スタイルの指定 */
}

メディアタイプには、screenやprintなどのメディアタイプを指定します。メディアクエリには、デバイスの幅や高さ、解像度、向きなどの条件を指定します。スタイルの指定は、{}内に記述します。

メディアクエリには、以下のような指定方法があります。

max-width：幅が指定された値以下の場合に適用
min-width：幅が指定された値以上の場合に適用
max-height：高さが指定された値以下の場合に適用
min-height：高さが指定された値以上の場合に適用
orientation：向きが指定された値の場合に適用　　　　など

@mediaルールを使用することで、異なる解像度やデバイスに応じて異なるスタイルを指定することができます。@mediaルールは、メディアタイプとメディアクエリを指定して使用します

まとめ

部スタイルシートの読み込み方、要素にスタイルを直接記述する方法、要素に定義済みのスタイルを適用する方法、そして、@mediaルールを使って異なるデバイスに対応したスタイルを指定する方法を解説しました。

CSSの基本的な使い方には、外部スタイルシートの読み込み方、要素にスタイルを直接記述する方法、要素に定義済みのスタイルを適用する方法、そして、@mediaルールを使って異なるデバイスに対応したスタイルを指定する方法がある。
外部スタイルシートを使うことで、複数のHTMLファイルで同じスタイルを使い回すことができる。
要素にスタイルを直接記述する方法は、HTMLファイル内でCSSを直接記述することができるが、可読性の低下に注意が必要。
定義済みのスタイルを使うことで、スタイルの再利用性が高くなり、保守性も向上する。
@mediaルールを使用することで、異なる解像度やデバイスに応じたスタイルを指定することができる。