コンテンツにスキップ
SysLearn

CSSの基本とセレクター

HTMLにスタイルを適用するCSSの基本を学び、要素セレクター、クラスセレクター、IDセレクターの使い方をマスターしましょう。

CSSファイルをHTMLにリンクする方法

Section titled “CSSファイルをHTMLにリンクする方法”

CSSを書く方法は3つありますが、一番よく使われる外部CSSファイルの方法を覚えましょう。

1. CSSファイルを作成する

Section titled “1. CSSファイルを作成する”

まず、HTMLファイルと同じフォルダに style.css というファイルを作ります。

2. HTMLからCSSファイルをリンクする

Section titled “2. HTMLからCSSファイルをリンクする”

HTMLの <head> 部分に <link> タグを追加します:

<link rel="stylesheet" href="style.css"> この1行で、HTMLとCSSを繋げることができるよ！

CSSの基本的な書き方

Section titled “CSSの基本的な書き方”

CSSは以下の形で書きます:

セレクター {
  プロパティ: 値;
  プロパティ: 値;
}

CSSの構成要素

Section titled “CSSの構成要素”
  • セレクター: どのHTML要素にスタイルを適用するか
  • プロパティ: 変更したいスタイルの種類（色、大きさなど）
  • 値: プロパティをどう変更するか

要素セレクター

Section titled “要素セレクター”

要素セレクターは、HTMLタグ名を使ってスタイルを適用する方法です。

実践: 要素セレクターを使ってみよう

Section titled “実践: 要素セレクターを使ってみよう”

以下のコメントを参考に、要素セレクターでスタイルを適用してみてください:

解答例を見る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素セレクターの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>しろちゃんの散歩記録</h1>


  <h2>新しく見つけた公園</h2>
  <p>最近、お気に入りの公園を見つけました。大きな木がたくさんあって、のんびりお散歩ができます。</p>


  <h2>お気に入りの場所</h2>
  <p>噴水の近くや芝生の上、ベンチの周りなど、いろいろな場所で休憩するのが楽しいです。</p>
</body>
</html>
style.css
h1 {
  color: #e67e22;
  font-size: 30px;
}


h2 {
  color: #8e44ad;
  font-size: 20px;
}


p {
  color: #2c3e50;
  line-height: 1.5;
}

要素セレクターのポイント:

  • HTMLタグ名をそのまま使う（<h1> → h1）
  • そのタグ名のすべての要素にスタイルが適用される
  • 一番基本的で分かりやすいセレクター

クラスセレクター

Section titled “クラスセレクター”

クラスセレクターは、特定の要素にだけスタイルを適用したいときに使います。

HTMLの要素に class 属性を付けて、CSSでは .クラス名 でスタイルを指定します。

クラスは「グループ分け」のようなものだよ！同じクラス名を複数の要素に付けることもできるし、一つの要素に複数のクラスを付けることもできるんだ。

実践: クラスセレクターを使ってみよう

Section titled “実践: クラスセレクターを使ってみよう”

以下のコメントを参考に、クラスセレクターでスタイルを適用してみてください:

解答例を見る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クラスセレクターの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>みけちゃんの冒険日記</h1>


  <p>今日は新しい探検コースを見つけました。</p>
  <p class="special">小さな川があって、お魚さんたちが泳いでいるのを発見しました。</p>
  <p>きれいな石もたくさん落ちていました。</p>
  <p class="strong">また明日も探検に行きたいと思います。</p>
</body>
</html>
style.css
/* 基本のスタイル */
p {
  color: #34495e;
  line-height: 1.6;
}


.special {
  background-color: #ecf0f1;
  padding: 15px;
  border-left: 4px solid #3498db;
}


.strong {
  color: #c0392b;
  font-weight: bold;
}

クラスセレクターのポイント:

  • CSSでは .クラス名 の形で書く（ピリオドが必要）
  • HTMLでは class="クラス名" の形で書く
  • 同じクラスを複数の要素に使用可能
  • 要素の種類に関係なく使用可能

ヒント: クラス名は英語で、内容が分かりやすい名前を付けましょう。例: highlight（強調）、warning（警告）、special（特別）など。

IDセレクター

Section titled “IDセレクター”

IDセレクターは、ページ内で1つだけの特別な要素にスタイルを適用するときに使います。

HTMLの要素に id 属性を付けて、CSSでは #ID名 でスタイルを指定します。

実践: IDセレクターを使ってみよう

Section titled “実践: IDセレクターを使ってみよう”

以下のコメントを参考に、IDセレクターでスタイルを適用してみてください:

解答例を見る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>IDセレクターの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="header">
    <h1>ちょこちゃんのおやつブログ</h1>
    <p>美味しいおやつと楽しいお茶の時間の記録</p>
  </div>


  <main>
    <h2>今日のおやつ</h2>
    <p>今日はクッキーを食べました。サクサクで家族にも好評でした。</p>


    <h2>明日の予定</h2>
    <p>明日はケーキに挑戦する予定です。フルーツをたくさんのせてみたいと思います。</p>
  </main>


  <div id="footer">
    <p>© 2025 ちょこちゃんのおやつブログ</p>
  </div>
</body>
</html>
style.css
/* 基本のスタイル */
h1 {
  color: #2c3e50;
}


p {
  color: #34495e;
  line-height: 1.6;
}


#header {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}


#footer {
  background-color: #2c3e50;
  color: white;
  padding: 15px;
  text-align: center;
}

IDセレクターのポイント:

  • CSSでは #ID名 の形で書く（シャープが必要）
  • HTMLでは id="ID名" の形で書く
  • 同じIDは1つのページで1回だけ使用
  • ページ内リンクの目印としても使用可能

セレクターの詳細度と優先順位

Section titled “セレクターの詳細度と優先順位”

複数のセレクターが同じ要素に適用される場合、詳細度によって優先順位が決まります1。

優先順位（高い順）

Section titled “優先順位（高い順）”
  1. IDセレクター #main-title
  2. クラスセレクター .highlight
  3. 要素セレクター h1

同じ詳細度の場合

Section titled “同じ詳細度の場合”

同じ詳細度の場合は、後に書かれたスタイルが優先されます:

実践: 優先順位を理解しよう

Section titled “実践: 優先順位を理解しよう”

以下のコードで、最終的にどんなスタイルが適用されるか予想してみてください:

答えを見る

最初の段落（class="highlight important" id="special"）の最終スタイル:

  • color: green ← IDセレクターが最優先
  • font-size: 20px ← IDセレクターが最優先
  • background-color: yellow ← クラスセレクターから（IDに該当プロパティなし）

優先順位の仕組み:

  1. ID > クラス > 要素の順で優先
  2. 同じ詳細度なら後に書かれたものが優先
  3. より詳細なセレクターほど優先される

基本的なスタイリングの実践

Section titled “基本的なスタイリングの実践”

これまで学んだセレクターを組み合わせて、実際のページをスタイリングしてみましょう：

解答例を見る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>総合練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="header">
    <h1>ここちゃんの成長記録</h1>
    <p>日々の遊びと発見を記録するブログ</p>
  </div>


  <main>
    <h2>今週の楽しかったこと</h2>
    <p>今週は新しい遊び場を発見しました。滑り台やブランコがあって、とても楽しく遊ぶことができました。</p>


    <p class="special">特に、砂場での山作りがとても楽しかったです。大きなお山を作って、トンネルも掘りました。</p>


    <h2>来週の予定</h2>
    <p>来週は新しいお友達と一緒に公園で遊ぶ予定です。みんなで楽しく過ごせるようにいろいろな遊びを考えたいと思います。</p>
  </main>


  <div id="footer">
    <p>© 2025 ここちゃんの成長記録</p>
  </div>
</body>
</html>
style.css
/* 1. body要素に基本的なスタイルを適用 */
body {
  font-family: 'Hiragino Sans', sans-serif;
  line-height: 1.6;
  color: #333;
}


/* 2. headerというIDに背景色とパディングを適用 */
#header {
  background-color: #34495e;
  color: white;
  padding: 20px;
  text-align: center;
}


/* 3. h1要素の下余白を設定 */
h1 {
  margin-bottom: 10px;
}


/* 4. specialクラスに特別なスタイルを適用 */
.special {
  background-color: #f8f9fa;
  padding: 15px;
  border-left: 4px solid #007bff;
}


/* 5. footerというIDにフッタースタイルを適用 */
#footer {
  background-color: #6c757d;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 30px;
}

完成したページの特徴:

  • 統一感のあるデザイン
  • 読みやすいフォントと行間
  • 視覚的な階層構造
  • 適切な余白とパディング

CSSのベストプラクティス

Section titled “CSSのベストプラクティス”

効果的なCSSを書くためのポイント:

チェックリスト

  • 外部CSSファイルを使用する
  • 意味のあるクラス名・ID名を使う
  • IDは1つのページで1回だけ使用
  • セレクターの詳細度を理解して適切に使い分ける
  • コメントを活用してコードを整理する
CSS リファレンス MDNで詳しく学ぶ

チェックポイント！

  • CSSの役割と基本的な書き方を理解した
  • CSSファイルをHTMLにリンクする方法を覚えた
  • 要素セレクターの使い方を理解した
  • クラスセレクターの使い方を理解した
  • IDセレクターの使い方を理解した
  • セレクターの詳細度と優先順位を理解した
  • 基本的なスタイリングができるようになった

Footnotes

Section titled “Footnotes”

  1. CSSの基本 ↗ - esa#1041 ↩

最後まで読み終えました！ えらい！