CSSにおける制約

Transcript

1. CSSʹ͓͚Δ੍໿
2. CSS͸Ͳ͏ͱͰ΋ॻ͚Δ
3. CSS͸ແޱ
4. CSS͸ͱͯ΋ڧྗ
5. CSSͷຊ࣭͸ηϨΫλ
6. HTML Class Attribute != CSS
7. અࢠɺͦΕઃܭ΍ͳ͍ ໔ࡑූ΍ <div class=“c-box__item--text js-opacity-delay__item is-active”> … </div> BEM ? BEM? SMACSS? × OOCSS?
8. ۜͷ஄ʁ HTML CSS ٙࣅScoped CSS CSS in JSʢStyled Componentsʣ
9. CSS in JS ≒ jQuery css() Method ≒ HTML Old Attribute
10. ࢖͍͍ͨؾ࣋ͪ͸Θ͔Δ
11. ɿ࠶ར༻͕૝ఆ͞ΕΔ ίϯϙʔωϯτͷελΠϧ͸ ଧͪফ͞Εͳ͍Α͏ৄࡉ౓Λ࠷ߴʹʂ ɿ࠶ར༻ઌͰελΠϧΛඍௐ੔͢Δ͜ͱΛ ߟ͑Ε͹ɺৄࡉ౓Λ͓͚͋͛ͯ͹͍͍ͱ͸ ݴ͑ͳ͍ͷͰ͸ͳ͍͔ʁ
12. ɿڝ߹͕૝ఆ͞ΕΔϓϩύςΟΛ ยͬ୺͔Βએݴ͓͚ͯ͠͹໰୊ͳ͍ ɿ࣮ࡍʹ͸ͲΜͳϓϩύςΟ͕ ద༻͞Ε͍ͯΔ͔͸ࣄલʹ൑அͰ͖ͳ͍
13. ͪΌΜͱॻ͖ͬ͘Όͳ͍
14. աෆ଍ͳ͍ద੾ͳηϨΫλ HTML <a class="btn-fb" href=“http://www.facebook.com/share.php?u=https%3A%2F%2F***.jp”> Facebook </a> CSS .page-chronicle #mainContent .share-box dl dd .btn-fb { width: 34px; height: 34px; background: url(/img/pc/common/btn_fb.png) no-repeat left top; background-size: 100% auto; } CSS .page-chronicle > .share-box a[href*=“//www.facebook.com/share.php?u=”] { width: 34px; height: 34px; background: url(/img/pc/common/btn_fb.png) no-repeat left top; background-size: 100% auto; } HTML <a href=“http://www.facebook.com/share.php?u=https%3A%2F%2F***.jp”> Facebook </a>
15. dataଐੑΛ্खʹ HTML <section class=“section section01“> *** </section> CSS .section, .section01 { padding: 15px 20px; } .section.section01 { background: url(background-section01.png); } HTML <section data-section=“about”> *** </section> CSS section[data-section] { padding: 15px 20px; } section[data-section=“about”] { background: url(background-about.png); }
16. ARIAΛ্खʹ
17. ➡ HTML <p> •CSSʹ͓͚Δ੍໿<br> •CSS͸Ͳ͏ͱͰ΋ॻ͚Δ </p> HTML <ul> <li>CSSʹ͓͚Δ੍໿</li> <li>CSS͸Ͳ͏ͱͰ΋ॻ͚Δ</li> </ul> CSS li::before { content: “•”; } ͓·͚:ྫ͑͹ɺຊ࣭తͳ΋ͷҎ֎͸CSSͰ <ol> <li>01.CSSʹ͓͚Δ੍໿</li> <li>02.CSS͸Ͳ͏ͱͰ΋ॻ͚Δ</li> </ol> ol { counter-reset: slide; } ol > li { list-style: none; } ol > li::before { counter-increment: slide; content: “0”counter(slide)”.“; } ⬇ <li>CSSʹ͓͚Δ੍໿</li> ⬇ 01.CSSʹ͓͚Δ੍໿
18. CSS [data-page-index=“1”] .navigation a[href$=“/*/**/1”] { pointer-events: none; opacity: .8; } HTML <html data-page-index=“1”> ~ <ul class=“navigation”> <li> <a href="/special/suppose/1/1.php"> େ໺ͷՈ ޿ౡݝ೓೔ࢢࢢ 2004೥ </a> </li> ~ </ul> ɹ͓·͚:ྫ͑͹ɺφϏήʔγϣϯ΋CSSͰ
19. CSS html[lang=“ja”] a[href*=“/contact”] { background-image: url(/ja/img/contact.png); content: “͓໰͍߹Θͤ”; } html[lang=“en”] a[href*=“/contact”] { background-image: url(/en/img/contact.png); content: “ Contact Us”; } HTML ೔ຊޠαΠτ <html lang=“en”> <a href=“/contact”></a> ӳޠαΠτ <html lang=“en”> <a href=“/contact”></a> ͓·͚:ྫ͑͹ɺଟݴޠରԠ΋CSSͰ
20. ͋ΒΏΔ໊લ͸஫ҙਂ͘ ҆қʹଐੑΛৼΒͳ͍ ϚϧνΫϥεΛڋઈ
21. ඞཁͳͷ͸੍໿ ै͏΂͖͸ݪଇ ໔ࡑූ͸͍Βͳ͍
22. ͓͠·͍