$30 off During Our Annual Pro Sale. View Details »

メンテナンス性を考慮した CSS 設計

メンテナンス性を考慮した CSS 設計

Takashi Kitajima

March 08, 2021
Tweet

More Decks by Takashi Kitajima

Other Decks in Programming

Transcript

  1. ϝϯςφϯεੑΛߟྀͨ͠
    $44ઃܭ

    View Slide

  2. ໊લͰҙຯ͕Θ͔Δ
    ॻ͖׵͑ͯ΋૝ఆ֎ͷͱ͜ΖʹӨڹ͕Ͱͳ͍
    ফ͍ͨ͠ͱ͖ʹফͤΔ
    ๻͕ࢥ͏
    ϝϯςφϯεੑ͕ߴ͍$44ͱ͸

    View Slide

  3. w ԰߸
    ϞϯΩʔϨϯν
    w .881'PSN
    8PSE1SFTTͷ໰͍߹ΘͤϑΥʔϜϓϥάΠϯ
    w 4NBSU$VTUPN'JFMET
    8PSE1SFTTͷΧελϜϑΟʔϧυϓϥάΠϯ
    w 4OPX.POLFZ
    8PSE1SFTTͷςʔϚ
    w #BTJT
    4BTT$44ϑϨʔϜϫʔΫ
    ࣗݾ঺հ
    ΩλδϚλΧγ
    !JOD

    View Slide

  4. NW\
    ^
    ໊લͰҙຯ͕Θ͔Δ

    View Slide

  5. ϛϡʔδοΫϏσΦʁ
    ໊લͰҙຯ͕Θ͔Δ

    View Slide

  6. NBJOWJTVBM\
    ^
    GSPOUQBHFpSTUWJFX\
    ^
    ໊લͰҙຯ͕Θ͔Δ

    View Slide

  7. EJWDMBTTlTFDUJPOz
    IDMBTTlUJUMFzλΠτϧI
    EJWDMBTTlDPOUFOUzʜEJW
    EJW
    ॻ͖׵͑ͯ΋૝ఆ֎ͷͱ͜ΖʹӨڹ͕Ͱͳ͍
    TFDUJPO\
    UJUMF\
    GPOUTJ[FQY
    ^
    ^

    View Slide

  8. EJWDMBTTlNBJOWJTVBMz
    IDMBTTlUJUMFzߴڃ͓ग़ोͷΑ͏ͳʙI
    EJWDMBTTlMFBEz1SFNJVN0EBTIJEJW
    EJW
    NBJOWJTVBM\
    UJUMF\
    GPOUTJ[FQY
    ^
    ^
    ॻ͖׵͑ͯ΋૝ఆ֎ͷͱ͜ΖʹӨڹ͕Ͱͳ͍

    View Slide

  9. ϝΠϯϏδϡΞϧͷλΠτϧΛ
    QYʹม͑ͱ͍ͯʔ
    Θ͔Γ·ͨ͠ʔ
    ॻ͖׵͑ͯ΋૝ఆ֎ͷͱ͜ΖʹӨڹ͕Ͱͳ͍

    View Slide

  10. UJUMF\
    GPOUTJ[FQY
    ^
    ॻ͖׵͑ͯ΋૝ఆ֎ͷͱ͜ΖʹӨڹ͕Ͱͳ͍

    View Slide

  11. ফ͍ͨ͠ͱ͖ʹফͤΔ
    ηΫγϣϯͷλΠτϧ͕ΊͪΌσΧʹ
    ͳͬͯΔΑʔʢྦ
    UJUMF\
    GPOUTJ[FQY
    ^
    ͬͯͳΜͳΜͩʜ͜ΕΛফͤ͹௚Δ͚Ͳ
    ͜Εফͨ͠ΒଞʹӨڹͳ͍ͷͩΖ͏͔ʜ

    View Slide

  12. ͜ΕΒͷ໰୊Λղܾ͢ΔΞϓϩʔνͱͯ͠
    ʮίϯϙʔωϯτࢦ޲ʯ͕͋Γ·͢ɻ

    View Slide

  13. w 00$44ʜ#PPUTUSBQͳͲ
    w #&.ʜ.BUFSJBM%FTJHO-JUFͳͲ
    w '-0$44ʜ#BTJTͳͲ
    ओͳίϯϙʔωϯτࢦ޲ͳ$44ઃܭ

    View Slide

  14. '-0$44
    DTFDUJPO\
    @@UJUMF\
    GPOUTJ[FQY
    ^
    ^
    DNBJOWJTVBM\
    @@UJUMF\
    GPOUTJ[FQY
    ^
    ^

    View Slide

  15. w ϝϯςφϯεੑͷߴ͍$44Λॻ্͘ͰɺੈքதͰ࢖
    ΘΕ͍ͯΔ$44ϑϨʔϜϫʔΫͷ໋໊نଇ΍ઃܭ͸
    ͱͯ΋ࢀߟʹͳΔɻ
    w ݸਓతʹ͸ʮϓϩύςΟΛ৭ʑ஌͍ͬͯΔʯʮ଎͘
    $44ॻ͚ΔʯΑΓ΋ϝϯςφϯεੑͷߴ͍$44Λॻ
    ͚Δ΄͏͕௒ॏཁɻ
    w ˢઃܭ͕͖Ε͍Ͱ͋Ε͹ϦϑΝΫλϦϯά͸ޙ͔Β
    Ͱ΋Ͱ͖Δ͚Ͳɺࡶʹॻ͔Εͨ$44͸Ͳ͏͠Α͏΋
    ͳ͍ʜʜ
    #PPUTUSBQ͸࢖Θͳ͍͔Βษڧ͠ͳͯ͘ྑ͍ʁ

    View Slide

  16. ͦ΋ͦ΋໋໊ΛఘΊΔͱ͍͏ख๏
    ϢʔςΟϦςΟʔϑΝʔετ

    View Slide

  17. UBJMXJOEDTT

    View Slide