Тёмный

【CSS #4】基礎からちゃんと学ぶ CSS 入門!スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因!【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 

しまぶーのIT大学
Подписаться 119 тыс.
Просмотров 82 тыс.
50% 1

Опубликовано:

 

17 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 61   
@佐々木愛-c8z
@佐々木愛-c8z Год назад
めっちゃよくわかりました🤔 多くの業者に渡りすぎてぐちゃぐちゃになったcssや、ディベロッパーツールでも効かないときなど、なんでやの?と思ってました。 1)スコアリングは合計だと思ってたのに、id1コとclass11コで、idが勝つんですね〜! 2)initial、inherid、all:unset、他の人のcssを見てもよくわからなかったところがやっとわかりました😭 23分で今までの不明点がほぼほぼ流れていき、これ以上はわからなくてもいいかもという境界線も見えました🥰 ありがとうございました🙏🙏🙏
@syunsuke
@syunsuke 2 года назад
継承難しい。一度聞き流しておきます;-;
@shimabu_it
@shimabu_it 2 года назад
久々に戻ってきたら理解できるようになっていたのはプログラミングあるあるですね😂
@eeeg
@eeeg 3 года назад
正直理解できなかったところあるけど、最後の挫折したら意味ないっていう言葉に救われました!!
@てつぺい-n6o
@てつぺい-n6o 3 года назад
ありがとうございます。
@casettejp
@casettejp 3 года назад
難しいテーマでも挫折させないという姿勢が、教育者として素晴らしいですね。
@slaimu071201
@slaimu071201 2 года назад
カスケード詳細度継承度 ●カスケード  CSSの順序のこと  同じ宣言でも、後に書かれたコードが優先  カスケードの概念の理解は難しい 解説) 同じ宣言でも、数値が大きい方が優先 author→ディベロッパー ・!importantで無理矢理CSSを当てる ・アニメーションズ トランズジションは難しい ●詳細度→id>タイトル>何も無し インラインスタイル→1000           最も優先 *最終判断は、詳細度の合計 ●継承度 親要素から子要素へ プロパティ値を引き継ぐ ex) ユニバーサルプロパティ値 ・inherit ・initial ・unset ・all:unsetで
@宇井広紳
@宇井広紳 3 года назад
おもしろいです。!!
@shingotakano8534
@shingotakano8534 3 года назад
めちゃめちゃわかりやすい!! わからなくても何度も見れば理解できます!ありがとうございます。
@mi3124
@mi3124 4 года назад
未経験転職を目指して動画をいろいろ探してきて、しまぶーさんの動画にようやく巡り合えました。 私(プログラミング初心者)が知りたいことを私でも理解できるように纏めてくれていて、非常に助かっています。 微力ながら、しまぶーのIT大学をみんなにおすすめしていきたいと思います。応援しています。
@shimabu_it
@shimabu_it 4 года назад
未経験からももちろん可能なので一緒に頑張りましょう!理論をしっかり抑えることって重要だと思っていて、そこを丁寧に解説したいと思っています。逆にCSSのプロパティとかは丁寧に教えることではなく各々が調べることだと考えています。(すべてを解説するのは逆に問題解決力の向上に繋がらないので) しかし、オススメしていただけるのは嬉しすぎます。私も見てくださる人が増えれば増えるほどやる気も出ます!今後も頑張って学びになる動画を出すので、また励みになるコメント等いただけると嬉しいです!
@遠藤将平
@遠藤将平 3 года назад
わかりやすい動画をありがとうございます。 ひとつ質問があります。 継承の説明時にli{ color: red; }でデフォルト部分が青色のままですが、 カスケードの優先度的にデフォルト部分は優先度が一番低いので、yahooの部分も赤くなるはずではないのですか?
@cat-jz7ob
@cat-jz7ob 2 года назад
例えば、 p { color: red; } というCSSで、 内部の他の要素( など)の color プロパティの値が自動的に red になるのがCSSの「継承」です。 この「継承」は、ある要素のあるプロパティ(上の例で言うと の color プロパティ)に値が指定されなかったときに働きます。 リンク Yahoo という状況では、 の color プロパティに値が指定されていなければ の color プロパティの値を継承します。 ところが、 はユーザーエージェントスタイルシートで color プロパティに値が指定されています。 そのため、 の color プロパティの値は の color プロパティの値を継承しません。 ページ作成者スタイルシート(カスケード順3)で a { color: inherit; } を指定することによって、 「ユーザーエージェントスタイルシート(カスケード順1)で指定された値」ではなく、「 から継承した値」という挙動に変わります。 CSSの「カスケード順」と「継承」は別の機能ですが(「詳細度」も)、その役割の範囲が重なっているので難しいですね……
@maiko.s_art
@maiko.s_art 3 года назад
今、勉強中です! 復習や、予習で、通学中や家事中にいつも観ています。 とてもわかりやすいです。ありがとうございます😊
@そーり-u1p
@そーり-u1p 4 года назад
all unsetが反映されなく、要因がわかりません、、どうしてですか?
@shimabu_it
@shimabu_it 4 года назад
その情報だけだと特定が難しいですね😅😅 Chrome DevToolsでどのCSSが当たっているかを確認していただきたいです!Chrome DevToolsの使い方は下記参照です! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-awRkFcv51r4.html
@tokumeiryo
@tokumeiryo 4 года назад
説明が上手い! 分かりやすい! 難しかったけど、すぐには自分のものに出来ないので、頭の片隅に置いて置きます。
@meimei503
@meimei503 4 года назад
inherit initial unset の場合は、initialの前にinheritが当てられているので unsetではinheritが継承されるかと思いますが 21:20のall:unsetはinitialにリセットされるという考え方でよろしいでしょうか? もし、更に1つ前にinheritが当てられていれば それが継承されるという事でしょうか?
@ka-ml3ve
@ka-ml3ve 4 года назад
もくじや次回予告もあって非常に分かりやすいです!
@kyoto-dreamcometrue
@kyoto-dreamcometrue 4 года назад
css#4で class属性にa b c d とスペースが入っているのはどういう意味でしょうか。
@shimabu_it
@shimabu_it 4 года назад
質問ありがとうございます😊 classは同じHTML要素に複数定義することができて、複数定義するときはスペース区切りで書くことになります。なので今回は、同じHTMLにたa b c dとたくさんのclassを定義しているということになります!
@nn2941
@nn2941 3 года назад
jsでは1番目を[0]と表しますが、htmlやcssでは1番目=[1]なんですね。ややこしい・・・
@RintaroHikasa
@RintaroHikasa 4 года назад
自分が書くコードをブラウザに表示するにはどうすればよろしいでしょうか?
@minamoto3700
@minamoto3700 3 года назад
8:00 わざと間違えて復習させようとしてるとこが頭いい
@佐々木巧-v4i
@佐々木巧-v4i 4 года назад
分かりやすくてモチベーションがすごく上がります!!
@clarify9283
@clarify9283 4 года назад
打ったコードを更新できるボタンってありますか?
@ジーニスさん
@ジーニスさん 4 года назад
MacならコマンドRでできますよ〜
@clarify9283
@clarify9283 4 года назад
コマンドとRを同時に押すだけですか?
@shimabu_it
@shimabu_it 4 года назад
ジーニスさん、ありがとうございます!🙏 そうです!Chromeとかのブラウザで「コマンド+R」で更新されると思いますができましたか?
@モロタデクドウ-l4t
@モロタデクドウ-l4t 4 года назад
質問です。Chromeの拡張ツールって何使ってますか?
@shimabu_it
@shimabu_it 4 года назад
たくさん入れていて説明できないほどですが、 ・Octotree(GitHubが便利になります) ・Session Buddy(タブとかを保存できます) ・Google 翻訳(高速で翻訳できるように) ・FireShot(画面全体スクリーンショット用) ・Feedly Board(あとで読む・保存用。pocket的使い方) とかはよく使いますね!
@NY-li6jp
@NY-li6jp 4 года назад
わかりやすい! JavaScriptも是非追加して欲しいです。
@shimabu_it
@shimabu_it 4 года назад
コメントありがとうございますー!CSS基礎は7〜8回で終わるのですが、その後はCSS実践とJavaScriptを同時に出していく予定です!
@suptree5816
@suptree5816 4 года назад
CSSの復習を兼ね合わせて見てます!意外と知らないことがあり助かってます笑。 しまぶーさんは動画冒頭が少なくテンポ良く本題に入っていることに気付きました。 この方が視聴者が動画を閉じない効果がありそうです。真似させていただきます笑。 質問させていただきます。しまぶーさんは動画を撮る際に台本などを書いていますか? また、書いているならどのような感じで書いているのか、簡単にでもいいので教えていただきたいです。
@shimabu_it
@shimabu_it 4 года назад
ありがとうございます!テンポ良くは常に意識しています!😁 質問の回答ですが台本はありません。動画にあるように目次っぽものは書いていますが、それ以外はアドリブでやっています。早く撮影できるというメリットはありますが、その反面、動画撮影後に「うわー、もっとこうやって話せばよかった・・・」と思うことは何度もあります😅笑
@dezalog
@dezalog 4 года назад
この先、教材とかオンラインサロンとか作ってくれたら入ります!
@shimabu_it
@shimabu_it 4 года назад
ひえー!!それは私への信頼度が高すぎでは・・・(嬉しいです。ありがとうございます🤣) とりあえず教材・情報商材系はやる予定はないですねー。そもそも私が得意としているフロントエンドなどの領域は日進月歩で進化するので頻繁なアップデートが必要なんですよね。「教材でお金払ったのに古い技術を教えられた・・・」ということになりかねないので、そこは手を出したくないなーと。 オンラインサロンは可能性としてはちょっとはありますが、サロンの会員と非会員で学びに差は出したくないです。このプログラミング講座は会員限定とかは一切やる予定はありません。例えば、プログラミング勉強用のカフェとかコワーキングスペースを作って、会員だったらそこが使えるとか、なんかそういう事業としておもしろいことやりたいですね! おもしろい質問ありがとうございました😊
@C4nsha
@C4nsha 4 года назад
マジで助かる!
@neo7625
@neo7625 4 года назад
むぎったん 本物で草
@ATZPJJ
@ATZPJJ 4 года назад
えぐいほどわかりやすいです!
@shimabu_it
@shimabu_it 4 года назад
えぐいほど・・・笑 嬉しいコメントありがとうございます😆
@晴男-w8j
@晴男-w8j 4 года назад
待ってました! 参考にさせてもらっています。
@AF-vl2mt
@AF-vl2mt 4 года назад
とてもためになる動画をありがとうございます😊 カスケード、詳細度というのは、すごくキモになる知識のように見えるのに、何故かググってもあまり出てこない情報なので、本当にありがたいです!別の方の返信で言われていた、「フロントエンドの知識は頻繁にアップデートが必要なので、教材にすると古くなってしまうからやらない」というお考えに、エンジニア魂を感じてとても尊敬いたしました…。
@yuichisawabe3375
@yuichisawabe3375 4 года назад
しまぶーさん、お疲れ様です! CSSってすごいですね(**) 勉強させてもらってます!
@小野浩幸-m6b
@小野浩幸-m6b 4 года назад
めっちゃ助かっています!自社開発エンジニア転職が決まったら報告させてください!
@shimabu_it
@shimabu_it 4 года назад
報告まってますよー😆
@ぽそ-k7i
@ぽそ-k7i 4 года назад
これが無料なんて太っ腹すぎます
@shimabu_it
@shimabu_it 4 года назад
ありがとうございます! JavaScript講座は更に有益かもしれません!✨
@宇井広紳
@宇井広紳 3 года назад
難しい(-_-;)
@user-sheephuman
@user-sheephuman 4 года назад
出来ればサンプルも用意してほしいというのは言い過ぎでしょうか.... 追うの大変だけどcoolです。
@user-sheephuman
@user-sheephuman 4 года назад
いや、自分でいちいち打った方が覚えられるし、うん。
@shimabu_it
@shimabu_it 4 года назад
自分で解決していて笑いました🤣 実はCSS基礎のあとでHTMLとCSSレイアウトをやる予定なのですが、そちらでは実際にサンプルを出します。むしろサンプルをレイアウト一緒にしていく感じなので、より深く学べるのではないかと考えています!
@高本-x9d
@高本-x9d 4 года назад
今回も丁寧な解説ありがとうございますm(__)m 今までCSSが効かない事が多々あり、理由もわからなかったんですが恐らくカスケードや詳細度、継承のせいだったんでしょうね( ;∀;)inheritやinitial、unset等初めて聞き勉強になりました。 CSSスタイルのリセットでall: unset;を使用とありましたが、親要素に継承されるcssが当たっている場合はリセットされず継承されてしまうんでしょうか?継承させずにスタイルリセットするのならall: initialとかも使えますか? 次回のデベロッパーツールの使い方に関しても私はあまり使いこなせていないので楽しみにしています。 javascript講座も出たらすぐ観に来ますね!笑
@shimabu_it
@shimabu_it 4 года назад
ありがとうございます!CSS効かないときはだいたい原因がこれらのどれかですね(笑) > CSSスタイルのリセットでall: unset;を使用とありましたが、親要素に継承されるcssが当たっている場合はリセットされず継承されてしまうんでしょうか? はい、継承されます。unsetは親に継承される値がある場合はinheritと同じ挙動になります。 > 継承させずにスタイルリセットするのならall: initialとかも使えますか? 使えます。すべてを無に帰したいときはall: initialでいけます。今見返すと動画の説明が微妙だ(^O^;) みんなのためになる質問ありがとうございます。 ちなみにallプロパティにもカスケードや詳細度の概念が優先されるので気をつけてください! Chrome DevToolsの動画も撮影完了したので、近々投稿しますね。色んなTipsを紹介しているので学びになるかと思います!JavaScriptも急ぎます🏃
@aym2699
@aym2699 3 года назад
しまぶーさんに金払って1ヶ月マンツーマンしてもらいたい。でもそんな金はない。
@shimabu_it
@shimabu_it 3 года назад
ずっとマンツーマンは難しいですがサロン内には質問できる環境はあるのでご検討くださいー!😊 it-kingdom.com/
@adhd3147
@adhd3147 4 года назад
ちょっと早口かな
@yuichisawabe3375
@yuichisawabe3375 4 года назад
しまぶーさん、お疲れ様です! CSSってすごいですね(**) 勉強させてもらってます!
@shimabu_it
@shimabu_it 4 года назад
CSSで自由にデザインできるようになると楽しいですよねー😊 自由度を高められるようスキルアップです✌️
Далее
ОТПРАВЬ СВОЕЙ ЛП/ЛД
00:10
Просмотров 250 тыс.
Cole Palmer Revenge vs Man City 🥶
00:20
Просмотров 2,2 млн
ОТПРАВЬ СВОЕЙ ЛП/ЛД
00:10
Просмотров 250 тыс.