visibility_off現象
- CSSで指定したフォントファミリーや文字サイズがページに適用されない
- 見出しや本文のサイズだけ変わらず、意図したタイポグラフィにならない
help_outline原因
- CSSファイルの読み込み順が後ろになっている
<link>タグやインラインスタイルの順序で、後から読み込まれたスタイルに上書きされている可能性があります。- セレクタの優先度（Specificity）が不足している
- 同じ要素に対して、より強力な別のスタイル指定（例:
#id h2など）が効いていて、意図した指定が無効化されています。 - ブラウザのデフォルトスタイルや他の外部ライブラリに上書きされている
- BootstrapなどのCSSフレームワークや、WordPressテーマで予め定義されているスタイルが優先されることがあります。
build対策・コード例
CSSの読み込み順を確認・調整
リセットCSSや外部ライブラリを先に読み込み、最後に必ず自作の`style.css`が読み込まれるように順序を調整します。
<!-- 古い順に読み込んで最後に自分のstyle.cssを読み込む -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="framework.css">
<link rel="stylesheet" href="css/style.css">セレクタを具体的に書く
セレクタをより具体的に記述することで、スタイルの優先度を高めることができます。
/* 例：より詳細なセレクタで優先度を高める */
header h1.site-title {
font-family: "Noto Sans JP", sans-serif;
font-size: 2.5rem;
}必要なら !important を一時的に使う
どうしてもスタイルが上書きできない場合の最終手段です。多用すると管理が大変になるため、デバッグ目的などでの一時的な利用に留めましょう。
p {
font-size: 1rem !important;
}bug_reportデバッグ方法
開発者ツールの「Styles」パネルで調べる
Chromeなどの開発者ツール（F12キー）で対象要素を選択し、「Styles」または「スタイル」パネルを確認します。適用中のルールの一覧が表示され、どのスタイルに上書きされているか（打ち消し線が引かれているプロパティ）を探します。
一時的にインラインスタイルで試す
HTMLタグに直接スタイルを書き込むと、最優先で適用されるため、確実に反映されるかを確認できます。
<p style="font-size: 18px;">テスト用の文字サイズ</p>school応用ポイント：Webフォントの読み込み
Google Fontsなど外部フォントを使う場合は、<link>タグを<head>内でCSSファイルより先に読み込むのが推奨されます。また、`font-display: swap;`を指定することで、フォントの読み込み中にテキストが非表示になるのを防ぎ、表示速度の体感を向上させます。
/* @import ではなく link タグで先読み推奨 */
@font-face {
font-family: "MyFont";
src: url("fonts/MyFont.woff2") format("woff2");
font-display: swap;
}チェックリスト
✅ style.css が必ず他のCSSより後に読み込まれている
✅ セレクタが意図した要素に正しく届いているか開発者ツールで確認
✅ 外部フォントは<head>内で先に読み込まれ、font-display が設定されている
✅ 必要なら一時的に !important を使って優先度を調整した