【保存版】CSSで使うタグ（セレクタ）一覧｜初心者でもわかる基本まとめ

CSS

CSSを書き始めたばかりだと、「どのタグ（セレクタ）をどう書けばいいの？」「p とか div ってどうやって指定するの？」と迷ってしまいますよね。

この記事では、CSSでよく使うタグ（＝HTMLの要素名を指定するセレクタ）を一覧でまとめ、さらにクラスやid、属性、疑似クラスなどもわかりやすく紹介します。

スポンサーリンク
  1. HTMLタグ（要素セレクタ）の一覧
    1. 要素セレクタとは？
    2. 基本的な書き方
    3. よく使うHTMLタグ一覧（CSSでの指定例）
    4. 全要素に適用するユニバーサルセレクタ
  2. クラスセレクタ
    1. クラスセレクタとは？
    2. 基本的な書き方
    3. クラスセレクタの特徴
    4. よく使うクラス名のパターン
    5. 複数クラスの組み合わせ
  3. IDセレクタ
    1. IDセレクタとは？
    2. 基本的な書き方
    3. IDセレクタの特徴
    4. よく使われるID名
    5. classとidの使い分け
    6. 実用的な使い分け例
  4. 属性セレクタ
    1. 属性セレクタとは？
    2. 基本的な書き方
    3. 属性セレクタの種類
    4. 実用的な使用例
    5. 複数属性の組み合わせ
  5. 疑似クラス・疑似要素セレクタ
    1. 疑似クラスとは？
    2. 基本的な疑似クラス
    3. 疑似要素とは？
    4. 基本的な疑似要素
    5. 実用的な組み合わせ例
  6. 組み合わせセレクタ
    1. 組み合わせセレクタとは？
    2. 子孫セレクタ（空白）
    3. 子セレクタ（>）
    4. 隣接兄弟セレクタ（+）
    5. 一般兄弟セレクタ（~）
    6. 複数セレクタ（,）
    7. 複雑な組み合わせ例
  7. CSSセレクタの総まとめ（一覧表）
    1. セレクタの種類と書き方
    2. セレクタの詳細度（優先順位）
    3. 実用的なセレクタ組み合わせ例
    4. セレクタ選択のベストプラクティス
  8. よくある質問と回答
    1. Q: クラスとIDはどう使い分けるべき？
    2. Q: セレクタの優先順位が複雑でわからない
    3. Q: 疑似クラスと疑似要素の違いは？
    4. Q: モダンなCSS設計手法は？
  9. まとめ
    1. 基本のセレクタ
    2. 組み合わせセレクタ
    3. 効果的な使い方のポイント

HTMLタグ（要素セレクタ）の一覧

要素セレクタとは？

最も基本的なセレクタで、HTMLのタグ名をそのまま指定する方法です。そのタグが使われているすべての要素にスタイルが適用されます。

基本的な書き方

p {
  color: blue;
  font-size: 16px;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

div {
  margin: 10px;
  padding: 15px;
}

よく使うHTMLタグ一覧（CSSでの指定例）

文書構造・レイアウト関連

タグ用途CSSでの指定例効果
htmlHTMLドキュメント全体html { font-size: 16px; }基本フォントサイズ設定
bodyページの本体body { margin: 0; background: white; }余白リセット・背景色
div汎用のコンテナdiv { border: 1px solid #ccc; }枠線を付ける
sectionセクションsection { margin-bottom: 30px; }セクション間の余白
article記事article { padding: 20px; }記事内の余白
headerヘッダーheader { background: #333; color: white; }ヘッダーのスタイル
footerフッターfooter { text-align: center; padding: 20px; }フッターのスタイル
navナビゲーションnav { background: #f8f9fa; }ナビの背景色
mainメインコンテンツmain { max-width: 1200px; margin: 0 auto; }幅制限・中央寄せ
asideサイドバーaside { width: 300px; float: right; }サイドバーの配置

見出し・テキスト関連

タグ用途CSSでの指定例効果
h1最大見出しh1 { font-size: 2.5em; color: navy; }大きな見出し
h2大見出しh2 { font-size: 2em; border-bottom: 2px solid #333; }下線付き見出し
h3中見出しh3 { font-size: 1.5em; margin-top: 30px; }中サイズ見出し
h4小見出しh4 { font-size: 1.2em; color: #666; }小見出し
h5, h6より小さな見出しh5, h6 { font-size: 1em; font-weight: bold; }強調テキスト風
p段落p { line-height: 1.8; margin-bottom: 15px; }読みやすい行間
spanインライン要素span { background: yellow; padding: 2px; }テキストの一部を強調
strong重要なテキストstrong { color: red; font-weight: bold; }強調表示
em強調em { font-style: italic; color: #666; }イタリック体
small小さなテキストsmall { font-size: 0.8em; color: #999; }注釈テキスト

リスト関連

タグ用途CSSでの指定例効果
ul順序なしリストul { list-style: none; padding: 0; }箇条書きマークを削除
ol順序ありリストol { counter-reset: list-counter; }カスタム番号
liリスト項目li { margin-bottom: 10px; padding: 5px; }項目間の余白
dl定義リストdl { margin: 20px 0; }定義リストの余白
dt定義語dt { font-weight: bold; margin-top: 15px; }定義語の強調
dd定義説明dd { margin-left: 20px; color: #666; }説明文のインデント

リンク・メディア関連

タグ用途CSSでの指定例効果
aリンクa { color: blue; text-decoration: none; }下線なしリンク
img画像img { max-width: 100%; height: auto; }レスポンシブ画像
figure図・画像figure { margin: 20px 0; text-align: center; }図の中央寄せ
figcaption図のキャプションfigcaption { font-size: 0.9em; color: #666; }キャプションのスタイル
video動画video { width: 100%; max-width: 800px; }レスポンシブ動画
audio音声audio { width: 100%; }音声プレーヤーの幅

表関連

タグ用途CSSでの指定例効果
table表table { width: 100%; border-collapse: collapse; }表の基本スタイル
tr表の行tr:nth-child(even) { background: #f8f9fa; }偶数行の背景色
tdデータセルtd { padding: 10px; border: 1px solid #ddd; }セルの余白・枠線
thヘッダーセルth { background: #333; color: white; padding: 12px; }ヘッダーのスタイル
thead表のヘッダー部分thead { background: #f1f1f1; }ヘッダー部分の背景
tbody表のボディ部分tbody tr:hover { background: #e9ecef; }行のホバー効果
tfoot表のフッター部分tfoot { font-weight: bold; background: #e9ecef; }フッター部分の強調

フォーム関連

タグ用途CSSでの指定例効果
formフォームform { max-width: 600px; margin: 0 auto; }フォームの幅制限
input入力フィールドinput { padding: 10px; border: 1px solid #ccc; border-radius: 4px; }入力欄のスタイル
textareaテキストエリアtextarea { resize: vertical; font-family: inherit; }縦方向のみリサイズ
buttonボタンbutton { background: blue; color: white; padding: 10px 20px; border: none; }ボタンのスタイル
selectセレクトボックスselect { padding: 8px; border: 1px solid #ccc; }セレクトボックス
labelラベルlabel { display: block; margin-bottom: 5px; font-weight: bold; }ラベルの配置
fieldsetフィールドグループfieldset { border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; }グループ化
legendフィールドセットの見出しlegend { font-weight: bold; padding: 0 10px; }見出しのスタイル

全要素に適用するユニバーサルセレクタ

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

使用例：

  • ボックスサイズの統一
  • マージン・パディングのリセット
  • フォントの統一

この章のまとめ

要素セレクタは、HTMLのタグ名をそのまま書けば、そのタグ全体にスタイルが当たります。ページ全体の基本的なスタイルを設定するのに便利です。次は、もっと柔軟にデザインを当てられるクラス・idを見ていきましょう。

クラスセレクタ

クラスセレクタとは？

複数の要素に同じスタイルを当てたいときに使用します。HTMLのclass属性と組み合わせて、再利用可能なスタイルを作成できます。

基本的な書き方

HTML：

<p class="highlight">注目のテキスト</p>
<div class="highlight">注目のボックス</div>
<span class="highlight">注目の部分</span>

CSS：

.highlight {
  background-color: yellow;
  padding: 5px;
  border-left: 4px solid orange;
}

クラスセレクタの特徴

メリット

  • 再利用可能：同じクラスを何度でも使える
  • 柔軟性：どのHTML要素にも適用可能
  • 保守性：一箇所変更すれば全体に反映
  • 組み合わせ：複数のクラスを同時に適用可能

使用上の注意

  • **必ずドット（.）**で始める
  • 意味のある名前を付ける
  • 英数字とハイフンのみ使用
  • 大文字小文字は区別される

よく使うクラス名のパターン

レイアウト関連クラス

/* コンテナ・ラッパー */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.wrapper {
  width: 100%;
  overflow: hidden;
}

/* グリッドシステム */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

.col-half {
  width: 50%;
  padding: 0 15px;
}

.col-third {
  width: 33.333%;
  padding: 0 15px;
}

コンポーネント関連クラス

/* ボタン */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

/* カード */
.card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 15px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

ユーティリティクラス

/* テキスト関連 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }

/* 色関連 */
.text-primary { color: #007bff; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #17a2b8; }
.text-muted { color: #6c757d; }

.bg-primary { background-color: #007bff; }
.bg-success { background-color: #28a745; }
.bg-danger { background-color: #dc3545; }
.bg-light { background-color: #f8f9fa; }
.bg-dark { background-color: #343a40; }

/* 余白関連 */
.m-0 { margin: 0; }
.m-1 { margin: 10px; }
.m-2 { margin: 20px; }
.m-3 { margin: 30px; }

.mt-1 { margin-top: 10px; }
.mb-1 { margin-bottom: 10px; }
.ml-1 { margin-left: 10px; }
.mr-1 { margin-right: 10px; }

.p-0 { padding: 0; }
.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.p-3 { padding: 30px; }

.pt-1 { padding-top: 10px; }
.pb-1 { padding-bottom: 10px; }
.pl-1 { padding-left: 10px; }
.pr-1 { padding-right: 10px; }

/* 表示・非表示 */
.show { display: block; }
.hide { display: none; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }

複数クラスの組み合わせ

<button class="btn btn-primary btn-large">大きなメインボタン</button>
<p class="text-center text-bold text-primary mb-2">中央寄せの太字テキスト</p>
<div class="card bg-light p-3 mb-2">ライトな背景のカード</div>

この章のまとめ

クラスセレクタは.クラス名で指定し、複数の要素に同じスタイルを当てられる便利な方法です。再利用性が高く、組み合わせも自由なので、効率的なCSS設計の基本となります。

IDセレクタ

IDセレクタとは？

1ページに1つだけの要素にスタイルを当てたいときに使用します。ページ内で一意（ユニーク）な要素を指定するためのセレクタです。

基本的な書き方

HTML：

<div id="main-visual">メインビジュアル</div>
<header id="header">ヘッダー</header>
<nav id="navigation">ナビゲーション</nav>

CSS：

#main-visual {
  height: 400px;
  background: url('hero-image.jpg') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header {
  background: #333;
  color: white;
  padding: 20px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#navigation {
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

IDセレクタの特徴

メリット

  • 高い詳細度：他のセレクタより優先される
  • JavaScript連携：IDはJavaScriptでも使いやすい
  • アンカーリンク：ページ内リンクの目標になる
  • 一意性：ページ内で特定の要素を確実に指定

注意点

  • 1ページに1つだけ：同じIDは重複不可
  • 再利用不可：クラスほど柔軟性がない
  • 詳細度が高い：上書きが困難になる場合も
  • **シャープ（#）**で始める必要がある

よく使われるID名

ページ構造関連

/* ページ全体の構造 */
#page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#header {
  background: #333;
  color: white;
  padding: 15px 0;
}

#main-content {
  flex: 1;
  padding: 40px 0;
}

#sidebar {
  width: 300px;
  background: #f8f9fa;
  padding: 20px;
}

#footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 30px 0;
}

特定のセクション

/* 特別なセクション */
#hero-section {
  height: 100vh;
  background: linear-gradient(45deg, #007bff, #28a745);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#about-section {
  padding: 80px 0;
  background: #f8f9fa;
}

#contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

ナビゲーション関連

#main-navigation {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

#mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: -100%;
  width: 280px;
  height: 100vh;
  background: white;
  transition: left 0.3s ease;
}

#mobile-menu.active {
  left: 0;
}

#menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

classとidの使い分け

項目classid
HTMLでの記述class="名前"id="名前"
CSSでの記述.名前#名前
使用回数何度でも使用可能1ページに1回のみ
詳細度10100
主な用途スタイリング一意の識別
JavaScript複数要素の取得単一要素の取得
再利用性高い低い

実用的な使い分け例

<!-- ID：ページ構造の大枠 -->
<header id="site-header">
  <!-- class：再利用可能なコンポーネント -->
  <div class="container">
    <h1 class="site-title">サイト名</h1>
    <nav class="main-nav">
      <ul class="nav-list">
        <li class="nav-item"><a href="#" class="nav-link">ホーム</a></li>
        <li class="nav-item"><a href="#" class="nav-link">サービス</a></li>
        <li class="nav-item"><a href="#" class="nav-link">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>

<main id="main-content">
  <section id="hero-section" class="hero">
    <div class="container">
      <h2 class="hero-title">メインタイトル</h2>
      <p class="hero-text">説明文</p>
      <a href="#" class="btn btn-primary btn-large">ボタン</a>
    </div>
  </section>
</main>

この章のまとめ

IDセレクタは#ID名で指定し、ページ内で一意の要素を特定するために使います。詳細度が高く、JavaScript連携にも便利ですが、同じIDは1ページに1つだけという制限があります。

属性セレクタ

属性セレクタとは？

HTMLタグの属性に基づいてスタイルを適用するセレクタです。特定の属性を持つ要素や、属性の値が特定の条件を満たす要素を指定できます。

基本的な書き方

属性の存在で指定

/* title属性を持つすべての要素 */
[title] {
  border-bottom: 1px dotted #999;
  cursor: help;
}

/* alt属性を持つimg要素 */
img[alt] {
  border: 2px solid green;
}

属性の値で指定

/* type="password"の入力フィールド */
input[type="password"] {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
}

/* target="_blank"のリンク */
a[target="_blank"] {
  color: #dc3545;
}

a[target="_blank"]::after {
  content: " 🔗";
  font-size: 0.8em;
}

属性セレクタの種類

基本的な属性セレクタ

セレクタ意味例
[属性]属性を持つ要素[title]
[属性="値"]属性の値が完全一致[type="text"]
[属性~="値"]属性の値に特定の単語を含む[class~="btn"]
`[属性=”値”]`属性の値が指定値で始まる（ハイフン区切り）
[属性^="値"]属性の値が指定値で始まる[href^="https"]
[属性$="値"]属性の値が指定値で終わる[href$=".pdf"]
[属性*="値"]属性の値に指定値を含む[href*="example"]

実用的な使用例

フォーム要素のスタイリング

/* 必須フィールドの強調 */
input[required] {
  border-left: 4px solid #dc3545;
}

input[required]:focus {
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
}

/* 読み取り専用フィールド */
input[readonly] {
  background-color: #e9ecef;
  cursor: not-allowed;
}

/* 無効化されたフィールド */
input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* チェックボックスとラジオボタン */
input[type="checkbox"],
input[type="radio"] {
  margin-right: 8px;
  transform: scale(1.2);
}

/* ファイルアップロード */
input[type="file"] {
  padding: 10px;
  border: 2px dashed #007bff;
  background: #f8f9fa;
  border-radius: 4px;
}

/* 検索フィールド */
input[type="search"] {
  border-radius: 20px;
  padding-left: 15px;
}

リンクのスタイリング

/* 外部リンク */
a[href^="http"]:not([href^="https://yoursite.com"]) {
  color: #007bff;
}

a[href^="http"]:not([href^="https://yoursite.com"])::after {
  content: " ↗";
  font-size: 0.8em;
}

/* メールリンク */
a[href^="mailto:"] {
  color: #28a745;
}

a[href^="mailto:"]::before {
  content: "📧 ";
}

/* 電話リンク */
a[href^="tel:"] {
  color: #17a2b8;
  text-decoration: none;
}

a[href^="tel:"]::before {
  content: "📞 ";
}

/* PDFリンク */
a[href$=".pdf"] {
  color: #dc3545;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
  font-weight: normal;
}

/* ダウンロードリンク */
a[download] {
  background: #28a745;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  text-decoration: none;
}

a[download]::before {
  content: "⬇ ";
}

言語属性での指定

/* 日本語の要素 */
[lang="ja"] {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* 英語の要素 */
[lang="en"] {
  font-family: "Arial", "Helvetica", sans-serif;
}

/* 中国語の要素 */
[lang^="zh"] {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

データ属性での指定

/* カスタムデータ属性 */
[data-status="active"] {
  background-color: #d4edda;
  border-color: #c3e6cb;
}

[data-status="inactive"] {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

[data-priority="high"] {
  border-left: 5px solid #dc3545;
  background-color: #fff5f5;
}

[data-priority="medium"] {
  border-left: 5px solid #ffc107;
  background-color: #fffbf0;
}

[data-priority="low"] {
  border-left: 5px solid #28a745;
  background-color: #f8fff8;
}

/* ツールチップ */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

部分一致での高度な指定

/* クラス名に特定の文字列を含む */
[class*="btn"] {
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
}

/* IDに特定の文字列を含む */
[id*="modal"] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
}

/* 画像のalt属性に特定の単語を含む */
img[alt*="logo"] {
  max-height: 50px;
  width: auto;
}

img[alt*="icon"] {
  width: 20px;
  height: 20px;
}

複数属性の組み合わせ

/* 複数の属性条件を同時に満たす */
input[type="text"][required] {
  border: 2px solid #dc3545;
  background-color: #fff5f5;
}

a[href^="https"][target="_blank"] {
  color: #007bff;
  font-weight: bold;
}

input[type="email"][pattern] {
  background-image: url('email-icon.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 35px;
}

この章のまとめ

属性セレクタを使うと、HTML要素の属性に基づいて細かくスタイルを指定できます。フォーム要素やリンクのスタイリングに特に有効で、ユーザビリティの向上にも役立ちます。

疑似クラス・疑似要素セレクタ

疑似クラスとは？

要素の状態や位置に基づいてスタイルを適用するセレクタです。ユーザーの操作（ホバー、フォーカスなど）や要素の位置（最初、最後など）に応じて動的にスタイルが変わります。

基本的な疑似クラス

ユーザー操作関連

/* マウスホバー時 */
a:hover {
  color: #dc3545;
  text-decoration: underline;
}

button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* フォーカス時（キーボード操作やクリック時） */
input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* アクティブ時（クリック中） */
button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

リンク状態関連

/* 未訪問のリンク */
a:link {
  color: #007bff;
  text-decoration: none;
}

/* 訪問済みのリンク */
a:visited {
  color: #6f42c1;
}

/* ホバー時（上記と組み合わせ） */
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* アクティブ時 */
a:active {
  color: #004085;
}

位置関連の疑似クラス

/* 最初の子要素 */
li:first-child {
  font-weight: bold;
  color: #007bff;
}

/* 最後の子要素 */
li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* 最初の型の要素 */
h2:first-of-type {
  margin-top: 0;
}

/* 最後の型の要素 */
p:last-of-type {
  margin-bottom: 0;
}

/* n番目の子要素 */
tr:nth-child(odd) {
  background-color: #f8f9fa;
}

tr:nth-child(even) {
  background-color: white;
}

/* 3番目の要素 */
.item:nth-child(3) {
  background-color: #fff3cd;
}

/* 3の倍数番目の要素 */
.grid-item:nth-child(3n) {
  margin-right: 0;
}

/* 最初の3つ以外 */
.card:nth-child(n+4) {
  margin-top: 30px;
}

フォーム関連の疑似クラス

/* チェック済みのチェックボックス・ラジオボタン */
input:checked {
  transform: scale(1.1);
}

input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: #28a745;
}

/* 無効化された要素 */
input:disabled {
  background-color: #e9ecef;
  opacity: 0.6;
  cursor: not-allowed;
}

/* 有効な要素 */
input:enabled {
  border-color: #ced4da;
}

/* 必須フィールド */
input:required {
  border-left: 3px solid #dc3545;
}

/* 任意フィールド */
input:optional {
  border-left: 3px solid #28a745;
}

/* バリデーション関連 */
input:valid {
  border-color: #28a745;
}

input:invalid {
  border-color: #dc3545;
}

input:invalid:focus {
  box-shadow: 0 0 5px rgba(220,53,69,0.3);
}

その他の便利な疑似クラス

/* 空の要素 */
p:empty {
  display: none;
}

/* 子要素を持たない要素 */
div:empty::before {
  content: "コンテンツがありません";
  color: #6c757d;
  font-style: italic;
}

/* ルート要素 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
}

/* ターゲット要素（アンカーリンクの対象） */
:target {
  background-color: #fff3cd;
  padding: 20px;
  border: 2px solid #ffc107;
}

/* 一意の子要素 */
li:only-child {
  text-align: center;
  font-weight: bold;
}

疑似要素とは？

要素の特定の部分や仮想的な要素にスタイルを適用するセレクタです。実際のHTMLには存在しない部分を作成・装飾できます。

基本的な疑似要素

::before と ::after

/* 要素の前にコンテンツを挿入 */
.important::before {
  content: "⚠️ ";
  color: #ffc107;
  font-weight: bold;
}

/* 要素の後にコンテンツを挿入 */
.external-link::after {
  content: " 🔗";
  font-size: 0.8em;
  color: #6c757d;
}

/* 装飾的な要素の作成 */
.quote {
  position: relative;
  padding: 20px;
  margin: 20px 0;
  background: #f8f9fa;
  border-left: 4px solid #007bff;
}

.quote::before {
  content: """;
  position: absolute;
  top: -10px;
  left: 10px;
  font-size: 4em;
  color: #007bff;
  opacity: 0.3;
}

.quote::after {
  content: """;
  position: absolute;
  bottom: -30px;
  right: 10px;
  font-size: 4em;
  color: #007bff;
  opacity: 0.3;
}

テキスト関連の疑似要素

/* 最初の行 */
p::first-line {
  font-weight: bold;
  font-size: 1.1em;
  color: #007bff;
}

/* 最初の文字（ドロップキャップ） */
.article p:first-of-type::first-letter {
  float: left;
  font-size: 3em;
  line-height: 1;
  margin: 0 8px 0 0;
  color: #007bff;
  font-weight: bold;
}

/* 選択されたテキスト */
::selection {
  background-color: #007bff;
  color: white;
}

::-moz-selection {
  background-color: #007bff;
  color: white;
}

フォーム要素の疑似要素

/* プレースホルダーのスタイル */
::placeholder {
  color: #6c757d;
  font-style: italic;
  opacity: 0.7;
}

::-webkit-input-placeholder {
  color: #6c757d;
  font-style: italic;
}

::-moz-placeholder {
  color: #6c757d;
  font-style: italic;
}

/* ファイル選択ボタン */
input[type="file"]::-webkit-file-upload-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

/* スクロールバー（Webkit系ブラウザ） */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

実用的な組み合わせ例

インタラクティブなボタン

.btn-fancy {
  position: relative;
  padding: 12px 24px;
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-fancy::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.btn-fancy:hover::before {
  left: 100%;
}

.btn-fancy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,123,255,0.3);
}

.btn-fancy:active {
  transform: translateY(0);
}

アコーディオンメニュー

.accordion-item {
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-header {
  background: #f8f9fa;
  padding: 15px 20px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background: #e9ecef;
}

.accordion-header::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header::after {
  transform: translateY(-50%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-content {
  max-height: 200px;
  padding: 20px;
}

ローディングアニメーション

.loading {
  position: relative;
  color: transparent;
}

.loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

この章のまとめ

疑似クラス（:hover、:focusなど）は要素の状態に、疑似要素（::before、::afterなど）は要素の特定部分にスタイルを適用します。これらを組み合わせることで、インタラクティブで動的なデザインが作成できます。

組み合わせセレクタ

組み合わせセレクタとは？

複数のセレクタを組み合わせて、より具体的な要素を指定する方法です。要素の関係性（親子、兄弟など）や条件を組み合わせて、ピンポイントでスタイルを適用できます。

子孫セレクタ（空白）

基本的な使い方

/* .headerの中にあるすべてのa要素 */
.header a {
  color: white;
  text-decoration: none;
}

/* .nav内のli要素 */
.nav li {
  display: inline-block;
  margin-right: 20px;
}

/* .cardの中のh3要素 */
.card h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.5em;
}

実用例

/* フッター内のリンクスタイル */
.footer a {
  color: #ccc;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: white;
}

/* サイドバー内のウィジェットスタイル */
.sidebar .widget {
  background: white;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sidebar .widget h4 {
  color: #333;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.sidebar .widget ul {
  list-style: none;
  padding: 0;
}

.sidebar .widget li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.sidebar .widget li:last-child {
  border-bottom: none;
}

子セレクタ（>）

直接の子要素のみ指定

/* .navの直接の子要素であるli要素のみ */
.nav > li {
  position: relative;
}

/* .cardの直接の子要素であるp要素のみ */
.card > p {
  margin-bottom: 0;
}

/* .menuの直接の子要素であるa要素のみ */
.menu > a {
  display: block;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

子孫セレクタとの違い

<div class="menu">
  <a href="#">直接の子</a>
  <ul>
    <li><a href="#">孫要素</a></li>
  </ul>
</div>

/* 子孫セレクタ：両方のa要素に適用される */
.menu a {
  color: blue;
}

/* 子セレクタ：直接の子のa要素のみに適用される */
.menu > a {
  font-weight: bold;
}

隣接兄弟セレクタ（+）

直後の兄弟要素を指定

/* h2の直後にあるp要素 */
h2 + p {
  font-size: 1.1em;
  color: #666;
  margin-top: 0;
}

/* .btnの直後にある.btn要素 */
.btn + .btn {
  margin-left: 10px;
}

/* labelの直後にあるinput要素 */
label + input {
  margin-top: 5px;
  display: block;
}

実用例

/* 見出し直後の段落を強調 */
h1 + p,
h2 + p,
h3 + p {
  font-size: 1.1em;
  color: #666;
  margin-top: 10px;
}

/* フォームラベル直後の入力フィールド */
.form-group label + input,
.form-group label + textarea,
.form-group label + select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 5px;
}

/* チェックボックス直後のラベル */
input[type="checkbox"] + label {
  margin-left: 8px;
  cursor: pointer;
  user-select: none;
}

input[type="checkbox"]:checked + label {
  color: #007bff;
  font-weight: bold;
}

一般兄弟セレクタ（~）

後続の兄弟要素すべてを指定

/* h2以降のすべてのp要素 */
h2 ~ p {
  margin-left: 20px;
  color: #666;
}

/* .activeクラス以降のすべての.item要素 */
.active ~ .item {
  opacity: 0.5;
}

タブ切り替えの例

.tab-button {
  display: inline-block;
  padding: 10px 20px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  cursor: pointer;
  margin-right: 5px;
}

.tab-button.active {
  background: white;
  border-bottom-color: white;
  position: relative;
  z-index: 1;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  background: white;
}

.tab-button.active ~ .tab-content {
  display: block;
}

複数セレクタ（,）

グループ化

/* 複数の要素に同じスタイルを適用 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Arial', sans-serif;
  color: #333;
  margin-bottom: 15px;
}

/* 複数のクラスに同じスタイル */
.btn-primary,
.btn-secondary,
.btn-success {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* フォーム要素のグループ化 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

複雑な組み合わせ例

ナビゲーションメニュー

/* メインナビゲーション */
.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.main-nav > ul > li {
  position: relative;
}

.main-nav a {
  display: block;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.main-nav > ul > li > a:hover {
  background: #007bff;
  color: white;
}

/* ドロップダウンメニュー */
.main-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.main-nav li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav ul ul li {
  border-bottom: 1px solid #eee;
}

.main-nav ul ul li:last-child {
  border-bottom: none;
}

.main-nav ul ul a {
  padding: 12px 20px;
  font-size: 14px;
}

.main-nav ul ul a:hover {
  background: #f8f9fa;
  color: #007bff;
}

カード型レイアウト

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.3em;
}

.card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.card .btn {
  background: #007bff;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

.card .btn:hover {
  background: #0056b3;
}

/* 特定のカードを強調 */
.card.featured {
  border: 3px solid #ffc107;
  position: relative;
}

.card.featured::before {
  content: "FEATURED";
  position: absolute;
  top: 15px;
  right: -30px;
  background: #ffc107;
  color: #333;
  padding: 5px 40px;
  font-size: 12px;
  font-weight: bold;
  transform: rotate(45deg);
}

この章のまとめ

組み合わせセレクタを使うことで、HTML構造に基づいて柔軟にスタイルを適用できます。要素間の関係性を理解して適切なセレクタを選ぶことが、効率的なCSS設計のカギとなります。

CSSセレクタの総まとめ（一覧表）

セレクタの種類と書き方

セレクタ種類書き方例説明
要素セレクタタグ名p { }HTMLタグ名で指定
クラスセレクタ.クラス名.box { }class属性で指定
IDセレクタ#ID名#header { }id属性で指定
属性セレクタ[属性][title] { }属性の存在で指定
[属性="値"][type="text"] { }属性値の完全一致
[属性^="値"][href^="https"] { }属性値の前方一致
[属性$="値"][href$=".pdf"] { }属性値の後方一致
[属性*="値"][class*="btn"] { }属性値の部分一致
疑似クラス:疑似クラス:hover { }要素の状態で指定
:focus { }フォーカス状態
:first-child { }最初の子要素
:nth-child(n) { }n番目の子要素
疑似要素::疑似要素::before { }仮想的な要素
::after { }要素の後に挿入
::first-line { }最初の行
子孫セレクタ親 子ul li { }子孫要素を指定
子セレクタ親 > 子div > p { }直接の子要素のみ
隣接兄弟セレクタA + Bh2 + p { }直後の兄弟要素
一般兄弟セレクタA ~ Bh2 ~ p { }後続の兄弟要素すべて
複数セレクタA, Bh1, h2 { }複数要素のグループ化

セレクタの詳細度（優先順位）

セレクタ詳細度例
インラインスタイル1000style="color: red;"
ID100#header
クラス・属性・疑似クラス10.btn, [type="text"], :hover
要素・疑似要素1div, ::before

計算例：

  • div.header #nav a:hover = 1 + 10 + 100 + 1 + 10 = 122
  • .main-nav > li > a = 10 + 1 + 1 = 12
  • p = 1

実用的なセレクタ組み合わせ例

レスポンシブデザインでの活用

/* デスクトップでのナビゲーション */
.nav-menu {
  display: flex;
}

.nav-toggle {
  display: none;
}

/* タブレット・スマホでのナビゲーション */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  
  .nav-menu.active {
    display: block;
  }
  
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  
  .nav-menu li {
    border-bottom: 1px solid #eee;
  }
  
  .nav-menu a {
    display: block;
    padding: 15px 20px;
  }
}

フォームバリデーションの視覚化

/* 基本の入力フィールド */
.form-group input {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* フォーカス時 */
.form-group input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

/* バリデーション成功 */
.form-group input:valid:not(:placeholder-shown) {
  border-color: #28a745;
  background-image: url('check-icon.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* バリデーション失敗 */
.form-group input:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
  background-image: url('error-icon.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* エラーメッセージ */
.form-group input:invalid:not(:placeholder-shown) + .error-message {
  display: block;
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
}

.error-message {
  display: none;
}

セレクタ選択のベストプラクティス

効率的なセレクタの書き方

/* 良い例：シンプルで効率的 */
.header { }
.nav-item { }
.btn-primary { }

/* 避けるべき例：複雑すぎる */
div.header ul.nav li.nav-item a.nav-link:hover { }

保守性の高いセレクタ

/* 良い例：意味のあるクラス名 */
.article-header { }
.article-content { }
.article-footer { }

/* 悪い例：見た目に依存したクラス名 */
.red-text { }
.big-font { }
.left-margin { }

モジュラーなCSS設計

/* ベースコンポーネント */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* バリエーション */
.btn--primary {
  background: #007bff;
  color: white;
}

.btn--secondary {
  background: #6c757d;
  color: white;
}

/* サイズ修飾子 */
.btn--large {
  padding: 15px 30px;
  font-size: 18px;
}

.btn--small {
  padding: 5px 10px;
  font-size: 12px;
}

/* 状態 */
.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

よくある質問と回答

Q: クラスとIDはどう使い分けるべき？

A: 基本的な使い分けは以下の通りです：

クラスを使う場合：

  • 再利用したいスタイルの場合
  • 複数の要素に同じスタイルを適用
  • コンポーネントとして設計する場合

IDを使う場合：

  • ページ内で一意の要素
  • JavaScriptで特定の要素を操作
  • アンカーリンクの目標
/* 良い使い分けの例 */
#header { /* ページのヘッダー（1つだけ） */
  position: fixed;
  top: 0;
  width: 100%;
}

.btn { /* 再利用可能なボタン */
  padding: 10px 20px;
  border-radius: 4px;
}

Q: セレクタの優先順位が複雑でわからない

A: セレクタの詳細度を理解しましょう：

/* 詳細度の計算例 */
p { }                    /* 1点 */
.text { }               /* 10点 */
#header { }             /* 100点 */
p.text { }              /* 11点（1+10） */
#header .text { }       /* 110点（100+10） */
div#header .nav .text { } /* 122点（1+100+10+10+1） */

解決策：

  • !importantは最後の手段
  • 詳細度を上げすぎない
  • クラス中心の設計を心がける

Q: 疑似クラスと疑似要素の違いは？

A: 基本的な違いは以下の通りです：

疑似クラス（:）：

  • 要素の状態を表す
  • 実在する要素の特定の状態
a:hover { }      /* リンクのホバー状態 */
input:focus { }  /* 入力フィールドのフォーカス状態 */
li:first-child { } /* 最初のli要素 */

疑似要素（::）：

  • 仮想的な要素を作成
  • HTMLには存在しない部分
p::before { }     /* 段落の前に仮想要素を挿入 */
p::after { }      /* 段落の後に仮想要素を挿入 */
p::first-line { } /* 段落の最初の行 */

Q: モダンなCSS設計手法は？

A: 現在推奨される設計手法：

BEM記法（Block Element Modifier）：

/* Block */
.card { }

/* Element */
.card__title { }
.card__content { }
.card__button { }

/* Modifier */
.card--featured { }
.card__button--primary { }

CSS Modules：

/* styles.module.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.title {
  font-size: 2em;
  color: #333;
}

CSS-in-JS：

const Button = styled.button`
  padding: 10px 20px;
  background: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  border: none;
  border-radius: 4px;
`;

まとめ

CSSで使う「タグ」とは、厳密には要素名を指定する要素セレクタや、クラス・ID・属性・疑似クラスなど様々なセレクタのことです。

基本のセレクタ

  • p, div, h1 … HTMLタグ名をそのまま指定
  • .クラス名 … 複数の要素に使える便利なクラス
  • #ID名 … 1つだけにスタイルを当てるID
  • [属性] … 属性に基づく指定
  • :hover, ::before … 状態や仮想要素のスタイル

組み合わせセレクタ

  • 親 子 … 子孫要素の指定
  • 親 > 子 … 直接の子要素のみ
  • A + B … 隣接する兄弟要素
  • A ~ B … 後続の兄弟要素

効果的な使い方のポイント

  1. 意味のある名前を付ける
  2. 再利用性を考慮する
  3. 詳細度をコントロールする
  4. 保守性を重視する
  5. パフォーマンスを意識する

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました