CSS直書き入門！5ステップで簡単マスター

はじめに
●ステップ1：CSS直書きとは？
●ステップ2：CSS直書きのメリットとデメリット
●ステップ3：CSS直書きの使い方
●ステップ4：CSS直書きの問題と対処法
●ステップ5：CSS直書きの応用例とサンプルコード
- ○応用例1：テーブルの見出し行に異なるスタイルを適用する
- ○応用例2：マウスオーバー時にリンクの色を変更する
まとめ

はじめに

CSSを学び始めたばかりの初心者にとって、「CSS直書き」はちょっとした悩みどころかもしれません。

でも大丈夫、この記事ではCSS直書きの作り方、使い方、対処法をサンプルコード付きで解説し、さらに応用例も紹介します。

あなたも5ステップで簡単にCSS直書きをマスターできるでしょう！

●ステップ1：CSS直書きとは？

CSS直書きは、HTMLファイル内でCSSを直接記述する方法のことです。

HTMLの<style>タグを使って、その中にCSSを書くことで、外部CSSファイルを読み込むことなく、スタイルを適用することができます。

<!DOCTYPE html>
<html>
<head>
<style>
  h1 {
    color: red;
  }
</style>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

●ステップ2：CSS直書きのメリットとデメリット

メリット:

外部CSSファイルを読み込まないため、読み込み速度が速くなる。
一部の要素に特定のスタイルを適用する際に便利。

デメリット:

CSSが散らばり、管理が難しくなる。
コードの再利用性が低くなる。

●ステップ3：CSS直書きの使い方

<style>タグを<head>タグ内に記述する。
<style>タグ内にCSSを記述する。

<!DOCTYPE html>
<html>
<head>
<style>
  h1 {
    color: blue;
  }
  p {
    font-size: 18px;
  }
</style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

●ステップ4：CSS直書きの問題と対処法

CSS直書きのデメリットを解決するためには、以下のような対処法があります。

外部CSSファイルを用意し、リンクタグで読み込む。
クラスやIDを活用して、特定の要素にスタイルを適用する。

サンプルコード（外部CSSファイルの使用）:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

<!-- styles.css -->
h1 {
  color: blue;
}

p {
  font-size: 18px;
}

サンプルコード（クラスやIDの使用）:

<!DOCTYPE html>
<html>
<head>
<style>
  .blue-text {
    color: blue;
  }
  #large-text {
    font-size: 18px;
  }
</style>
</head>
<body>
  <h1 class="blue-text">Hello World!</h1>
  <p id="large-text">This is a paragraph.</p>
</body>
</html>

●ステップ5：CSS直書きの応用例とサンプルコード

このステップでは、CSS直書きの応用例として2つのサンプルコードが紹介します。

○応用例1：テーブルの見出し行に異なるスタイルを適用する

この応用例では、HTMLのテーブルを使用しています。

具体的には、<table>要素を使い、<thead>要素を使ってテーブルの見出し行を定義しています。

CSS直書きを使用して、テーブル全体やテーブルの見出し行に異なるスタイルを適用する方法を表しています。

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  thead {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

このコードでは、テーブル全体に対してwidth: 100%;を指定しています。

border-collapse: collapse;はセルの境界線を重ねる設定です。

th（テーブルの見出しセル）とtd（テーブルのデータセル）に対しては共通のスタイルを指定していますが、見出し行のスタイルを特別に設定するためにtheadセレクタを使って背景色を#f2f2f2（薄いグレー）に設定しています。

○応用例2：マウスオーバー時にリンクの色を変更する

この応用例では、<a>要素を使用してリンクを作成しています。

CSS直書きを使用して、リンクに対してデフォルトのスタイルとマウスオーバー時のスタイルを指定しています。

マウスがリンクの上にある（ホバーした）ときにリンクの色を変更する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
  a {
    color: blue;
    text-decoration: none;
  }
  a:hover {
    color: red;
  }
</style>
</head>
<body>
  <a href="https://example.com">Visit our website!</a>
</body>
</html>

このコードでは、リンクに対してcolor: blue;とtext-decoration: none;を指定しています。

これにより、デフォルトのリンクの色は青くなり、下線が表示されなくなります。

そして、a:hoverセレクタを使って、マウスがリンクの上にある（ホバーした）ときにリンクの色をred（赤色）に変更しています。

つまり、リンクにマウスを乗せるとリンクの色が赤くなるという効果があります。