インライン修飾機能：elements.style

２つの画像を参照してください。

①をお手本にしてb要素を付け加えたいのですが、Bのようにうまいこといきません。
どのようにすればb要素を追加することができるのでしょうか。

①

②

ここまでがCSSStyleでやるやり方

下記はHtml欄でやる方法←当方、このやり方は完全に理解していなくて途中の段階

③

Htmlの黄色枠に作者がCSS欄で記述したものを入力すればいいのでしょうか。もし、そうなら間違っているのではなく、やり方に２つの方法があると思われますが。

maisumakun

2022/04/04 06:25

> Htmlの黄色枠に作者がCSS欄で記述したものを入力すればいいのでしょうか。やってみてどうなったのですか？

Lhankor_Mhy

2022/04/04 06:29

『Htmlの黄色枠に作者がCSS欄で記述したものを入力すればいいのでしょうか。』とのことですが、はい、そうです。という回答でかまいませんか？もし、この回答で不足であれば、何を知りたいのかもう少し詳しく書いてください。

nozatodogers

2022/04/04 13:04

@Lhankor_Mhy 事の発端は下記のブログからです。 Chrome DevTools を使ってみよう　（10）　HTMLのインライン修飾機能：elements.style https://atstudiota.exblog.jp/27046224/ ブログを手本、①の画像にしたいのですが、結局②の画像のようになってしまいました。ｂの要素が活かしきれていないみたいです。このことを他のサイトで問い合わせをしたら、ＣＳＳをいじるのではなくＨｔｍｌをいじるべきだと回答をいただきました。③の画像は途中の段階です。黄色の箇所に入力するコードは ①の箇所で入力したコードでいいのですか？それに対する回答は＞はい、そうです。ということは下記は私の判断ですが、やり方が２つあると解釈しました。もし、③の方法でないとだめであれば、その理由あるいは①の方法でないとだめな理由を教えてください。

maisumakun

2022/04/04 22:25

> やり方が２つあると解釈しました。単に表記の違いで、結果は変わりません。

Lhankor_Mhy

2022/04/05 00:30

つまり、CSSは全く関係なく、h2要素をb要素に変えたい、ということですか？

nozatodogers

2022/04/05 13:10

@Lhankor_Mhy >CSSは全く関係なく ①がお手本でCSSにredを入力したら、②のようになって①のように青入り反転したb要素が出現しないのはなぜか＞h2要素をb要素に変えたいもし、そうならどこに何を入力したらいいのでしょうか

maisumakun

2022/04/05 13:19

（teratailの不具合という面もありますが）画像が拡大できず文字が見づらいです。どんなHTMLがあって、どこに何を打ち込んだかを「テキストで」書いていただけないでしょうか。

nozatodogers

2022/04/06 01:18

>（teratailの不具合という面もありますが）画像が拡大できず文字が見づらいです。 GyazoのURLの方がかはるかに見やすいです。クリックすれば大きくなります。 ①　https://gyazo.com/e3672acf924bd65993f42cc0b1a5340b ②　https://gyazo.com/2babf574a6e946abe89ce21a41ca0866 ③　https://gyazo.com/c535470c636c1cde5f1a507eeee821b8

Lhankor_Mhy

2022/04/06 08:05

過去の質問をのぞいてみましたが、回答がついても放置する方のようですね。自覚してフリーライダーをしているならばともかく、無自覚であればきちんと対応をすることをおすすめします。

行動規範の内容に同意します

回答1件

ベストアンサー

①がお手本でCSSにredを入力したら、②のようになって①のように青入り反転したb要素が出現しないのはなぜか

　どうやら勘違いをされているようです。

　HTMLには「要素」と「属性」というものがあります。

属性 | HTML を始めよう - ウェブ開発を学ぶ | MDN

　<b style="color:red">...</b>の場合、bが要素の名前で、styleが属性の名前です。

　そして、Devtoolsでelement.styleを変更することは、styleという名前の属性を変更することになります。要素は変更しません。

　ご提示いただいたページを引用しますね。

　よく見ると、ひとつ目の画像とふたつ目の画像が指している要素のテキスト内容が違うことに気づくはずです。つまり、もともとこれは違う要素なんです。

　「h2要素のelement.styleを変更した。その後にb要素のelement.styleを変更した」という操作を、「element.styleを変更したらh2がbに変わった」と勘違いをされたのが、今回の質問の原因です。

投稿2022/04/06 01:19

編集2022/04/06 01:24

Lhankor_Mhy

総合スコア36134

nozatodogers

2022/04/07 02:30

①と②の関係は理解できました。作者はelementry styleを説明するのに異なる箇所を例に出して説明しています。当方が同じ箇所を説明しているのと勘違いしました。 ③は他掲示板で私の間違った解釈をして下記画像URLのようにしたいのか解釈されただけで、当方が混乱させたみたいです。 https://gyazo.com/2a8c533f12374739fea32e65c577d656 PS:URLをクリックすると画像が大きくなります。上記でただしければ、当質問をクローズさせてください。