CSSセレクタと文字スタイル入門

CSSで最初につまずきやすいのが、「どのHTMLにスタイルを当てるか」です。ここを理解すると、文字色、中央寄せ、リンクの下線調整などが一気に扱いやすくなります。

セレクタの使い分け

迷ったら、まずclassを使います。タグ指定はページ全体に効きやすく、idは1ページに1回だけ使う前提なので、後から流用しにくいことがあります。

よく使う基本コード

p {
  color: #333;
}

.notice {
  color: #d33;
  font-weight: 700;
}

#main-message {
  text-align: center;
}

中央寄せはtext-alignで始める

文章やインライン要素を中央に寄せるなら、まず text-align: center; を使います。ボックスそのものを中央寄せする margin: 0 auto; とは役割が違います。

.text-center {
  text-align: center;
}

リンク下線を消すときの注意

text-decoration: none; でリンク下線は消せます。ただし、リンクだと分かりにくくなるので、色、ホバー、フォーカス表示をセットで考えます。

a {
  color: #0b63ce;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

まとめて使う例

<p class="notice">公開前にアップロード先を確認してください。</p>
<p id="main-message">更新が完了しました。</p>
<p class="text-center"><a href="/">トップへ戻る</a></p>

CSSを書いたのに効かない時の確認順

CSSの書き方が合っていても、HTML側のclass名や読み込みパスが違うと反映されません。公開中サイトでは、次の順で確認すると切り分けやすくなります。

1. HTMLに書いた class="notice" と、CSSの .notice の名前が完全に一致しているか見る。
2. CSSファイルを保存した場所と、HTMLの <link rel="stylesheet"> のパスが合っているか見る。
3. ブラウザでCSSファイルのURLを直接開き、変更した内容が表示されるか見る。
4. 古い表示のままなら、キャッシュ、FTPのアップロード先、更新日時を確認する。

公開後に古いCSSが出る時は、CSSが反映されない時の確認順番 と FTP反映されない確認メモメーカー へ進んでください。

AIに相談する時のメモ

AIへ聞く時は、ページ全体ではなく、関係するHTML、CSS、起きている症状だけを貼ると原因を見つけやすくなります。サーバーID、FTPパスワード、管理画面URL、APIキーは貼らないでください。

CSSのclass指定について相談します。

やりたいこと:
対象ページ:
HTML側の該当部分:
CSS側の該当部分:
今起きていること:
確認済みのこと:
- class名の一致:
- CSSファイルの読み込みパス:
- CSSファイルの直接URL:
- ブラウザキャッシュ:

秘密情報は貼っていません。

次に見るページ

• CSSが反映されない時の確認順番
• 画像パスが違って表示されない時の確認
• Web公開トラブル症状別レスキュー
• AIに聞く前に状況を整理するツール一覧