inflearn logo
inflearn logo

CSS ใƒใ‚นใƒˆใ‚’ไฝฟ็”จใ—ใŸใƒขใƒใ‚คใƒซ Web ใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐ ใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช

19ใƒšใƒผใ‚ธใ€ๅˆ่จˆ22็จฎ้กž ใ•ใพใ–ใพใชใƒขใƒใ‚คใƒซใƒฌใ‚คใ‚ขใ‚ฆใƒˆใ‚’ไฝœๆˆใ™ใ‚‹ใ“ใจใงใ€ๅ‡บ็‰ˆ็คพๅฐฑ่ทใ‚„ๅ‡บ็‰ˆ็คพๅฎŸๅ‹™ใงๆœ€ใ‚‚็ซถไบ‰ๅŠ›ใฎใ‚ใ‚‹ใƒขใƒใ‚คใƒซใ‚ฆใ‚งใƒ–ไฝœๆˆ่ƒฝๅŠ›ใ‚’ๅ‘ไธŠใ•ใ›ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚ๅ‡บ็‰ˆ็คพใจใ—ใฆใƒขใƒใ‚คใƒซใ‚ฆใ‚งใƒ–ใ‚’ไฝœๆˆใ™ใ‚‹ใŸใ‚ใฎใปใผใ™ในใฆใฎไฝœๆˆๆ–นๆณ•ใจใƒŽใ‚ฆใƒใ‚ฆใ‚’็ฟ’ๅพ—ใงใใพใ™ใ€‚ใƒขใƒใ‚คใƒซใ‚ฆใ‚งใƒ–ใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใฎๆŽˆๆฅญใงๆœ€ใ‚‚ๅผทใฟใจใชใ‚‹้ƒจๅˆ†ใงใ‚ใ‚‹HTMLใƒฏใ‚คใƒคใƒผใƒ•ใƒฌใƒผใƒ ใฎ่ฉณ็ดฐใชไฝœๆˆๆ–นๆณ•ใ‚’ใ€ใ™ในใฆใฎใƒšใƒผใ‚ธใ‚’่ฉณ็ดฐใซ่ชฌๆ˜Žใ—ใพใ™ใ€‚่ฌ›็พฉใ‚’้€šใ˜ใฆใ€HTMLใƒฏใ‚คใƒคใƒผใƒ•ใƒฌใƒผใƒ ไฝœๆˆ่ƒฝๅŠ›ใŒๅคงๅน…ใซๅ‘ไธŠใ—ใพใ™ใ€‚็‰นใซใ€CSSใƒใ‚นใƒˆๆ–นๅผใ‚’ๅๅˆ†ใซๅญฆ็ฟ’ใงใใพใ™ใ€‚ไธญไธŠ็ดšใฎCSSๅฎŸๆˆฆ่ƒฝๅŠ›ใ‚’ใ€Flexใƒฌใ‚คใ‚ขใ‚ฆใƒˆใ‚’ไธญๅฟƒใซๅๅˆ†ใซ่บซใซใคใ‘ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

Mobile App Design
Mobile App Design
HTML/CSS
HTML/CSS
wireframe
wireframe
slick-slider
slick-slider
iframes
iframes
Mobile App Design
Mobile App Design
HTML/CSS
HTML/CSS
wireframe
wireframe
slick-slider
slick-slider
iframes
iframes
codingworks๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

[่ฌ›็พฉๅ…ฌ้–‹] CSS ใƒใ‚นใƒ†ใ‚ฃใƒณใ‚ฐใ‚’ไฝฟ็”จใ—ใŸใƒขใƒใ‚คใƒซ Web ใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐ ใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช

[่ฌ›็พฉใ‚ชใƒผใƒ—ใƒณ]ใƒขใƒใ‚คใƒซWebใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช with CSS Nesting

19ใƒšใƒผใ‚ธใ€ๅˆ่จˆ22็จฎ้กžใฎใƒขใƒใ‚คใƒซใƒฌใ‚คใ‚ขใ‚ฆใƒˆใ‚’ๅˆถไฝœใ—ใชใŒใ‚‰ใ€ใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผๅฐฑ่ทใจใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผๅฎŸๅ‹™ใงๆœ€ใ‚‚็ซถไบ‰ๅŠ›ใฎใ‚ใ‚‹ใƒขใƒใ‚คใƒซWebๅˆถไฝœ่ƒฝๅŠ›ใ‚’ๅ‘ไธŠใ•ใ›ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚ใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผใจใ—ใฆใ€ใƒขใƒใ‚คใƒซใ‚ฆใ‚งใƒ–ใ‚’ๅˆถไฝœใ™ใ‚‹ใŸใ‚ใฎใปใจใ‚“ใฉใ™ในใฆใฎๅˆถไฝœๆ–นๆณ•ใจใƒŽใ‚ฆใƒใ‚ฆใ‚’ๅ ช่ƒฝใงใใพใ™ใ€‚

ใƒขใƒใ‚คใƒซWebใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใ‚ฏใƒฉใ‚นใงๆœ€ใ‚‚ๅผทใฟใฎใ‚ใ‚‹้ƒจๅˆ†ใงใ‚ใ‚‹HTMLใƒฏใ‚คใƒคใƒ•ใƒฌใƒผใƒ ใฎ่ฉณ็ดฐใชๆ›ธใๆ–นใ‚’ใ™ในใฆใฎใƒšใƒผใ‚ธไธ€ใคไธ€ใค่ฉณ็ดฐใซ่ชฌๆ˜Žใ—ใพใ™ใ€‚่ฌ›็พฉใซใ‚ˆใ‚Šใ€HTMLใƒฏใ‚คใƒคใƒ•ใƒฌใƒผใƒ ใฎๅˆถไฝœ่ƒฝๅŠ›ใŒๅคงๅน…ใซๅ‘ไธŠใ—ใพใ™ใ€‚็‰นใซCSSใƒใ‚นใƒˆๆ–นๆณ•ใ‚’ๅๅˆ†ใซๅญฆใถใ“ใจใŒใงใใพใ™ใ€‚ Flexใƒฌใ‚คใ‚ขใ‚ฆใƒˆใ‚’ไธญๅฟƒใซไธญไธŠ็ดšCSSๅฎŸๆˆฆ่ƒฝๅŠ›ใ‚’ๅ……ๅˆ†ๅ‚™ใˆใฆใ„ใพใ™ใ€‚

โœ…่ฌ›็พฉ็ดนไป‹ใ‚ทใƒงใƒผใƒˆใ‚ซใƒƒใƒˆ๏ผšhttps: //inf.run/yfNHF

css-nesting-content-01.png

ใ‚ณใƒกใƒณใƒˆ
ใพใ ใ‚ณใƒกใƒณใƒˆใŒใ‚ใ‚Šใพใ›ใ‚“

๏ฟฅ9,892