例えば、 p { color: red; } というCSSで、 内部の他の要素（ など）の color プロパティの値が自動的に red になるのがCSSの「継承」です。 この「継承」は、ある要素のあるプロパティ（上の例で言うと の color プロパティ）に値が指定されなかったときに働きます。 リンク Yahoo という状況では、 の color プロパティに値が指定されていなければ の color プロパティの値を継承します。 ところが、 はユーザーエージェントスタイルシートで color プロパティに値が指定されています。 そのため、 の color プロパティの値は の color プロパティの値を継承しません。 ページ作成者スタイルシート（カスケード順３）で a { color: inherit; } を指定することによって、 「ユーザーエージェントスタイルシート（カスケード順１）で指定された値」ではなく、「 から継承した値」という挙動に変わります。 CSSの「カスケード順」と「継承」は別の機能ですが（「詳細度」も）、その役割の範囲が重なっているので難しいですね……
難しいテーマでも挫折させないという姿勢が、教育者として素晴らしいですね。
めっちゃよくわかりました🤔 多くの業者に渡りすぎてぐちゃぐちゃになったcssや、ディベロッパーツールでも効かないときなど、なんでやの？と思ってました。
１）スコアリングは合計だと思ってたのに、id1コとclass11コで、idが勝つんですね〜！
２）initial、inherid、all:unset、他の人のcssを見てもよくわからなかったところがやっとわかりました😭
23分で今までの不明点がほぼほぼ流れていき、これ以上はわからなくてもいいかもという境界線も見えました🥰
ありがとうございました🙏🙏🙏
めちゃめちゃわかりやすい！！
わからなくても何度も見れば理解できます！ありがとうございます。
正直理解できなかったところあるけど、最後の挫折したら意味ないっていう言葉に救われました！！
今、勉強中です！
復習や、予習で、通学中や家事中にいつも観ています。
とてもわかりやすいです。ありがとうございます😊
未経験転職を目指して動画をいろいろ探してきて、しまぶーさんの動画にようやく巡り合えました。
私（プログラミング初心者）が知りたいことを私でも理解できるように纏めてくれていて、非常に助かっています。
微力ながら、しまぶーのIT大学をみんなにおすすめしていきたいと思います。応援しています。
未経験からももちろん可能なので一緒に頑張りましょう！理論をしっかり抑えることって重要だと思っていて、そこを丁寧に解説したいと思っています。逆にCSSのプロパティとかは丁寧に教えることではなく各々が調べることだと考えています。（すべてを解説するのは逆に問題解決力の向上に繋がらないので）
しかし、オススメしていただけるのは嬉しすぎます。私も見てくださる人が増えれば増えるほどやる気も出ます！今後も頑張って学びになる動画を出すので、また励みになるコメント等いただけると嬉しいです！
もくじや次回予告もあって非常に分かりやすいです！
説明が上手い！
分かりやすい！
難しかったけど、すぐには自分のものに出来ないので、頭の片隅に置いて置きます。
分かりやすくてモチベーションがすごく上がります！！
とてもためになる動画をありがとうございます😊 カスケード、詳細度というのは、すごくキモになる知識のように見えるのに、何故かググってもあまり出てこない情報なので、本当にありがたいです！別の方の返信で言われていた、「フロントエンドの知識は頻繁にアップデートが必要なので、教材にすると古くなってしまうからやらない」というお考えに、エンジニア魂を感じてとても尊敬いたしました…。
わかりやすい！
JavaScriptも是非追加して欲しいです。
コメントありがとうございますー！CSS基礎は7〜8回で終わるのですが、その後はCSS実践とJavaScriptを同時に出していく予定です！
ありがとうございます。
おもしろいです。！！
8:00 わざと間違えて復習させようとしてるとこが頭いい
マジで助かる！
むぎったん 本物で草
この先、教材とかオンラインサロンとか作ってくれたら入ります！
ひえー！！それは私への信頼度が高すぎでは･･･（嬉しいです。ありがとうございます🤣）
とりあえず教材・情報商材系はやる予定はないですねー。そもそも私が得意としているフロントエンドなどの領域は日進月歩で進化するので頻繁なアップデートが必要なんですよね。「教材でお金払ったのに古い技術を教えられた・・・」ということになりかねないので、そこは手を出したくないなーと。
オンラインサロンは可能性としてはちょっとはありますが、サロンの会員と非会員で学びに差は出したくないです。このプログラミング講座は会員限定とかは一切やる予定はありません。例えば、プログラミング勉強用のカフェとかコワーキングスペースを作って、会員だったらそこが使えるとか、なんかそういう事業としておもしろいことやりたいですね！
おもしろい質問ありがとうございました😊
継承難しい。一度聞き流しておきます;-;
久々に戻ってきたら理解できるようになっていたのはプログラミングあるあるですね😂
えぐいほどわかりやすいです！
えぐいほど・・・笑
嬉しいコメントありがとうございます😆
カスケード詳細度継承度
●カスケード
CSSの順序のこと
同じ宣言でも、後に書かれたコードが優先
カスケードの概念の理解は難しい
解説)
同じ宣言でも、数値が大きい方が優先
author→ディベロッパー
・!importantで無理矢理CSSを当てる
・アニメーションズ
トランズジションは難しい
●詳細度→id>タイトル>何も無し
インラインスタイル→1000
最も優先
＊最終判断は、詳細度の合計
●継承度
親要素から子要素へ
プロパティ値を引き継ぐ
ex)
ユニバーサルプロパティ値
・inherit
・initial
・unset
・all:unsetで
jsでは１番目を[0]と表しますが、htmlやcssでは１番目=[1]なんですね。ややこしい・・・
しまぶーさん、お疲れ様です！
CSSってすごいですね(**)
勉強させてもらってます！
CSSの復習を兼ね合わせて見てます！意外と知らないことがあり助かってます笑。
しまぶーさんは動画冒頭が少なくテンポ良く本題に入っていることに気付きました。
この方が視聴者が動画を閉じない効果がありそうです。真似させていただきます笑。
質問させていただきます。しまぶーさんは動画を撮る際に台本などを書いていますか？
また、書いているならどのような感じで書いているのか、簡単にでもいいので教えていただきたいです。
ありがとうございます！テンポ良くは常に意識しています！😁
質問の回答ですが台本はありません。動画にあるように目次っぽものは書いていますが、それ以外はアドリブでやっています。早く撮影できるというメリットはありますが、その反面、動画撮影後に「うわー、もっとこうやって話せばよかった・・・」と思うことは何度もあります😅笑
めっちゃ助かっています！自社開発エンジニア転職が決まったら報告させてください！
報告まってますよー😆
待ってました！
参考にさせてもらっています。
これが無料なんて太っ腹すぎます
ありがとうございます！
JavaScript講座は更に有益かもしれません！✨
わかりやすい動画をありがとうございます。
ひとつ質問があります。
継承の説明時にli{ color: red; }でデフォルト部分が青色のままですが、
カスケードの優先度的にデフォルト部分は優先度が一番低いので、yahooの部分も赤くなるはずではないのですか？
例えば、 p { color: red; } というCSSで、 内部の他の要素（ など）の color プロパティの値が自動的に red になるのがCSSの「継承」です。
この「継承」は、ある要素のあるプロパティ（上の例で言うと の color プロパティ）に値が指定されなかったときに働きます。
リンク Yahoo という状況では、 の color プロパティに値が指定されていなければ の color プロパティの値を継承します。
ところが、 はユーザーエージェントスタイルシートで color プロパティに値が指定されています。
そのため、 の color プロパティの値は の color プロパティの値を継承しません。
ページ作成者スタイルシート（カスケード順３）で a { color: inherit; } を指定することによって、
「ユーザーエージェントスタイルシート（カスケード順１）で指定された値」ではなく、「 から継承した値」という挙動に変わります。
CSSの「カスケード順」と「継承」は別の機能ですが（「詳細度」も）、その役割の範囲が重なっているので難しいですね……
ｃｓｓ#４で class属性にa b c d とスペースが入っているのはどういう意味でしょうか。
質問ありがとうございます😊
classは同じHTML要素に複数定義することができて、複数定義するときはスペース区切りで書くことになります。なので今回は、同じHTMLにたa b c dとたくさんのclassを定義しているということになります！
inherit
initial
unset
の場合は、initialの前にinheritが当てられているので
unsetではinheritが継承されるかと思いますが
21:20のall:unsetはinitialにリセットされるという考え方でよろしいでしょうか？
もし、更に1つ前にinheritが当てられていれば
それが継承されるという事でしょうか？
打ったコードを更新できるボタンってありますか？
MacならコマンドRでできますよ〜
コマンドとRを同時に押すだけですか？
ジーニスさん、ありがとうございます！🙏
そうです！Chromeとかのブラウザで「コマンド+R」で更新されると思いますができましたか？
質問です。Chromeの拡張ツールって何使ってますか？
たくさん入れていて説明できないほどですが、
・Octotree（GitHubが便利になります）
・Session Buddy（タブとかを保存できます）
・Google 翻訳（高速で翻訳できるように）
・FireShot（画面全体スクリーンショット用）
・Feedly Board（あとで読む・保存用。pocket的使い方）
とかはよく使いますね！
all unsetが反映されなく、要因がわかりません、、どうしてですか？
その情報だけだと特定が難しいですね😅😅
Chrome DevToolsでどのCSSが当たっているかを確認していただきたいです！Chrome DevToolsの使い方は下記参照です！
ua-cam.com/video/awRkFcv51r4/v-deo.html
自分が書くコードをブラウザに表示するにはどうすればよろしいでしょうか？
出来ればサンプルも用意してほしいというのは言い過ぎでしょうか.... 追うの大変だけどcoolです。
いや、自分でいちいち打った方が覚えられるし、うん。
自分で解決していて笑いました🤣
実はCSS基礎のあとでHTMLとCSSレイアウトをやる予定なのですが、そちらでは実際にサンプルを出します。むしろサンプルをレイアウト一緒にしていく感じなので、より深く学べるのではないかと考えています！
今回も丁寧な解説ありがとうございますm(__)m
今までCSSが効かない事が多々あり、理由もわからなかったんですが恐らくカスケードや詳細度、継承のせいだったんでしょうね( ;∀;)inheritやinitial、unset等初めて聞き勉強になりました。
CSSスタイルのリセットでall: unset;を使用とありましたが、親要素に継承されるcssが当たっている場合はリセットされず継承されてしまうんでしょうか？継承させずにスタイルリセットするのならall: initialとかも使えますか？
次回のデベロッパーツールの使い方に関しても私はあまり使いこなせていないので楽しみにしています。
javascript講座も出たらすぐ観に来ますね！笑
ありがとうございます！CSS効かないときはだいたい原因がこれらのどれかですね（笑）
> CSSスタイルのリセットでall: unset;を使用とありましたが、親要素に継承されるcssが当たっている場合はリセットされず継承されてしまうんでしょうか？
はい、継承されます。unsetは親に継承される値がある場合はinheritと同じ挙動になります。
> 継承させずにスタイルリセットするのならall: initialとかも使えますか？
使えます。すべてを無に帰したいときはall: initialでいけます。今見返すと動画の説明が微妙だ(^O^;) みんなのためになる質問ありがとうございます。
ちなみにallプロパティにもカスケードや詳細度の概念が優先されるので気をつけてください！
Chrome DevToolsの動画も撮影完了したので、近々投稿しますね。色んなTipsを紹介しているので学びになるかと思います！JavaScriptも急ぎます🏃
難しい(-_-;)
しまぶーさんに金払って1ヶ月マンツーマンしてもらいたい。でもそんな金はない。
ずっとマンツーマンは難しいですがサロン内には質問できる環境はあるのでご検討くださいー！😊
it-kingdom.com/
ちょっと早口かな
しまぶーさん、お疲れ様です！
CSSってすごいですね(**)
勉強させてもらってます！
CSSで自由にデザインできるようになると楽しいですよねー😊
自由度を高められるようスキルアップです✌️