่งฃๆฑบๆธˆใฟ: HTML ใง่ƒŒๆ™ฏ็”ปๅƒใ‚’ๅค‰ๆ›ดใ™ใ‚‹ๆ–นๆณ•

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

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ใ‚จใ‚ฏใ‚นใƒ—ใƒฌใ‚นใง html ใƒ•ใ‚กใ‚คใƒซใ‚’้€ไฟกใ™ใ‚‹ๆ–นๆณ•

Express ใง HTML ใƒ•ใ‚กใ‚คใƒซใ‚’้€ไฟกใ™ใ‚‹้š›ใฎไธปใชๅ•้กŒใฏใ€Express ใŒ HTMLใ€CSSใ€JavaScript ใชใฉใฎ้™็š„ใƒ•ใ‚กใ‚คใƒซใฎๆไพ›ใ‚’ใƒใ‚คใƒ†ใ‚ฃใƒ–ใงใ‚ตใƒใƒผใƒˆใ—ใฆใ„ใชใ„ใ“ใจใงใ™ใ€‚ ้™็š„ใƒ•ใ‚กใ‚คใƒซใ‚’ๆไพ›ใ™ใ‚‹ใซใฏใ€express.static() ใชใฉใฎใƒŸใƒ‰ใƒซใ‚ฆใ‚งใ‚ขใ€ใพใŸใฏ serve-static ใƒ‘ใƒƒใ‚ฑใƒผใ‚ธใงๆไพ›ใ•ใ‚Œใ‚‹ express.static ใƒŸใƒ‰ใƒซใ‚ฆใ‚งใ‚ขใ‚’ไฝฟ็”จใ™ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚Šใพใ™ใ€‚ ใ“ใฎใƒŸใƒ‰ใƒซใ‚ฆใ‚งใ‚ขใ‚’ไฝฟ็”จใ™ใ‚‹ใจใ€้™็š„ใƒ•ใ‚กใ‚คใƒซใŒ้…็ฝฎใ•ใ‚Œใฆใ„ใ‚‹ใƒ‡ใ‚ฃใƒฌใ‚ฏใƒˆใƒชใ‚’ๆŒ‡ๅฎšใ—ใ€ใใ‚Œใ‚‰ใฎใƒ•ใ‚กใ‚คใƒซใฎ่ฆๆฑ‚ใ‚’ใใฎใƒ‡ใ‚ฃใƒฌใ‚ฏใƒˆใƒชใซใƒžใƒƒใƒ—ใงใใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ใƒชใƒขใƒผใƒˆ ใ‚ฝใƒผใ‚นใ‹ใ‚‰ใฎ html ็”ปๅƒใฎ่ฟฝๅŠ 

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

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: HTML ใฎใƒ†ใ‚ญใ‚นใƒˆใซ่‰ฒใ‚’ไป˜ใ‘ใ‚‹ๆ–นๆณ•

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

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นไป˜ใใฎ html ngfor

ใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใง ngFor ใƒ‡ใ‚ฃใƒฌใ‚ฏใƒ†ใ‚ฃใƒ–ใ‚’ไฝฟ็”จใ™ใ‚‹ใ“ใจใซ้–ข้€ฃใ™ใ‚‹ไธปใชๅ•้กŒใฏใ€ๅๅพฉใ•ใ‚Œใ‚‹ใƒ‡ใƒผใ‚ฟใŒๅค‰ๆ›ดใ•ใ‚ŒใŸใจใใซไบˆๆœŸใ—ใชใ„็ตๆžœใŒ็”Ÿใ˜ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚‹ใ“ใจใงใ™ใ€‚ ใ“ใ‚Œใฏใ€้ …็›ฎใŒ้…ๅˆ—ใซ่ฟฝๅŠ ใพใŸใฏๅ‰Š้™คใ•ใ‚ŒใŸใจใใซใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใŒ่‡ชๅ‹•็š„ใซๆ›ดๆ–ฐใ•ใ‚Œใชใ„ใŸใ‚ใงใ™ใ€‚ใใฎใŸใ‚ใ€ๆ–ฐใ—ใ„้ …็›ฎใŒใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚น 0 ใซ่ฟฝๅŠ ใ•ใ‚Œใ‚‹ใจใ€ไป–ใฎใ™ในใฆใฎ้ …็›ฎใฎใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใŒ XNUMX ใคไธ‹ใซใ‚ทใƒ•ใƒˆใ•ใ‚Œใพใ™ใ€‚ ใ“ใ‚Œใซใ‚ˆใ‚Šใ€ใƒ“ใƒฅใƒผใซ่ชคใฃใŸใƒ‡ใƒผใ‚ฟใŒ่กจ็คบใ•ใ‚ŒใŸใ‚Šใ€ใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณใงไบˆๆœŸใ—ใชใ„ๅ‹•ไฝœใŒ็™บ็”Ÿใ—ใŸใ‚Šใ™ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: html5 ใƒ“ใƒ‡ใ‚ช jquery ใ‚’ไธ€ๆ™‚ๅœๆญขใ™ใ‚‹

jQuery ใ‚’ไฝฟ็”จใ—ใฆ HTML5 ใƒ“ใƒ‡ใ‚ชใ‚’ไธ€ๆ™‚ๅœๆญขใ™ใ‚‹ใ“ใจใซ้–ข้€ฃใ™ใ‚‹ไธปใชๅ•้กŒใฏใ€ใ™ในใฆใฎใƒ–ใƒฉใ‚ฆใ‚ถใƒผใงใ‚ตใƒใƒผใƒˆใ•ใ‚Œใฆใ„ใชใ„ใ“ใจใงใ™ใ€‚ ๆœ€ๆ–ฐใฎใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฎใปใจใ‚“ใฉใฏ HTML5 ใƒ“ใƒ‡ใ‚ชใ‚’ใ‚ตใƒใƒผใƒˆใ—ใฆใ„ใพใ™ใŒใ€ไธ€้ƒจใฎๅคใ„ใƒใƒผใ‚ธใƒงใƒณใฎ Internet Explorer ใ‚„ใใฎไป–ใฎใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฏใ‚ตใƒใƒผใƒˆใ—ใฆใ„ใชใ„ๅ ดๅˆใŒใ‚ใ‚Šใพใ™ใ€‚ ใ•ใ‚‰ใซใ€jQuery ใซใฏ HTML5 ใƒ“ใƒ‡ใ‚ชใ‚’ไธ€ๆ™‚ๅœๆญขใ™ใ‚‹็ต„ใฟ่พผใฟใƒกใ‚ฝใƒƒใƒ‰ใŒใชใ„ใŸใ‚ใ€้–‹็™บ่€…ใฏใ€ใƒ“ใƒ‡ใ‚ช่ฆ็ด ใฎ currentTime ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’ 0 ใซ่จญๅฎšใ™ใ‚‹ใ‹ใ€MediaElement.js ใชใฉใฎๅค–้ƒจใƒฉใ‚คใƒ–ใƒฉใƒชใ‚’ไฝฟ็”จใ—ใฆใƒ“ใƒ‡ใ‚ชใ‚’ไธ€ๆ™‚ๅœๆญขใ™ใ‚‹ใชใฉใฎๅ›ž้ฟ็ญ–ใ‚’ไฝฟ็”จใ™ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚Šใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: HTML ใ‚ตใ‚ฆใƒณใƒ‰ใฎ่‡ชๅ‹•ๅ†็”Ÿ

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

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: html ใƒ†ใ‚ญใ‚นใƒˆใ‚’ๅณๆƒใˆ

HTML align text right ใซ้–ข้€ฃใ™ใ‚‹ไธปใชๅ•้กŒใฏใ€่ชญใฟใ‚„ใ™ใ•ใฎๅ•้กŒใ‚’ๅผ•ใ่ตทใ“ใ™ๅฏ่ƒฝๆ€งใŒใ‚ใ‚‹ใ“ใจใงใ™ใ€‚ ใƒ†ใ‚ญใ‚นใƒˆใŒๅณใซ้…็ฝฎใ•ใ‚Œใฆใ„ใ‚‹ใจใ€่ชญใ‚€ใŸใ‚ใซ็›ฎใŒๅทฆใ‹ใ‚‰ๅณใซๅ‰ๅพŒใซ็งปๅ‹•ใ™ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚‹ใŸใ‚ใ€่ชญ่€…ใŒใ‚ณใƒณใƒ†ใƒณใƒ„ใฎๆตใ‚Œใ‚’ใŸใฉใ‚‹ใฎใŒ้›ฃใ—ใ„ๅ ดๅˆใŒใ‚ใ‚Šใพใ™ใ€‚ ใ•ใ‚‰ใซใ€ใƒ†ใ‚ญใ‚นใƒˆใ‚’ๅณๆƒใˆใซใ™ใ‚‹ใจใ€ใƒ†ใ‚ญใ‚นใƒˆใฎไธกๅดใซไฝ™็™ฝใŒไธๅ‡็ญ‰ใซ้…็ฝฎใ•ใ‚Œใ‚‹ใ“ใจใŒๅคšใใ€่ชญ่€…ใŒ่ชญใ‚“ใงใ„ใ‚‹ๅ†…ๅฎนใซ้›†ไธญใ™ใ‚‹ใฎใŒ้›ฃใ—ใใชใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ใƒ‡ใƒผใ‚ฟใƒชใ‚นใƒˆ html

HTMLใซ้–ข้€ฃใ™ใ‚‹ไธปใชๅ•้กŒ ่ฆ็ด ใฏใ€ใ™ในใฆใฎใƒ–ใƒฉใ‚ฆใ‚ถใƒผใงใ‚ตใƒใƒผใƒˆใ•ใ‚Œใฆใ„ใ‚‹ใ‚ใ‘ใงใฏใชใ„ใจใ„ใ†ใ“ใจใงใ™ใ€‚ ็พๅœจใ€Chromeใ€Firefoxใ€ใŠใ‚ˆใณ Edge ใฎใฟใŒ ใ‚จใƒฌใƒกใƒณใƒˆใ€‚ ใ•ใ‚‰ใซใ€ไธ€้ƒจใฎใƒขใƒใ‚คใƒซ ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใ‚‚ใ“ใฎ่ฆ็ด ใ‚’ใ‚ตใƒใƒผใƒˆใ—ใฆใ„ใพใ›ใ‚“ใ€‚ ใ“ใ‚Œใฏใ€ใ‚ตใƒใƒผใƒˆใ•ใ‚Œใฆใ„ใชใ„ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฎใƒฆใƒผใ‚ถใƒผใŒใƒ‡ใƒผใ‚ฟใƒชใ‚นใƒˆใฎๆฉŸ่ƒฝใ‚’ไฝฟ็”จใงใใชใ„ใ“ใจใ‚’ๆ„ๅ‘ณใ—ใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€