文系プログラミング未経験 → 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講座