CSS: selector

CSS: selector

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

July 10, 2020
Tweet

Transcript

  1. ηϨΫλͷॻ͖ํ

  2. ༻ޠͷ͓͞Β͍ h1 { font-size: 80px; } ᶄϓϩύςΟ ᶅ஋ ᶃηϨΫλ ελΠϦϯάͷର৅

  3. ηϨΫλͷॻ͖ํᶃ)5.-ͷཁૉ໊Λ༻͍Δ h1 { font-size: 80px; } )5.- )5.-ͷཁૉ໊Λͦͷ··༻͍Δ $44 <h1>ΈΜͳͷ͓ؾʹೖΓ</h1>

    ϖʔδ಺ͷ͢΂ͯͷIʹରͯ͠ɺ͜ͷελΠϧ͕ద༻͞ΕΔ
  4. .title { font-size: 80px; } ηϨΫλͷॻ͖ํᶄ)5.-ͷDMBTT໊Λ༻͍Δ )5.- DMBTTͷ஋Λ༻͍Δ $44 <h1

    class="title">ΈΜͳͷ͓ؾʹೖΓ</h1> υοτΛ෇͚Δ
  5. h1, h2 { text-align: center; } ηϨΫλͷॻ͖ํᶅ·ͱΊͯద༻͢Δ )5.- $44 <h1>ΈΜͳͷ͓ؾʹೖΓ</h1>

    . . . <h2>ΈΜͳͷ͓ؾʹೖΓ</h1> ΧϯϚͰ۠੾Δ ෳ਺ͷཁૉΛର৅ʹ·ͱΊͯελΠϧΛద༻Ͱ͖Δ
  6. h1 img { width: 240px; } ηϨΫλͷॻ͖ํᶆ )5.- Iͷதʹ͋ΔJNH˞ݟग़͠ͷը૾͚ͩʹ͜ͷελΠϧ͕ద༻͞ΕΔ $44

    <h1><img src="***.png" alt="ΈΜͳͷ͓ؾʹೖΓ"></h1> ൒֯εϖʔεͰۭ͚Δ img { width: 240px; } ͜ͷΑ͏ʹॻ͘ͱɺϖʔδͷதͷ ͢΂ͯͷJNHʢը૾ʣͷ෯͕ QYʹࢦఆ͞ΕΔɻ ˞ಛఆͷର৅ʹߜͬͯࢦఆ͍ͨ͠৔߹ ࢖͍෼͚͕ Ͱ͖ΔΑ͏ʹ ͠Α͏
  7. <items class="items my-items”> . . . <items class="items our-items"> DMBTTʹෳ਺ͷ஋ΛೖΕΔ

    )5.- JUFNTʹ͸ڞ௨ͷελΠϧΛɺ PVSJUFNTʹରͯ͠͸ಛఆͷελΠϧΛద༻Ͱ͖Δ ൒֯εϖʔεΛೖΕΔ