Skip to content

Instantly share code, notes, and snippets.

@shikakun
Last active October 30, 2022 14:49
Show Gist options
  • Save shikakun/debcd13ef2fdbbcf5f57370b607f1047 to your computer and use it in GitHub Desktop.
Save shikakun/debcd13ef2fdbbcf5f57370b607f1047 to your computer and use it in GitHub Desktop.

2017: HTML & CSS Odyssey

๐Ÿš€ 2017 ๅนด HTML ใจ CSS ใฎๆ—…

ใ“ใฎใƒšใƒผใ‚ธใฏใ€GMO ใƒšใƒ‘ใƒœๆ ชๅผไผš็คพใฎ 2017 ๅนดๆ–ฐๅ’็ ”ไฟฎๅบงๅญฆใฎ่ณ‡ๆ–™๏ผˆๆ—…ใฎใ—ใŠใ‚Š๏ผ‰ใงใ™ใ€‚

๐Ÿ“• Chapter 1: ใƒ—ใƒญใƒญใƒผใ‚ฐ

๐Ÿ“— Chapter 2: HTML

๐Ÿ“˜ Chapter 3: CSS

๐Ÿ“™ Chapter 4: ๆ›ธใ„ใฆใฟใ‚ˆใ†

๐Ÿ“’ Chapter 5: ใ‚จใƒ”ใƒญใƒผใ‚ฐ


ใƒ—ใƒญใƒญใƒผใ‚ฐ

ใ“ใ‚“ใซใกใฏ๏ผ

HTML ใจ CSS ใฎๆ—…ใธใ‚ˆใ†ใ“ใ๏ผ

ใ“ใฎๆ—…ใงใฏใ€ๆ–ฐๅ’ 7 ๆœŸ็”Ÿใฎใฟใชใ•ใ‚“ใจใ„ใฃใ—ใ‚‡ใซใ€ใ„ใพ HTML ใจ CSS ใฎไธ–็•Œใงใฏใ„ใฃใŸใ„ใชใซใŒ่ตทใ“ใฃใฆใ„ใ‚‹ใฎใ‹ใ€่ฆณๅ…‰ใ—ใฆใฟใŸใ„ใชใ‚ใฃใฆๆ€ใ„ใพใ™ใ€‚

โ€ฆใงใ‚‚ใ€ใ“ใ‚Œใฏๆ—…ใชใฎใงใ€้€”ไธญใงใ‚‚ใฃใจใ„ใ„้“ใŒใ‚ใ‚‹ใชใƒผใจๆ€ใฃใŸใ‚‰ใ€ใœใ‚“ใœใ‚“ใกใŒใ†ๆ™‚้–“ใซใชใฃใฆใ‚‚ใ‚ˆใ„ใจๆ€ใ„ใพใ™ใ€‚ๆ—…ใฏๆฅฝใ—ใ„ใฎใŒใ„ใกใฐใ‚“ใ€‚ใใฎใŸใ‚ใซใ€ใใ‚‡ใ†ใฏใƒใ‚ฟใ‚’ใŸใใ•ใ‚“็”จๆ„ใ—ใฆใใพใ—ใŸใ€‚

ใ“ใฎๆ™‚้–“ใฏใฟใชใ•ใ‚“ใฎๆ™‚้–“ใงใ™ใ€‚่ณชๅ•ใŒใ‚ใฃใŸใ‚‰ใ„ใคใงใ‚‚ๆ•™ใˆใฆใใ ใ•ใ„๏ผ๏ผˆใ‚‚ใ—็ญ”ใˆใ‚‰ใ‚Œใชใ‹ใฃใŸใ‚‰ใ€ๆŒใกๅธฐใฃใฆ่ชฟในใ•ใ›ใฆใใ ใ•ใ„โ€ฆ๏ผ๏ผ‰

ใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใŸใกใฎใ„ใ‚‹ใจใ“ใ‚

ใฏใ˜ใ‚ใซใ‚ขใƒณใ‚ฑใƒผใƒˆใงใ™ใ€‚

ใใ‚‡ใ†ใ€็›ฎใŒ้†’ใ‚ใฆใ‹ใ‚‰ใ€ไผš็คพใซใใฆใ“ใฎๆ™‚้–“ใ‚’่ฟŽใˆใ‚‹ใพใงใ€ใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใ‚’่ฆ‹ใพใ—ใŸใ‹๏ผŸ

ใใ‚Œใฏใ€ใฉใ‚“ใชๅ ดๆ‰€ใงใ—ใŸใ‹๏ผŸ

ใตใ‚€ใตใ‚€ใ€‚

ใใ‚Œใงใฏ็ฌฌ 2 ๅ•ใงใ™๏ผ

ใ„ใพใ‹ใ‚‰ 10 ๅนดๅ‰โ€ฆ 2007 ๅนดใฃใฆใ€ใชใซใ—ใฆใพใ—ใŸใ‹๏ผŸ ใใฎใจใใ€ใฉใ‚“ใชใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใ‚’ใ—ใฆใŸใ‹่ฆšใˆใฆใพใ™ใ‹๏ผŸ

๐Ÿ“ 2007ๅนดใฎๆ—ฅๆœฌ - Wikipedia

70 ๅนดๅ‰ใฎใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆ

image

็ฅžๅดŽๆญฃ่‹ฑใ€Œใƒฆใƒ‹ใƒใƒผใ‚ตใƒซHTML/XHTMLใ€4ใƒšใƒผใ‚ธใ‚ˆใ‚Š

1945ๅนด ใƒดใ‚กใƒใƒดใ‚กใƒผใƒปใƒ–ใƒƒใ‚ทใƒฅใŒใƒžใ‚คใ‚ฏใƒญใƒ•ใ‚ฃใƒซใƒ ใ‚’ใƒชใƒณใ‚ฏใ™ใ‚‹ใ‚ทใ‚นใƒ†ใƒ ใ‚’่€ƒใˆใŸ

1989ๅนด ใƒ†ใ‚ฃใƒ ใƒปใƒใƒผใƒŠใƒผใ‚บ๏ผใƒชใƒผใŒใƒ–ใƒฉใ‚ฆใ‚ถใ‚จใƒ‡ใ‚ฃใ‚ฟ WorldWideWeb ใ‚’้–‹็™บ

1993ๅนด ใ‚ฆใ‚งใƒ–ใƒ–ใƒฉใ‚ฆใ‚ถ Mosaic ่ช•็”Ÿ

็ช็„ถใงใ™ใŒใ€็›ฎใ‚’ใคใ‚€ใฃใฆใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใ—ใŸใ“ใจใŒใ‚ใ‚Šใพใ™ใ‹๏ผŸ

ใ‚‚ใ— Mac ใ‚’ใ”ๅˆฉ็”จใงใ—ใŸใ‚‰ใ€ใ˜ใคใฏใ„ใพใ™ใใ€็›ฎใ‚’ใคใ‚€ใฃใฆใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

  1. ใพใšใ€ Safari ใ‚’็ซ‹ใกไธŠใ’ใพใ™ใ€‚
  2. ใใ—ใฆใ€ Command ใ‚ญใƒผใจ F5 ใ‚ญใƒผใ‚’ๅŒๆ™‚ใซๆŠผใ—ใพใ™ใ€‚
  3. ใใฎใ‚ใจใ€ Ctrl ใ‚ญใƒผใจ Option ใ‚ญใƒผใจ A ใ‚ญใƒผใ‚’ๅŒๆ™‚ใซๆŠผใ—ใพใ™ใ€‚

Mac OS X ใซใฏ VoiceOver ใจใ„ใ†้Ÿณๅฃฐ่ชญใฟไธŠใ’ๆฉŸ่ƒฝใŒๆญ่ผ‰ใ•ใ‚Œใฆใ„ใฆใ€่ฆ–่ฆšใซ้šœๅฎณใ‚’ๆŒใคๆ–นใฎใƒ–ใƒฉใ‚ฆใ‚ธใƒณใ‚ฐใ‚’ไฝ“้จ“ใ™ใ‚‹ใ“ใจใŒใงใใ‚‹ใ‚“ใงใ™ใญใ€‚

่ชฐใฎใŸใ‚ใฎใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆ๏ผŸ

่ชฐใŒใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใ‚’่ฆ‹ใฆใ‚‹ใฎใ‹๏ผŸ

  • ไบบ้–“
    • ๆ€งๅˆฅ
      • ไพ‹: ็”ทๆ€ง, ๅฅณๆ€ง, โ€ฆ
    • ๅนด้ฝข
      • ไพ‹: ใ”ๅนด้…, ๅนผๅ…, โ€ฆ
    • ใ“ใจใฐ
      • ไพ‹: ๆ—ฅๆœฌ่ชž, ่‹ฑ่ชž, โ€ฆ
    • ้šœๅฎณ
      • ไพ‹: ่ฆ–่ฆš, ่ด่ฆš, โ€ฆ
    • ใใฎใปใ‹ใฎใใ‚Œใžใ‚Œๅ€‹ไบบใฎ้•ใ„
      • ไพ‹: ๆ€งๆ ผ, ๅฅฝใฟ, โ€ฆ
  • ใƒญใƒœใƒƒใƒˆ
    • Googlebot
    • Twitter, Facebook, Slack

ใชใซใ‚’ไฝฟใฃใฆใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใ‚’่ฆ‹ใฆใ‚‹ใฎใ‹๏ผŸ

  • ใƒ‘ใ‚ฝใ‚ณใƒณ
    • ใฉใ‚“ใช OS ใ‚’ไฝฟใฃใฆใ‚‹ใฎใ‹๏ผŸ
      • ไพ‹: Mac, Windows, Linux, ใƒฉใ‚บใƒ™ใƒชใƒผใƒ‘ใ‚ค, โ€ฆ
    • ใฉใ‚“ใชใƒ‡ใ‚ฃใ‚นใƒ—ใƒฌใ‚คใ‚’ไฝฟใฃใฆใ‚‹ใฎใ‹๏ผŸ
      • ไพ‹: ๆถฒๆ™ถ 24 ใ‚คใƒณใƒ, ๆถฒๆ™ถ 40 ใ‚คใƒณใƒ, ใƒ–ใƒฉใ‚ฆใƒณ็ฎก 17 ใ‚คใƒณใƒ, โ€ฆ
  • ใ‚นใƒžใƒ›
    • ใฉใ‚“ใช OS ใ‚’ไฝฟใฃใฆใ‚‹ใฎใ‹๏ผŸ
      • ไพ‹: iOS, Android, Firefox OS, BlackBerry, โ€ฆ
    • ใฉใ‚“ใชใƒ‡ใ‚ฃใ‚นใƒ—ใƒฌใ‚คใ‚’ไฝฟใฃใฆใ‚‹ใฎใ‹๏ผŸ
      • ไพ‹: 4 ใ‚คใƒณใƒ, 4.7 ใ‚คใƒณใƒ, 5.5 ใ‚คใƒณใƒ, โ€ฆ
  • ๆ™‚่จˆ
    • ไพ‹: Apple Watch, Android Wear, Fitbit, โ€ฆ
  • ใƒ†ใƒฌใƒ“
  • ่ปŠใฎใ‚ซใƒผใƒŠใƒ“
  • ่ปŠใฎ็ช“
  • ็œผ้ก
  • โ€ฆ

ใฉใ†ใ‚„ใฃใฆใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใ‚’่ฆ‹ใฆใ‚‹ใฎใ‹๏ผŸ

  • ๅบงใฃใฆ
    • ใฉใ“ใงๅบงใฃใฆใ‚‹ใฎใ‹๏ผŸ
      • ไพ‹: ้ƒจๅฑ‹ใฎใ‚ฝใƒ•ใ‚กใง, ไผš็คพใฎๆœบใง, ๅ…ฌๅœ’ใฎใƒ™ใƒณใƒใง, ้›ป่ปŠใฎๅบงๅธญใง, ่ปŠใฎๅŠฉๆ‰‹ๅธญใง, โ€ฆ
    • ใฉใ†ใ‚„ใฃใฆๅบงใฃใฆใ‚‹ใฎใ‹๏ผŸ
      • ไพ‹: ่ƒŒ็ญ‹ใ‚’ใฎใฐใ—ใฆ, ใ”ใ‚ใ”ใ‚ใ€ใ ใ‚‰ใ ใ‚‰, โ€ฆ
  • ็ซ‹ใฃใฆ
  • ๅฏ่ปขใŒใฃใฆ
  • ๆญฉใใชใŒใ‚‰ (ใ ใ‚!)
  • โ€ฆ

ใ„ใ‚ใ‚“ใชไบบ๏ผˆไบบใซ้™ใ‚‰ใชใ„๏ผ‰ ใŒใ€ ใ„ใ‚ใ‚“ใชๅ ดๆ‰€ ใ‹ใ‚‰ใ€ ใ„ใ‚ใ‚“ใช็Šถๆณ ใงใ€็งใŸใกใฎใ‚ฆใ‚งใƒ–ใƒšใƒผใ‚ธใซใ‚„ใฃใฆใใ‚‹๏ผ

image image

ใƒ‘ใ‚ฝใ‚ณใƒณใง่ฆ‹ใŸๅฐ่ฑกใจใ‚นใƒžใƒ›ใง่ฆ‹ใŸๅฐ่ฑกใฏ้•ใ†ใ€‚ใƒ‘ใ‚ฝใ‚ณใƒณใฏใƒ‘ใ‚ฝใ‚ณใƒณใซๆœ€้ฉใชใ€ใ‚นใƒžใƒ›ใฏใ‚นใƒžใƒ›ใซๆœ€้ฉใชใƒ‡ใ‚ถใ‚คใƒณใŒใ‚ใ‚‹ใ€‚

๐Ÿ“ ใƒฌใ‚นใƒใƒณใ‚ทใƒ– ใ‚ฆใ‚งใƒ–ใƒ‡ใ‚ถใ‚คใƒณใฎๅŸบๆœฌ | Web | Google Developers

ใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใฎใ“ใจใฐ

ๆง‹้€ ใ‚’ๅฎš็พฉใ™ใ‚‹ใฎใŒใƒžใƒผใ‚ฏใ‚ขใƒƒใƒ—ใ€ใƒžใƒผใ‚ฏใ‚ขใƒƒใƒ—ใ™ใ‚‹ใŸใ‚ใฎ่จ€่ชžใŒ HTML ใงใ™ใ€‚

่ฆ‹ใŸ็›ฎใ‚’ๅฎš็พฉใ™ใ‚‹ใฎใŒใ‚นใ‚ฟใ‚คใƒซใ€ใ‚นใ‚ฟใ‚คใƒซใ‚’ๆŒ‡ๅฎšใ™ใ‚‹ใŸใ‚ใฎ่จ€่ชžใŒ CSS ใงใ™ใ€‚


HTML

ๅๅ‰ใฎ็ดนไป‹

image
image
image
image

@sizucca ใ•ใ‚“ใŒๅˆถไฝœใ•ใ‚ŒใŸ 2016 ๅนดๅบฆใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ็ ”ไฟฎใฎ่ณ‡ๆ–™ใ‚ˆใ‚Š

ใƒžใƒผใ‚ฏใ‚ขใƒƒใƒ—ใง่กจ็พใ™ใ‚‹

<p>ใ‚ใŸใ—ใฏๆœใ€ใƒ‘ใƒณใ‚’้ฃŸในใพใ—ใŸใ€‚</p>
<p>็งใฏๆœใ€<strong>ใƒ‘ใƒณ</strong>ใ‚’้ฃŸในใพใ—ใŸใ€‚</p>
<p>็งใฏ<strong>ๆœ</strong>ใ€ใƒ‘ใƒณใ‚’้ฃŸในใพใ—ใŸใ€‚</p>

๐Ÿ“ HTML ๆฆ‚่ซ– - HTML | MDN

ๆƒ…ๅ ฑใŸใกใฎใ„ใ‚‹ใจใ“ใ‚

Google Chrome ใซใฏใ€็”ปๅƒใŒ่ชญใฟ่พผใ‚ใชใ‹ใฃใŸใจใใฎ่กจ็คบใ‚’็ขบ่ชใ™ใ‚‹ๆฉŸ่ƒฝใŒใ‚ใ‚Šใพใ™ใ€‚

ใ‚ขใƒ‰ใƒฌใ‚นใƒใƒผใซ chrome://settings/content/images ใจๅ…ฅๅŠ›ใ—ใฆ่กจ็คบใ•ใ‚Œใ‚‹ใƒšใƒผใ‚ธใฎใ€Œใ™ในใฆใ‚’่กจ็คบ๏ผˆๆŽจๅฅจ๏ผ‰ใ€ใฎใƒˆใ‚ฐใƒซใƒœใ‚ฟใƒณใ‚’ OFF ใซใ—ใฆใ€ Yahoo! ใ‚’่ฆ‹ใฆใฟใพใ—ใ‚‡ใ†ใ€‚

๐Ÿ“ Yahoo! JAPAN

image

็”ปๅƒใŒใชใ„ใฎใซใ€ใชใ‚“ใง Yahoo! JAPAN ใฃใฆๆ›ธใ„ใฆใ‚ใ‚‹ใ‚“ใ ใ‚ใ†๏ผŸ

<img src="https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png" alt="Yahoo! JAPAN" height="55" width="213">

Yahoo! ใฎใ‚ฝใƒผใ‚นใ‚ณใƒผใƒ‰ใ‚’่ฆ‹ใ‚‹ใจใ€ alt ๅฑžๆ€งใซใ€ŒYahoo! JAPANใ€ใฃใฆๆ›ธใ„ใฆใ‚ใ‚‹ใ€‚

alt

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

๐Ÿ“ img - HTML | MDN


Facebook ใฎๆŠ•็จฟๆฌ„ใซ URL ใ‚’ๅ…ฅๅŠ›ใ™ใ‚‹ใจใ€ใ‚ฆใ‚งใƒ–ใƒšใƒผใ‚ธใฎๅ†…ๅฎนใŒใƒ—ใƒฌใƒ“ใƒฅใƒผใ•ใ‚Œใพใ™ใ€‚

image

ใ“ใฎๆƒ…ๅ ฑใฏใฉใ“ใ‹ใ‚‰ใ‚„ใฃใฆใใฆใ„ใ‚‹ใฎใงใ—ใ‚‡ใ†ใ‹๏ผŸ

<meta property="og:title" content="Yahoo! JAPAN">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.yahoo.co.jp/">
<meta property="og:image" content="https://s.yimg.jp/images/top/ogp/fb_y_1500px.png">
<meta property="og:description" content="ๆ—ฅๆœฌๆœ€ๅคง็ดšใฎใƒใƒผใ‚ฟใƒซใ‚ตใ‚คใƒˆใ€‚ๆคœ็ดขใ€ใ‚ชใƒผใ‚ฏใ‚ทใƒงใƒณใ€ใƒ‹ใƒฅใƒผใ‚นใ€ๅคฉๆฐ—ใ€ใ‚นใƒใƒผใƒ„ใ€ใƒกใƒผใƒซใ€ใ‚ทใƒงใƒƒใƒ”ใƒณใ‚ฐใชใฉๅคšๆ•ฐใฎใ‚ตใƒผใƒ“ใ‚นใ‚’ๅฑ•้–‹ใ€‚ใ‚ใชใŸใฎ็”Ÿๆดปใ‚’ใ‚ˆใ‚Š่ฑŠใ‹ใซใ™ใ‚‹ใ€Œ่ชฒ้กŒ่งฃๆฑบใ‚จใƒณใ‚ธใƒณใ€ใ‚’็›ฎๆŒ‡ใ—ใฆใ„ใใพใ™ใ€‚">
<meta property="og:site_name" content="Yahoo! JAPAN">

Yahoo! ใฎใ‚ฝใƒผใ‚นใ‚ณใƒผใƒ‰ใ‚’่ฆ‹ใ‚‹ใจใ€ Open Graph protocol ใฎๆ›ธๅผใซๆฒฟใฃใฆๆƒ…ๅ ฑใŒๆŒ‡ๅฎšใ•ใ‚Œใฆใ„ใพใ™ใ€‚

๐Ÿ“ The Open Graph protocol

HTML ใฎ่ฉฑใ‚’ใ—ใ‚ˆใ†

ใ€Œใ‚ฟใ‚ฐใ€ใซใฏใฉใ‚“ใช็จฎ้กžใŒใ‚ใ‚‹ใฎ๏ผŸ

๐Ÿ“ HTML Reference - A free guide to all HTML elements and attributes.

๐Ÿ“ HTML5ใƒชใƒ•ใ‚กใƒฌใƒณใ‚น

DOCTYPE

<br> ใจ <br />

HTML 4.01<br>
XHTML 1.0<br />
HTML5<br> ใงใ‚‚ <br /> ใงใ‚‚ใฉใฃใกใงใ‚‚ใ„ใ„
  • HTML 4.01
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • HTML5
    • <!DOCTYPE html>

W3C ใจ WHATWG

HTML ใฎไป•ๆง˜ใ‚’ๆฑบใ‚ใฆใ‚‹ๅ›ฃไฝ“ใฏ 2 ใคใ€‚ใ„ใพ HTML ใฎไป•ๆง˜ใฏ 2 ใคใ‚ใ‚‹็Šถๆ…‹๏ผ

W3C HTML ใจ WHATWG HTML Living Standard

  • 1999ๅนด W3C ใŒ HTML4.01 ๅ‹งๅ‘Š
  • 2004ๅนด Apple, Mozilla, Opera ใฎ 3 ็คพใง WHATWG ่จญ็ซ‹
  • 2012ๅนด W3C ใจ WHATWG ใŒใ‚ฑใƒณใ‚ซๅˆฅใ‚Œโ€ฆ
  • 2014ๅนด W3C ใŒ HTML5 ๅ‹งๅ‘Šใ€ WHATWG ใฏ้–‹็™บใ‚’็ถ™็ถš

ใงใ€ใฉใฃใกใ‚’่ฆ‹ใŸใ‚‰ใ„ใ„ใฎโ€ฆ๏ผŸ

ๆฏŽๆ—ฅใฎใ‚ˆใ†ใซHTMLใŒๆ›ดๆ–ฐใ•ใ‚Œ็ถšใ‘ใฆใ„ใพใ™ใ€‚ๅฝ“้ขใฏๅ‹ขใ„ใฎใ‚ใ‚‹HTML Living Standardใ‚’ๅ‚็…งใ™ใ‚‹ใ‚ˆใ†ใซใ—ใฆใฏใ„ใ‹ใŒใงใ—ใ‚‡ใ†ใ‹

W3Cใฎใฏใ€Žๆฌ ้™ฅใƒ•ใ‚ฉใƒผใ‚ฏใ€๏ผ๏ผŸ HTMLใ‚นใƒŠใƒƒใƒ—ใ‚ทใƒงใƒƒใƒˆ2016 โ”€โ”€ HTML5 Conference 2016ใ‚ปใƒƒใ‚ทใƒงใƒณใƒฌใƒใƒผใƒˆ | HTML5Experts.jp

ๆ—ฅๆœฌ่ชž่จณใง HTML ใฎไป•ๆง˜ใ‚’่ชญใ‚ใ‚‹ใ‚ตใ‚คใƒˆ

๐Ÿ“ HTML Standard ๆ—ฅๆœฌ่ชž่จณ

( ๐Ÿ“ Home ยท momdo/momdo.github.io Wiki )

๐Ÿ“ ใ‚ฆใ‚งใƒ–้–ข้€ฃไป•ๆง˜ ๆ—ฅๆœฌ่ชž่จณ - WHATWG HTML ๆจ™ๆบ–๏ผˆ โ€œHTML5โ€ ๏ผ‰

ใƒžใƒผใ‚ฏใ‚ขใƒƒใƒ—ใฎ่ฉฑใ‚’ใ—ใ‚ˆใ†

WAI-ARIA

๐Ÿ“ WAI-ARIA ใฎๅŸบ็คŽ็Ÿฅ่ญ˜ โ€” Website Usability Info

๐Ÿ“ 2015ๅนดๆœซใซใŠใ‘ใ‚‹WAI-ARIAใฎไปŠใ‚’ใ‚‚ใฎใ™ใ”ใใ–ใฃใใ‚Šใจ - ๆฐดๅบ•ใฎ่ก€

Microdata + schema.org

๐Ÿ“ Microdata + schema.org ใ‚’ๅฎŸ้š›ใซไฝฟใฃใฆใฟใ‚‹ ยท terkel.jp

ใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆใ‚จใƒณใ‚ธใƒณใฎ่ฉฑใ‚’ใ—ใ‚ˆใ†


CSS

ๅๅ‰ใฎ็ดนไป‹

image

@sizucca ใ•ใ‚“ใŒๅˆถไฝœใ•ใ‚ŒใŸ 2016 ๅนดๅบฆใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ็ ”ไฟฎใฎ่ณ‡ๆ–™ใ‚ˆใ‚Š

๐Ÿ“ ๆง‹ๆ–‡ - CSS | MDN

ใ‚ซใƒฉใƒผใƒŸใƒผใ‚ทใƒงใƒƒใƒ—ใฎ CSS ใ‚’่ฆ‹ใฆใฟใ‚ˆใ†

๐Ÿ“ https://shop-pro.jp/

ใ‚ฆใ‚งใƒ–ใ‚ตใƒผใƒ“ใ‚นใฎ้–‹็™บใซใฏ็ต‚ใ‚ใ‚ŠใŒใชใ„

image

่ฐทๆ‹“ๆจนใ€ŒWebๅˆถไฝœ่€…ใฎใŸใ‚ใฎCSS่จญ่จˆใฎๆ•™็ง‘ๆ›ธใ€21ใƒšใƒผใ‚ธใ‚ˆใ‚Š

ใ‚ฆใ‚ฉใƒผใ‚ฟใƒผใƒ•ใ‚ฉใƒผใƒซใงใฏใชใใ‚คใƒ†ใƒฌใƒผใ‚ทใƒงใƒณใ€ใ‚ณใƒผใƒ‰ใŒๅค‰ใ‚ใ‚Š็ถšใ‘ใ‚‹ใฎใŒใ‚ฆใ‚งใƒ–ใ‚ตใƒผใƒ“ใ‚นใ€‚

ๅค‰ๆ›ดใซ่€ใˆใ‚‰ใ‚Œใ‚‹ใจใ„ใ†ใ“ใจใฏใ€ใ„ใ‹ใซๆจใฆใ‚„ใ™ใ„ใ‹ใจใ„ใ†ใ“ใจใ€‚

ใชใœๆจใฆใ‚‰ใ‚Œใชใ„ใฎใ‹๏ผŸ

่ฉณ็ดฐๅบฆใจใ‚ซใ‚นใ‚ฑใƒผใƒ‰

๐Ÿ“ 100ๅนดๅพŒใ‚‚ๅดฉใ‚Œใชใ„CSSๅ‹‰ๅผทไผš ยท ็ฌฌ1ๅ›žใ€Œ่ฉณ็ดฐๅบฆใ€

ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆ

๐Ÿ“ 100ๅนดๅพŒใ‚‚ๅดฉใ‚Œใชใ„CSSๅ‹‰ๅผทไผš ยท ็ฌฌ2ๅ›žใ€Œใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใ€

CSS ่จญ่จˆ

2017 ๅนดใฎ CSS

ใƒ—ใƒชใƒ—ใƒญใ‚ปใƒƒใ‚ต

ใƒ™ใƒณใƒ€ใƒผใƒ—ใƒฌใƒ•ใ‚ฃใƒƒใ‚ฏใ‚น

ใ‚ณใƒผใƒ‰ใ‚’ใใ‚Œใ„ใซไฟใค

  • CSScomb
  • stylelint
  • stylefmt
  • scssfmt

ใ‚นใ‚ฟใ‚คใƒซใ‚ฌใ‚คใƒ‰

  • Hologram

๐Ÿ“ Brand Style Guide Examples, Hand-picked by Saijo George

๐Ÿ“ ใŠใ„ใ€ใ“ใฎใ‚นใ‚ฟใ‚คใƒซใ‚ฌใ‚คใƒ‰ใ€็”Ÿใใฆใ‚‹ใž๏ผ Hologram ใจใ€ŒPepagramใ€ใงใฏใ˜ใ‚ใ‚‹ใ‚นใ‚ฟใ‚คใƒซใ‚ฌใ‚คใƒ‰ๅ…ฅ้–€ - ใƒšใƒ‘ใƒœใƒ†ใƒƒใ‚ฏใƒ–ใƒญใ‚ฐ


ๆ›ธใ„ใฆใฟใ‚ˆใ†

ใชใซใงๆ›ธใ๏ผŸ

ใ‚จใƒ‡ใ‚ฃใ‚ฟใงๆ›ธใ

ใ‚ฆใ‚งใƒ–ใ‚ตใƒผใƒ“ใ‚นใงๆ›ธใ

  • CodePen ๐Ÿ’ฐ ๆœ‰ๆ–™๏ผˆ็„กๆ–™ใƒ—ใƒฉใƒณใ‚ใ‚Š๏ผ‰
  • jsbin.com ๐Ÿ’ฐ ๆœ‰ๆ–™๏ผˆ็„กๆ–™ใƒ—ใƒฉใƒณใ‚ใ‚Š๏ผ‰
  • jsfiddle.net
  • liveweave.com
  • Plunker

๐Ÿ“ Code Editing Tools ยท GitBook

user agent stylesheet

image

* {
  margin: 0;
  padding: 0;
}

ๆ›ธใ„ใฆใฟใ‚ˆใ†๏ผ

image
  • ๅน… 375px
  • ้ซ˜ใ• 48px
  • ใƒœใ‚ฟใƒณใฎ่‰ฒ #fb8c00
  • ใƒ†ใ‚ญใ‚นใƒˆใƒ•ใ‚ฉใƒผใƒ ใฎ็ทšใฎๅคชใ• 1px
  • ใƒ†ใ‚ญใ‚นใƒˆใƒ•ใ‚ฉใƒผใƒ ใฎ็ทšใฎ่‰ฒ #ccc
  • ใƒœใ‚ฟใƒณใจใƒ†ใ‚ญใ‚นใƒˆใƒ•ใ‚ฉใƒผใƒ ใฎ้–“้š” 10px

๐Ÿ‘‰ https://codepen.io/pen

ใƒœใ‚ฟใƒณ

  1. ใƒœใ‚ฟใƒณใ‚’ไฝœใฃใฆใฟใฆใใ ใ•ใ„
  2. ใƒœใ‚ฟใƒณใ‚’ๆž ็ทšใ ใ‘ใซใ—ใฆใฟใฆใใ ใ•ใ„

image

ใƒ†ใ‚ญใ‚นใƒˆใƒ•ใ‚ฉใƒผใƒ 

  1. ใƒ†ใ‚ญใ‚นใƒˆใƒ•ใ‚ฉใƒผใƒ ใ‚’ไฝœใฃใฆใฟใฆใใ ใ•ใ„
  2. iPhone ใงใ‚‚ๅŒใ˜่ฆ‹ใŸ็›ฎใซใ—ใฆใใ ใ•ใ„

ๆคœ็ดขใƒ•ใ‚ฉใƒผใƒ 

  1. ใƒœใ‚ฟใƒณใจใƒ†ใ‚ญใ‚นใƒˆใƒ•ใ‚ฉใƒผใƒ ใ‚’ๆจชใซไธฆในใฆใใ ใ•ใ„

๐Ÿ“ https://codepen.io/shikakun/pen/xrdMae


ใ‚จใƒ”ใƒญใƒผใ‚ฐ

ใƒ‡ใ‚ถใ‚คใƒณ vs ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ

ใ„ใพใƒšใƒ‘ใƒœใงใฏใ€ใ‚ตใƒผใƒ“ใ‚นใ‚„ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใซใ‚ˆใ‚Šใพใ™ใŒใ€ใ‚ฐใƒฉใƒ•ใ‚ฃใƒƒใ‚ฏใ‚„ UI ใฎๆกˆใ‚’ๆๆกˆใ—ใฆใ€ HTML ใจ CSS ใ‚’ๆ›ธใ„ใฆๅฝขใซใ™ใ‚‹ใจใ“ใ‚ใพใงใ€ใƒ‡ใ‚ถใ‚คใƒŠใƒผใฎไป•ไบ‹ใจใ—ใฆๆ‰ใˆใ‚‰ใ‚Œใฆใ„ใพใ™ใ€‚

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

๐Ÿ“ ๆ˜”ใชใŒใ‚‰ใฎใ€Œ็‰‡ๆ‰‹้–“ใซๆ›ธใJavaScriptใ€ใฎ้™็•Œ - mizchi's blog

ใ€Œ๏ผˆใ‚ฐใƒฉใƒ•ใ‚ฃใƒƒใ‚ฏใ‚„ UI ใฎ๏ผ‰ใƒ‡ใ‚ถใ‚คใƒณใ€ใจใ€Œ๏ผˆHTML ใ‚„ CSS ใฎ๏ผ‰ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใ€ใฏใ€ๅˆฅใฎใ‚‚ใฎใชใฎใงใ—ใ‚‡ใ†ใ‹๏ผŸ

HTML ใฏๆง‹้€ ใ‚’ใ€ CSS ใฏ่ฆ‹ใŸ็›ฎใ‚’ๅฎš็พฉใ™ใ‚‹ใ“ใจใฐใงใ™ใ€‚ๅƒ•ใฏใ€ใใ‚Œใ‚‰ใฎใ“ใจใฐใฏใ€ๆƒ…ๅ ฑใ‚’ๆ•ด็†ใ—ใฆใ€ใ‚คใƒณใ‚ฟใƒผใƒใƒƒใƒˆใฎใ‚€ใ“ใ†ใซใ„ใ‚‹ไบบใธไผใ‚ใ‚‹ใ‚‚ใฎใซใ™ใ‚‹ใŸใ‚ใซใ‚ใ‚‹ใ€ใจ่€ƒใˆใฆใ„ใพใ™ใ€‚ใใฎ็›ฎ็š„ใฏใ€ใ€Œ๏ผˆใ‚ฐใƒฉใƒ•ใ‚ฃใƒƒใ‚ฏใ‚„ UI ใฎ๏ผ‰ใƒ‡ใ‚ถใ‚คใƒณใ€ใจๅŒใ˜ใ ใจๆ€ใ„ใพใ™ใ€‚

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

ใŠใ™ใ™ใ‚

๐Ÿ“— ๆœฌ

๐ŸŒ ใ‚ฆใ‚งใƒ–ใ‚ตใ‚คใƒˆ

  • HTML ่ฆ็ด ใƒชใƒ•ใ‚กใƒฌใƒณใ‚น - HTML | MDN
  • CSS ใƒชใƒ•ใ‚กใƒฌใƒณใ‚น - CSS | MDN
    • ใชใ‚“ใจใชใไฟก้ ผใ‚’็ฝฎใ„ใฆใ„ใ‚‹ MDN (Mpzilla Developer Network) ใ€‚ Google ๆคœ็ดข็ตๆžœใซ MDN ใŒใ‚ใฃใŸใ‚‰ใฉใฎใƒšใƒผใ‚ธใ‚ˆใ‚Šใ‚‚ๅ…ˆใซ่ฆ‹ใพใ™ใ€‚
  • HTML Reference - A free guide to all HTML elements and attributes.
  • CSS Reference - A free visual guide to CSS
    • HTML ่ฆ็ด ใจ CSS ใฎใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใŒไธ€่ฆงใซใชใฃใฆใ€ Command + F ใ‚ญใƒผใง่ชฟในใ‚„ใ™ใ„ใใ‚Œใ„ใชใ‚ตใ‚คใƒˆใ€‚
  • hail2u/html-best-practices: For writing maintainable and scalable HTML documents
    • HTML ใฎใ€Œๆญฃใ—ใ„ใ€่จ˜ๆณ•ใŒใพใจใพใฃใฆใ„ใ‚‹ใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ€‚ใพใจใ‚ใฆใ‚‹ไบบใฎๅ€‹ไบบ็š„ใช่ถฃๅ‘ณใ‚‚ใกใ‚‡ใฃใจใ‚ใ‚‹ใ‹ใ‚‚โ€ฆ๏ผŸ ใงใ‚‚ใ€ใจใฆใ‚‚ๅ‚่€ƒใซใชใ‚Šใพใ™ใ€‚
  • CodeGrid - ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใซ้–ขใ‚ใ‚‹ไบบใ€…ใฎใ‚ฌใ‚คใƒ‰
    • ใŠใ‚‚ใซใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใฎๆŠ€่ก“ใ‚’็ดนไป‹ใ—ใฆใใ‚Œใ‚‹ๆœˆ้ก 800 ๅ††ใฎๆœ‰ๆ–™ใƒกใƒผใƒซใƒžใ‚ฌใ‚ธใƒณใ€‚ z-index ใฎไป•ๆง˜ใซใคใ„ใฆ่ฉฑใ—ใคใฅใ‘ใ‚‹ใฟใŸใ„ใชๆธ‹ใ„้€ฃ่ผ‰ใŒใ‚ใฃใฆใŠใ‚‚ใ—ใ‚ใ„ใงใ™ใ€‚
  • Bootstrap ยท The most popular HTML, CSS, and JS framework in the world.
    • ไธ–็•Œใงใ„ใกใฐใ‚“ไฝฟใ‚ใ‚Œใฆใ„ใ‚‹ (?) CSS ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใฎ Twitter Bootstrap ใง็พๅœจ้–‹็™บใ•ใ‚Œใฆใ„ใ‚‹ๆœ€ๆ–ฐใƒใƒผใ‚ธใƒงใƒณใ€‚ใ‚ใ‚‰ใ‚†ใ‚‹้–‹็™บ่€…ใฎ้›†ๅˆ็ŸฅใŒ็ต้›†ใ—ใฆใ„ใฆใ€ใ‚ณใƒผใƒ‰ใ‚‚ใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ‚‚ๅ‚่€ƒใซใชใ‚Šใพใ™ใ€‚
  • Introduction - Material design - Material design guidelines
    • Google ใฎ Material Design ใฎใ‚ฌใ‚คใƒ‰ใƒฉใ‚คใƒณใ€‚ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใฎๅๅ‰ใ‚„ๅฝขใŒๅ‚่€ƒใซใชใ‚‹ใฎใงใ‚ˆใ่ฆ‹ใพใ™ใ€‚
  • W3C CSS Module ไป•ๆง˜ๆ›ธใ‚‚ใใ‚‚ใไผš@ๆฑไบฌ - connpass
    • ้›†ใพใฃใฆ W3C ใฎ CSS Module ใฎไป•ๆง˜ๆ›ธใ‚’่ชญใฟใชใŒใ‚‰ใŠใ—ใ‚ƒในใ‚Šใ™ใ‚‹ไผšใ€‚ๆ€–ใใฆใƒชใ‚ขใƒซไผšๅ ดใซใฏ่กŒใฃใŸใ“ใจใชใ„ใ‘ใฉใ€ Slack ใงใƒชใƒขใƒผใƒˆๅ‚ๅŠ ใ‚‚ใงใใพใ™ใ€‚
  • Frontrend powered by CyberAgent, Inc.
    • ใ‚ตใ‚คใƒใƒผใ‚จใƒผใ‚ธใ‚งใƒณใƒˆใฎใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใ‚จใƒณใ‚ธใƒ‹ใ‚ขใŸใกใŒไธปๅ‚ฌใ—ใฆใ„ใŸไผ่ชฌ (?) ใฎใ‚คใƒ™ใƒณใƒˆใ€‚ใใฎใ“ใ‚ใฎไบบใŸใกใฏ่พžใ‚ใกใ‚ƒใฃใŸใ‘ใฉใ€ๆœ€่ฟ‘ใพใŸๅพฉๆดปใ—ใฆใŸใพใซ้–‹ๅ‚ฌใ—ใฆใ‚‹ใฎใง่ฆใƒใ‚งใƒƒใ‚ฏใงใ™ใ€‚
  • ็›ฎใŒ่ฆ‹ใˆใชใใฆใ‚‚ใ‚นใƒˆ2ใฏใงใใ‚‹ใ€‚ๅ…จ็›ฒใ‚ฒใƒผใƒžใƒผใจๅฏพๆˆฆ! - connpass
    • ใ‚ขใ‚ฏใ‚ปใ‚ทใƒ“ใƒชใƒ†ใ‚ฃใ‚ญใƒฃใƒณใƒ—ๆฑไบฌใจใ„ใ†ๅ›ฃไฝ“ใŒไธปๅ‚ฌใ™ใ‚‹ใ‚คใƒ™ใƒณใƒˆใงใฏใ€่ฆ–่ฆšใซ้šœๅฎณใ‚’ใ‚‚ใฃใŸๅฝ“ไบ‹่€…ใฎๆ–นใŒ่ฉฑใ•ใ‚Œใฆใ„ใฆ่ฒด้‡ใช่ฉฑใŒ่žใ‘ใพใ™ใ€‚
  • Website Usability Info
    • ใƒฆใƒผใ‚ถใƒ“ใƒชใƒ†ใ‚ฃใƒปใ‚ขใ‚ฏใ‚ปใ‚ทใƒ“ใƒชใƒ†ใ‚ฃใซ้–ขใ™ใ‚‹ๆƒ…ๅ ฑใฎใƒ–ใƒญใ‚ฐใ€‚
  • Hail2u
  • terkel.jp
    • ๆตทๅค–ใง่ฉฑ้กŒใซใชใฃใŸ่จ˜ไบ‹ใ‚’็ฟป่จณใ—ใฆใใ‚Œใฆใ„ใพใ™ใ€‚

ใŠใ‹ใˆใ‚Šใชใ•ใ„๏ผ

HTML ใจ CSS ใฎๆ—…ใฏใ„ใ‹ใŒใงใ—ใŸใ‹๏ผŸ

ไปŠๅพŒใฎๅ‚่€ƒใฎใŸใ‚ใ€ใœใฒใ‚ขใƒณใ‚ฑใƒผใƒˆใซใ”ๅ”ๅŠ›ใŠ้ก˜ใ„ใ—ใพใ™๏ผ

๐Ÿ‘‰ ใ‚ขใƒณใ‚ฑใƒผใƒˆใซๅ›ž็ญ”ใ™ใ‚‹

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>็งใฏๆœใ€ใƒ‘ใƒณใ‚’้ฃŸในใพใ—ใŸใ€‚</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>็งใฏๆœใ€<strong>ใƒ‘ใƒณ</strong>ใ‚’้ฃŸในใพใ—ใŸใ€‚</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>็งใฏ<strong>ๆœ</strong>ใ€ใƒ‘ใƒณใ‚’้ฃŸในใพใ—ใŸใ€‚</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment