DevTools Styles欄の基本的な事
貼付画像を参照してください
③とAの関係ですが、Aの消し線２つですが、なぜ必要ですか。ｈ２は作者の意図から必要であることは
理解できます。消し線なんか設けずに③の箇所でプロパティの追加あるいは数値の調整ができると思うのですが
尚、回答はテキストでお願いします。ＵＲＬだけを貼り付けられてもかえって混乱します。
0
1Answer
styleのプロパティが打ち消し線になっているのは（優先順位が低いなどの理由で）適用されていないことを表しています。
今回の場合、<h2 />のstyle(font-size: 100%; font-weight: 400)がclass指定の.post-title(font-size: 180%; font-weight: 700)より優先度が低いため、font-size、font-weightが適用されません(=打ち消し線)。
打ち消し線はあくまでDevTools Styles欄の表現方法であって、作成者が意図的に消し線を入れた状態のスタイルに設定したわけではありません。（できません）
<h2 />のstyleを設定せずに.post-titleのstyleのみを設定すればいいとおっしゃいますが、それでは再利用しにくい構造になります。
クラスを付与しないで<h2 />だけを使いたいこともありますし、一部だけ上書きしたいこともあります。
例えば.boldクラス(font-weight: 900)をあるとします。
h2に.boldクラスを付与すると、font-sizeはそのままでfont-weightだけ上書きすることもできます。
それぞれの実行結果はこうなります。
<h2 /> ⇨ font-size: 100%; font-weight: 400;
<h2 class="bold" /> ⇨ font-size: 100%; font-weight: 900;
<h2 class="post-title" /> ⇨ font-size: 180%; font-weight: 700;
また、今回適用したのは<h2 />ですが、<h1 />や<input />なども同じstyleを共用しています。
Aからstyleを削除すると多くの箇所に影響するではないでしょうか。
最後に少しのアドバイスですが、タイトルの「DevTools Styles欄の基本的な事」では何の質問か分かりませんし、「基本的な事」であればなぜ質問するのかとまで思いました。
例えば「Chrome DevTools Styles欄の打ち消し線の意図が分からない」「Chrome DevTools Styles欄の打ち消し線について」などにしていただけると内容を連想しやすいタイトルになると思います。
2Like
Comments
@nishinagahori888
Questioner
右側のh2の件ですが、左側のhtmlがh2なので、他のh1やh3に変更できないのはDevToolの仕様と解釈しました。
③とAの違いですが、sizeとweightの数値が違います。打消し線まで使って違う数値
を使うならはじめからAなどはいらないと思います。変更したい場合は③にチェックをいれて変更すればいいと思うのですが、いかがでしょうか- Aのstyleはこのように定義しています。
h1, h2, h3, ... {
font-size: 100%;
font-weight: 400;
}
これはh2に限らずh1やh3などにも影響する記述方式です。
左側のHTML②で<h2 />を指しているので、DevToolsも親切にh2以外の要素を浅い色で表現していますが、他のh1やh3を変更しないという意味ではありません。
もし左側のHTML部に<h1 />や<h3 />がありましたら一度確認してみてはいかがでしょうか。
他の質問で他の回答者様もおっしゃっていると思いますが、教えられたURLや検索のキーワードを質問と関係ないと一蹴せずにHTML、CSSの基礎知識を勉強した方がいいかと思います。
「打消し線まで使って違う数値を使うならはじめからAなどはいらないと思います。」
こちらについては回答の方に説明済みです。まず打消し線を「使う」という前提が間違っています。
「変更したい場合は③にチェックをいれて変更すればいい」というのは、誰を対象におっしゃっていますか。
サイトを利用するユーザー全員にDevToolsを開いて手動で修正することを要求するでしょうか。
DevToolsでの変更は質問者様のPCでしか変わらず、実際にサイトに反映されないことを理解されていますか。 @nishinagahori888
Questioner
再度読み返しました。ほぼ、理解できました。
・優先順位
・再利用する場合には必要
ただ、打消し線の数値は作者が作成したのではなく、Chromeの方でランダムに生成したものと解釈してよろしいでしょうか- 打消し線の「数値」とは？
styleのことでしたら③とAのどちらでも作成者が指定したものです。
Chrome DevToolsの方はランダムではなく、ちゃんと優先順位に基づいて、
優先順位がより低くて適用されていない方を「打ち消し線」という形式で表現しました。 @nishinagahori888
Questioner
本件、理解できました。１から説明していただいて本当にありがとうございました。