inflearn logo
็Ÿฅ่ญ˜ๅ…ฑๆœ‰
inflearn logo

2024 html/css ๅŸบ็คŽใ‚ฟใƒณใ‚ฟใƒณ่ถ…ใ‚นใƒ”ใƒผใƒ‰ ้ ‘ๅผทใ‚ณใƒผใ‚น

html/cssๅˆๅฟƒ่€…ๅ…ฅ้–€่€…ใ‚’ๅฏพ่ฑกใซๅŸบ็คŽใ‚’ใ—ใฃใ‹ใ‚Šๅ›บใ‚ใ€ใ‚‚ใกใ‚ใ‚“ ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒฌใ‚คใ‚ขใ‚ฆใƒˆไฝœๆˆใฎๅฎŸ่ทตใ‚’ๅญฆใถใ“ใจใŒใงใใพใ™ใ€‚

้›ฃๆ˜“ๅบฆ ๅ…ฅ้–€

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

HTML/CSS
HTML/CSS
Flex
Flex
css3
css3
html-layout
html-layout
HTML/CSS
HTML/CSS
Flex
Flex
css3
css3
html-layout
html-layout

ใŠ็Ÿฅใ‚‰ใ›

2 ไปถ

  • jyoung๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏใ€‚
    ๅฎŸๅ‹™ + ่ฌ›ๅธซๆญด25ๅนด็›ฎใฎ่ฌ›ๅธซใ€J.ใƒจใƒณใงใ™ใ€‚
    ๆœ€่ฟ‘ใ€็š†ใ•ใ‚“ใฏAIใ‚’ใ†ใพใๆดป็”จใ•ใ‚Œใฆใ„ใพใ™ใ‹๏ผŸ

    ใƒ‡ใ‚ถใ‚คใƒณใฏใงใใ‚‹ใ‘ใ‚Œใฉโ€ฆใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใฎใ›ใ„ใงใ„ใคใ‚‚่กŒใ่ฉฐใพใฃใฆใ„ใŸๆ–นใ€
    ใ‚ใ‚‹ใ„ใฏAIใ‚’ไฝฟใฃใฆใฟใŸใ‚‚ใฎใฎใ€Œใ“ใ‚Œใงๅˆใฃใฆใ„ใ‚‹ใฎใ‹ใช๏ผŸใ€ใจไธๅฎ‰ใ ใฃใŸๆ–นใซใ€
    ๆœฌๅฝ“ใซใŠๅฝนใซ็ซ‹ใฆใ‚‹่ฌ›ๅบงใ‚’ใ”็ดนไป‹ใ—ใŸใ„ใจๆ€ใ„ใพใ™ใ€‚

    โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
    ๐ŸŽฏFigma MCP x AIใง4ๆ™‚้–“ใงๅฎŒๆˆใ•ใ›ใ‚‹ใƒฌใ‚นใƒใƒณใ‚ทใƒ–Webใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช
    โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€

    ใ“ใฎ่ฌ›ๅบงใฏๅ˜ใชใ‚‹ใƒ„ใƒผใƒซ่ฌ›็พฉใงใฏใชใ
    ๐Ÿ‘‰ใƒ‡ใ‚ถใ‚คใƒณ โ†’ ้–‹็™บ โ†’ ใƒ‡ใƒ—ใƒญใ‚คใพใงไธ€ๅบฆใซๅฎŒๆˆใ•ใ›ใ‚‹ๅฎŸๅ‹™ใƒฏใƒผใ‚ฏใƒ•ใƒญใƒผใ‚’ๆ‰ฑใ„ใพใ™ใ€‚


    ๐Ÿ’Žใ“ใฎ่ฌ›็พฉใงๅญฆใถๆ ธๅฟƒ

    โœ” AIใŒ็†่งฃใ™ใ‚‹Figma่จญ่จˆๆ–นๆณ•
    โœ” ่‡ชๅˆ†ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚’ใใฎใพใพๅฝขใซใ™ใ‚‹Vibe Coding
    โœ” Reactใƒ™ใƒผใ‚นใฎใ‚คใƒณใ‚ฟใƒฉใ‚ฏใƒ†ใ‚ฃใƒ–ใชใ‚ฆใ‚งใƒ–ๅˆถไฝœ
    โœ”Git, GitHub, Vercelใพใงใ€ๅฎŸ้š›ใฎใƒ‡ใƒ—ใƒญใ‚ค็ตŒ้จ“

    ๐Ÿ‘‰ ็ตๆžœ็‰ฉใงใฏใชใ
    ใ€ŒAIใจๅ…ฑใซๅƒใๆ–นๆณ•ใ€ใใฎใ‚‚ใฎใ‚’ๅญฆใถใ“ใจใซใชใ‚Šใพใ™ใ€‚


    ๐Ÿš€ๅ—่ฌ›ๅพŒใฎๅค‰ๅŒ–

    โœ” ใƒ‡ใ‚ถใ‚คใƒณใ ใ‘ใ‚’ใ—ใฆใ„ใŸๆฎต้šŽ โ†’ ้–‹็™บใพใงๅฏ่ƒฝใชไบบๆใธๆˆ้•ท
    โœ” ไฝœๆฅญ้€Ÿๅบฆ โ†’ 3ใ€œ5ๅ€ไปฅไธŠๅ‘ไธŠ
    โœ” ๅฐฑ่ทใƒป่ปข่ทใซใ™ใไฝฟใˆใ‚‹้ซ˜ๅ“่ณชใชใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใฎๅฎŒๆˆ


    ๐ŸŽฏใ“ใฎใ‚ˆใ†ใชๆ–นใซใŠใ™ใ™ใ‚ใงใ™

    • ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใฎใ›ใ„ใงใ‚ฆใ‚งใƒ–ๅˆถไฝœใ‚’่ซฆใ‚ใฆใ„ใŸใƒ‡ใ‚ถใ‚คใƒŠใƒผ

    • AIใ‚’ๆœฌๆ ผ็š„ใซๆดป็”จใ—ใฆใฟใŸใ„ๆ–น

    • ็ด ๆ—ฉใใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ๅฎŒๆˆใ•ใ›ใŸใ„ๆ–น

    • ใƒ‡ใ‚ถใ‚คใƒณ + ้–‹็™บใ‚นใ‚ญใƒซใฎไธกๆ–นใ‚’ๅ‚™ใˆใŸใ„ๆ–น


    ๐Ÿ”ฅไปŠใŒๆœ€้ซ˜ใฎใ‚ฟใ‚คใƒŸใƒณใ‚ฐใงใ™

    ๐Ÿ‘‰็พๅœจ30%ๅ‰ฒๅผ•ๅฎŸๆ–ฝไธญ๏ผ
    ๐Ÿ“…ๆœŸ้–“๏ผš2026ๅนด3ๆœˆ17ๆ—ฅใ€œ3ๆœˆ26ๆ—ฅ

    ใ“ใฎๆœŸ้–“ใŒ้ŽใŽใ‚‹ใจ้€šๅธธไพกๆ ผใซๆˆปใ‚Šใพใ™ใฎใงใ€
    ่ˆˆๅ‘ณใฎใ‚ใ‚‹ๆ–นใฏไปŠใŒ็ตถๅฅฝใฎๆฉŸไผšใงใ™ใ€‚


    ใ“ใฎ่ฌ›็พฉใฏ
    ๅ˜ใซไธ€ใคใฎๆˆๆžœ็‰ฉใ‚’ไฝœใ‚‹ใฎใงใฏใชใใ€

    ๐Ÿ‘‰ ใ“ใ‚Œใ‹ใ‚‰ใšใฃใจไฝฟใ„็ถšใ‘ใ‚‰ใ‚Œใ‚‹
    ใ€ŒAIใƒ™ใƒผใ‚นใฎๅˆถไฝœๆ‰‹ๆณ•ใ€ใ‚’่บซใซใคใ‘ใ‚‹ใƒ—ใƒญใ‚ปใ‚นใงใ™ใ€‚

    ไธ€ๅบฆ่บซใซใคใ‘ใฆใŠใ‘ใฐ
    ใ“ใ‚Œใ‹ใ‚‰ใฎไฝœๆฅญใ‚นใƒ”ใƒผใƒ‰ใจใ‚ฏใ‚ชใƒชใƒ†ใ‚ฃใŒๅฎŒๅ…จใซๅค‰ใ‚ใ‚Šใพใ™ใ€‚


    ๆฐ—่ปฝใซใ”่ฆงใ„ใŸใ ใใ€
    ใƒ•ใƒซใ‚นใ‚ฟใƒƒใ‚ฏใƒ‡ใ‚ถใ‚คใƒŠใƒผใจใ—ใฆๅฎŸๅ‹™่ƒฝๅŠ›๏ผ‹็”Ÿ็”ฃๆ€งใ‚’ใ‚ขใƒƒใƒ—ใงใใ‚‹ใ‚ˆใ†ๅฟœๆดใ—ใฆใŠใ‚Šใพใ™^^

    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™๏ผ

    ไปฅไธ‹ใฎใ‚ขใƒ‰ใƒฌใ‚นใ‹ใ‚‰่ฌ›็พฉใ‚’ใ”่ฆงใ„ใŸใ ใ‘ใพใ™ใ€‚
    https://inf.run/QLDGi

    0
  • jyoung๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏ ๐Ÿ˜Š
    ่ฌ›ๅธซใฎ J.Young ใงใ™ใ€‚

    ใคใ„ใซๆ–ฐใ—ใ„่ฌ›็พฉใงใ”ๆŒจๆ‹ถใ™ใ‚‹ใ“ใจใซใชใ‚Šใพใ—ใŸใ€‚


    ๐Ÿš€ [Figma MCP ร— AIใง4ๆ™‚้–“ใงๅฎŒๆˆใ•ใ›ใ‚‹ใƒฌใ‚นใƒใƒณใ‚ทใƒ–Webใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช]

    ไปŠๅ›žใฎ่ฌ›็พฉใฏใ€ๅ˜ใชใ‚‹ใ€Œใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ่ฌ›็พฉใ€ใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    AIใŒ็†่งฃใ™ใ‚‹ใƒ‡ใ‚ถใ‚คใƒณ่จญ่จˆใ‹ใ‚‰ใ€
    AIใ‚’ๆดป็”จใ—ใŸใƒใ‚คใƒ–ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใ€
    ใใ—ใฆๅฎŸ้š›ใฎใƒ‡ใƒ—ใƒญใ‚คใพใงใคใชใŒใ‚‹ใƒ•ใƒซใ‚นใ‚ฟใƒƒใ‚ฏๅฎŒๆˆใƒ—ใƒญใ‚ปใ‚น
    ใงใ™ใ€‚


    ๐ŸŽฏ ใ“ใฎ่ฌ›็พฉใงๅญฆใถๆ ธๅฟƒ

    โœ”Figma AutoLayoutใ‚’ๆดป็”จใ—ใŸไฝ“็ณป็š„ใช่จญ่จˆ
    โœ”ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ๆง‹้€ ใฎ่จญ่จˆๆ‰‹ๆณ•
    โœ”Variable็™ป้Œฒ โ†’ ใƒˆใƒผใ‚ฏใƒณๅŒ– โ†’ AIใŒ็†่งฃใ™ใ‚‹ใƒ‡ใ‚ถใ‚คใƒณๆง‹้€ ใฎๆง‹็ฏ‰
    โœ”Figma MCPใ‚ตใƒผใƒใƒผ้€ฃๆบใซใ‚ˆใ‚‹AIใƒใ‚คใƒ–ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ
    โœ”่‡ชๅˆ†ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚’1ใƒ”ใ‚ฏใ‚ปใƒซใฎ็‹‚ใ„ใ‚‚ใชใๅฎŸ่ฃ…ใ™ใ‚‹ๆ–นๆณ•
    โœ”ใƒ‡ใƒ—ใƒญใ‚คใพใง็น‹ใŒใ‚‹ๅฎŸ่ทตใƒ—ใƒญใ‚ปใ‚น

    ๅ˜ใซใ€ŒAIใŒใ‚ณใƒผใƒ‰ใ‚’ไปฃใ‚ใ‚Šใซๆ›ธใ„ใฆใใ‚Œใ‚‹ใ€ใจใ„ใ†ใ“ใจใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    AIใฎใƒŸใ‚นใพใง่‡ชใ‚‰่ฆ‹ใคใ‘ๅ‡บใ—ใ€ๆง‹้€ ใ‚’็†่งฃใ—ใ€
    ๆœ€้ฉๅŒ–ใ•ใ‚ŒใŸใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใ‚ฆใ‚งใƒ–ใธใจใƒชใƒ•ใ‚กใ‚ฏใ‚ฟใƒชใƒณใ‚ฐใ™ใ‚‹่ƒฝๅŠ›ใพใงใ€ๅ…ฑใซ่จ“็ทดใ—ใพใ™ใ€‚


    ๐Ÿ‘ฉโ€๐Ÿ’ป ใ“ใฎใ‚ˆใ†ใชๆ–นใซใŠใ™ใ™ใ‚ใงใ™

    • ๐ŸŽจ ่‡ชๅˆ†ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚’ใใฎใพใพVibe Codingใงๅ…ท็พๅŒ–ใ—ใŸใ„ๆ–น

    • ๐Ÿง  ใƒ‡ใ‚ถใ‚คใƒณใ‹ใ‚‰้–‹็™บใƒปใƒ‡ใƒ—ใƒญใ‚คใพใงๅฏ่ƒฝใชใƒ•ใƒซใ‚นใ‚ฟใƒƒใ‚ฏใƒ‡ใ‚ถใ‚คใƒŠใƒผใซใชใ‚ŠใŸใ„ๆ–น

    • ๐Ÿ”ฅ Figmaใฎ้ซ˜ๅบฆใชๆฉŸ่ƒฝใพใงใ—ใฃใ‹ใ‚ŠๅญฆใณใŸใ„ๆ–น

    • ๐Ÿ’ป HTML / CSS / JavaScript / Tailwind / Reactใพใง็Ÿฅใ‚ŠใŸใ„ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ๅ…ฅ้–€่€…

    • โœจ ใ‚คใƒณใ‚ฟใƒฉใ‚ฏใƒ†ใ‚ฃใƒ–ใงๅฎŒๆˆๅบฆใฎ้ซ˜ใ„ใƒฌใ‚นใƒใƒณใ‚ทใƒ–Webใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ไฝœใ‚ŠใŸใ„ๆ–น

    • โšก AIใ‚’ๆดป็”จใ—ใฆๆฅญๅ‹™็”Ÿ็”ฃๆ€งใ‚’5ๅ€ไปฅไธŠๅ‘ไธŠใ•ใ›ใŸใ„ๆ–น


    ๐Ÿ“˜ ๅญฆ็ฟ’ๆ–นๆณ•

    ใ™ในใฆใฎ้Ž็จ‹ใฏNotionใงไฝ“็ณป็š„ใซๆ•ด็†ใ•ใ‚Œใฆใ„ใพใ™ใ€‚
    ่จญ่จˆ โ†’ ๅฎŸ่ฃ… โ†’ ไฟฎๆญฃ โ†’ ใƒ‡ใƒ—ใƒญใ‚คใพใง
    ็š†ใ•ใ‚“ใŒ่‡ชใ‚‰ๅพฉ็ฟ’ใ—ใ€็นฐใ‚Š่ฟ”ใ—ๅญฆ็ฟ’ใงใใ‚‹ใ‚ˆใ†ใซๆง‹ๆˆใ—ใพใ—ใŸใ€‚


    AIๆ™‚ไปฃใ€
    ใ“ใ‚Œใ‹ใ‚‰ใฏใ€Œใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใŒๅพ—ๆ„ใชไบบใ€ใงใฏใชใ
    AIใจๅ…ฑใซๆœ€ใ‚‚้€Ÿใ็ตๆžœใ‚’ๅ‡บใ›ใ‚‹ไบบใŒ็ซถไบ‰ๅŠ›ใจใชใ‚Šใพใ™ใ€‚

    4ๆ™‚้–“ไปฅๅ†…ใซใ€
    ็š†ใ•ใ‚“ใฎใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ไธ€ๆฎต้šŽๅผ•ใไธŠใ’ใฆใฟใฆใใ ใ•ใ„ใ€‚

    ่ฌ›็พฉใงใŠไผšใ„ใ—ใพใ—ใ‚‡ใ†ใ€‚

    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚
    ่ฌ›ๅธซ J.Youngใ‚ˆใ‚Š

    0

็„กๆ–™