読み込み中...

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

初心者向けのCSS直書き入門ガイド CSS
2024.02.17
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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直書きのメリットとデメリット

メリット:

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

デメリット:

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

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

  1. <style>タグを<head>タグ内に記述する。
  2. <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直書きのデメリットを解決するためには、以下のような対処法があります。

  1. 外部CSSファイルを用意し、リンクタグで読み込む。
  2. クラスや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（赤色）に変更しています。

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

まとめ

この記事でCSS直書きの作り方・使い方、対処法から応用例まで紹介しました。

CSS直書きは状況に応じて使い分けることで、ウェブページのデザインや機能をより効果的に実現できます。

これであなたもCSS直書きを簡単にマスターできたことでしょう。

今回紹介した例を参考に、自分のプロジェクトに活用してみてください。