【CSS #5】基礎からちゃんと学ぶ CSS 入門!ボックスモデルはCSSを書いていく上で常に意識する必要があります【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

チャンネル名:しまぶーのIT大学
◆概要(引用)
文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家

? もくじ
0:00 準備
1:46 コンテントボックス (width, height)
3:14 パディングボックス (padding)
4:04 マージンボックス (margin)
4:53 マージンの相殺について
7:31 ボーダーボックス (border)
9:04 box-sizing プロパティについて
12:00 border-box をすべての要素に適用する
13:15 ショートハンドを紹介
15:01 ブロックボックスとインラインボックス
16:20 違い① 改行されるかどうか
17:00 違い② width, height の挙動
17:58 違い③ padding, margin, border の挙動
21:05 ブロックボックスとインラインボックスの要素の例
23:06 display プロパティについて
24:54 inline-block の紹介
26:08 まとめ

? 今日のひとこと
今日のCSS講座はボックスモデルについて。
ブロックボックス、インラインボックスの理解は
CSSでレイアウトをする上で必須になります。
width, height, padding, margin, border, display, box-sizingは
必ず抑えておかないといけないプロパティです。
プログラミングを独学で学んだけど
理論から学び直したい方にオススメの動画です。
入門・初心者エンジニアや駆け出しエンジニアの方もどうぞ!

?基礎からちゃんと学ぶ CSS 入門!
【第1回】基本構文を抑えよう!
https://youtu.be/xBLIzweHYic

【第2回】プロパティについて深堀りしよう!
https://youtu.be/sfAhER5AGOA

【第3回】この講座だけでセレクターは完結できます!
https://youtu.be/3RX0ASjozkc

【第4回】スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因!
https://youtu.be/aNnauB_PY3I

【第6回】フレックスボックス (flexbox) の使い方をゲームで学ぼう!
https://youtu.be/FU4RocY_Y1k

【第7回】flexbox の flex プロパティの使い方を徹底解説
https://youtu.be/TXwY_SWO07U

?‍? 自己紹介
ヤフー株式会社でプログラマーとして働いていました!
現在は起業家として新規サービスを開発中です!
下記に興味がある方はチャンネル登録をおねがいします!
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

? SNS
Twitter: https://twitter.com/shimabu_it
TikTok: https://www.tiktok.com/@shimabu_it

?️ タグ
#CSS #CSS入門 #CSS講座

コメント

タイトルとURLをコピーしました