社内向け勉強会で作ったスライド
※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです!
͜ΜͳCSS͔ΒͦΖͦΖଔۀ͠Α͏2017.10.14 Obara Chiaki
View Slide
·ͣ࠷ॳʹ…
HTMLΛਖ਼͘͠ॻ͜͏ʂCSSͷϨϕϧΞοϓʹHTMLͷࣝ͋ΔͱΑΓΑ͍Ͱ͢ɻ ྫ͑ɺsectionarticleʹඞͣݟग़͕͠ඞཁͩͱ͔ɺulolͷԼʹliؚ͔͠ΜͰ͍͚ͳ͍…ͳͲɺHTMLʹͪΐͬͱͨ͠ϧʔϧ͕͋Γ·͢ɻCSSΛϨϕϧΞοϓͤ͞ΔͨΊʹɺHTMLͷจॻߏΛҙࣝͯ͠ίʔσΟϯάͯ͠Έ·͠ΐ͏ʂ
ͦΕͰຊͰ͢ʂ
ϨΨγʔϒϥβ༻ͷهड़ফͦ͏ϨΨγʔϒϥβʹʢಛʹIEΛࢦ͠·͕͢ʣࠓ͋·ΓΘΕ͍ͯͳ͍ݹ͍ϒϥβͷ͜ͱͰ͢ɻwidth /***/: auto;ͱ͔* html .clearfix { zoom: 1; }ͱ͍ͬͨهड़ɺओʹIE6ͱ͔IE7ͷͱͬͬͬͬͬͯݹ͍ϒϥβ༻ͷهड़ͳͷͰɺࠓ͏ॻ͔ͳͯ͘େৎͰ͢ʂ
ཁૉηϨΫλͦͬͱ͓ͯ͜͠͏h1 {color: #fc0;}span {display: block;}div {text-align: center;}
ཁૉηϨΫλͦͬͱ͓ͯ͜͠͏h1 {color: #fc0;}span {display: block;}div {text-align: center;}NOOOOOOOO!!!!
ཁૉηϨΫλͦͬͱ͓ͯ͜͠͏ཁૉηϨΫλʹελΠϧΛࢦఆͯ͠͠·͏ͱɺͦͷϖʔδʹ͋ΔશͯͷཁૉʹͦͷελΠϧ͕ͨͬͯ͠·͏ͷͰɺҙਤͤͣϖʔδશମ่͕Εͯ͠·ͬͨΓ͢Δ͜ͱ͕͋Γ·͢ʂ ʢ͍͍ͬͯͷϦηοτ͚ͩʂʣͱʹ͔͘ཁૉʹελΠϧͯͳ͍ࣄΛపఈ͠·͠ΐ͏ɻͲ͏ͯ͠Δͱ͖ɺ.hoge h1 {} ͳͲɺʹΫϥεΛࢦఆ͍ͯ͋͛ͯͩ͘͠͞ɻ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏.box {border: 1px solid #000;background: #f00;width: 300px;height: 300px;border: 2px dotted #999;}Question!(A)෯300pxɺߴ͞300pxͰɺഎܠ͕#f00ͷɺ৭͕#999ͷ2pxυοτઢ͕͍͍ͭͯΔ(B)෯300pxɺߴ͞300pxͰɺഎܠ͕#f00ͷɺ৭͕#000ͷ1pxઢ͕͍͍ͭͯΔ(C)ϒϥβʹΑͬͯ·ͪ·ͪ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏.box {width: 300px;}.box {width: 400px;}Question!(A)෯300px(B)෯400px(C)ϒϥβʹΑͬͯ·ͪ·ͪ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏1ͷਖ਼ղ(A)ɺ2ͷਖ਼ղ(B)Ͱ͢ʂCSSɺجຊతʹޙ͔Βॻ͍ͨํ͕༏ઌͯ͠ඳը͞Ε·͢ɻ ͜ͷಛੑΛར༻ͯ͠ɺྫ͑ࣗࣾͰ͜͏ͳͬͯΔ͚ͲָఱͰ͜͏͢Δʂͱ͍͏ͱ͖ʹɺϕʔεʹͳΔCSSΑΓޙʹCSSΛهड़͢Εͳ্͘ॻ͖͕Ͱ͖·͢ɻ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻).wrap .box {width: 300px;}.box {width: 400px;}Question!(A)෯300px(B)෯400px(C)͜Εؒҧ͍ͳ͘ϒϥβʹΑͬͯ·ͪ·ͪ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻)ਖ਼ղ(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ CSSʹʮৄࡉʯͱ͍͏ͷ͕͋Γ·͢ɻ ৄ͘͠Δͱ͕࣌ؒΓͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏• ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ• .hoge .fuga ͷΑ͏ʹਂ͕ਂ͘ͳΕͳΔ΄Ͳ༏ઌ͞ΕΔ• !important ԿΑΓ༏ઌ͞ΕΔ
!importantͱͯλν͕ѱ͍!importantԿΑΓ༏ઌ͞ΕΔͷͰɺ͔ͨ͠ʹศརͰ͢Ͷɻ ͭ·Γɺ!importantΛଧͪফ͢ʹɺͦͷελΠϧΑΓޙʹߋʹ!importantΛ͚ͭͳ͍ͱ͍͚·ͤΜɻ·ͨͦͷ!importantΛଧͪফ͢ʹɾɾɾɾऴΘΒͳ͍Ͱ͢ͶɻͳͥελΠϧॻ͍ͯΔͷʹద༻͞Εͳ͍ΜͩʂͱCSSΛಡΈղ͘ख͔͔ؒΓ·͢ɻ ༏ઌΛۦͯ͠ɺ!important͔ΒͦΖͦΖଔۀ͠·͠ΐ͏ɻ
id/ΫϥεͷલͷηϨΫλল͜͏p.item-name ͳͲɺΫϥε໊id໊ͷલʹηϨΫλΛ͚ͭΔͱɺྫ͑divͰಉ͡ΫϥεΛ͍͍ͨͱ͖ʹɺ·ͨ div.item-nameΛ૿͞ͳ͍ͱ͍͚ͳ͘ͳΓ·͢ɻ·ͨɺઌఔઆ໌ͨ͠ৄࡉ͕͋ͬͯ͠·͏ͷͰɺ্ॻ͖͠ʹ͍͘CSSʹͳͬͯ͠·͍·͢ɻಛʹ͚ͭͳ͍ͱ͍͚ͳ͍ͷͰͳ͍ͷͰɺཁૉηϨΫλͲΜͲΜল͍͍͖ͯ·͠ΐ͏ɻ
styleଐੑʹؾΛ͚ͭΑ͏!importantͷ࣍ʹৄࡉ͕ߴ͍ॻ͖ํʹͳΓ·͢ɻ ͭ·ΓɺstyleଐੑͰॻ͔ΕͨCSSΛଧͪফ͢ʹɺѱखͰ͋Δ!importantΛΘ͟ΔΛಘͳ͘ͳΓ·͢ɻ ςετతʹʙͱ͔ɺ͜͜Ͱ͚͔ͩ͜͜͠ຊοοʹΘͳ͍ʂͱ͍͏ͱ͖Λআ͍ͯΘͳ͍ͷ͕ແͰ͢ɻ ʢ໘ͰͪΌΜͱΫϥε໊Λ͚͓͍ͭͯͨํ͕͍͍Ͱ͢ʣ
jQueryͰstyleଐੑ͕ͭ͘jQueryͷ$(select).hide()$(select).show()ͳͲɺҰ෦ͷಈ͖Ͱstyleଐੑ͕͋ͯΒΕ·͢ɻ ී௨JSͰදࣔඇදࣔΛ৮Δ͚ͩͳΒͦ͜·Ͱҙࣝ͠ͳͯ͘େৎͰ͕͢ɺྫ͑εϚϗͷͱ͖ΞίʔσΟΦϯͯ͠ɺPCͰදࣔͨ͠··ʹ͢Δʂ…ͳΜ͔ͷͱ͖ɺεϚϗͰΞίʔσΟΦϯด͡ΔˠPCαΠζʹ͢Δͱɺdisplay:none͕ͬͨ··ʹͳΔʂͱ͍͏͜ͱ͕͋ͬͨΓ͠·͢ɻ దٓɺඞཁͰ͋ΕremoveAttrͰstyleଐੑΛআ͠·͠ΐ͏ɻ
CSSͷελΠϧܧঝΛΖ͏ཁૉͰࢦఆͨ͠CSSɺࢠཁૉʹద༻͞ΕΔͷ͕͋Γ·͢ɻ ओʹɺϑΥϯταΠζΧϥʔɺ͋ͱtext-alignͳͲͷςΩετΛ০͢ΔελΠϧͰ͢ɻͭ·ΓɺཁૉʹCSSΛॻ͍ͯ͠·͑ɺࢠཁૉʹಉ͡CSSΛॻ͘ඞཁ͋Γ·ͤΜʂ
͜Μͳ෩ʹॻ͍ͯద༻͞ΕΔ͚Ͳ…ϦετϦετςΩετ.list li {color: #fff;}.text {color: #fff;}
͜͏ॻ͍ͨΒίϯύΫτʂϦετϦετςΩετ.wrap {color: #fff;}
ϕϯμʔϓϨϑΟοΫε-webkit-border-radiusͱ͔ɺ-ms-border-radiusͱ͍͏ॻ͖ํݟͨ͜ͱ͕͋Γ·ͤΜ͔ʁ ͜ͷɺ-webkit-ɺ-ms-ͳͲͷ෦͕ʮϕϯμʔϓϨϑΟοΫεʯͰ͢ɻओʹ͜ΕΒ·༷͕͔ͩͬ͠Γܾ·͍ͬͯͳ͍Ͱɺϒϥβʹઌߦ࣮͞ΕͨCSSʹ͚ͭΒΕ·͢ɻͭ·Γɺਖ਼࣮ࣜ͞ΕͨΒ͍Βͳ͘ͳΓ·͢ɻ
caniuse.comϕϯμʔϓϨϑΟοΫε͕ඞཁ͔Ͳ͏͔Λڭ͑ͯ͘ΕΔαΠτͰ͢ɻ ௐ͍ͨCSSͷελΠϧΛೖྗ͢ΔͱɺݱࡏରԠ͍ͯ͠Δ͔Ͳ͏͔͕ͻͱͰΘ͔Γ·͢ɻෆཁͳϕϯμʔϓϨϑΟοΫε͕ͭΜͱΓ·͠ΐ͏ɻ
ϕϯμʔϓϨϑΟοΫεͷॱ൪(A).hoge {-webkit-box-sizing: border-box;box-sizing: border-box;}(B).hoge {box-sizing: border-box;-webkit-box-sizing: border-box;}Question! ॻ͖ํͲ͕ͬͪਖ਼͍͠Ͱ͠ΐ͏ʁ
ϕϯμʔϓϨϑΟοΫεͷॱ൪ਖ਼ղ(A)Ͱ͢ʂ ઌʹʹग़ͨ͠ద༻ॱͷ֓೦ͱಉ͡Ͱ͢Ͷɻ ਖ਼ࣜͳॻ͖ํΛ࠷ޙʹ͓͚ͯ͠ɺ·࣮ͩ͞Ε͍ͯͳ͍͏ͪϕϯμʔϓϨϑΟοΫεͷهड़͕ɺ࣮͞ΕͨΒCSS3ͷਖ਼ࣜͳॻ͖ํ͕దԠ͞Ε·͢ɻେମϕϯμʔϓϨϑΟοΫεͷ༗ແͳ͚ͩͳͷͰͦΜͳʹͳ͍Ͱ͕͢ɺͨ·ʹશવॻ͖ํͷҧ͏CSS3͕͋ΔͷͰҙ͠·͠ΐ͏ɻ
ͦͷCSS͜͏ॻ͍ͨํ͕͍͍͔ʁ
line-height.text {font-size: 10px;line-height: 12px;}@media (min-width: 768px) {.text {font-size: 16px;line-height: 18px;}}
line-heightʹ͍ͭͯline-heightʹ͜Μͳॻ͖ํ͕͋Γ·͢• ୯Ґ͖ͭʢྫɿline-height: 10pxʣ• ˋ͖ͭʢྫɿline-height: 150%ʣ• ͷΈʢྫɿline-height: 1.6ʣ
line-heightɿ୯Ґ͖ͭͷಛ୯Ґ͖ͭʢઆ໌͘͢͢͠ΔͨΊpxͰ౷Ұ͠·͕͢ɺemͱ͔Ͱಉ༷Ͱ͢ʣͷ߹ɺline-heightͷ͔ΒϑΥϯταΠζΛҾ͖ࢉͯ͠ɺ2Ͱ্ׂ͕ͬͨԼʹߦؒͱͯ͠͞Ε·͢ɻ(ྫ) font-size: 10px / line-height: 16px (16-10)/2 = 3 // ্Լ3pxͷߦؒ
line-heightɿˋ͖ͭͷಛ·ͣɺline-heightͷͱϑΥϯταΠζΛֻ͚ࢉ͠·͢ɻͦͷֻ͚ࢉ͔ͨ͠ΒϑΥϯταΠζΛҾ͍ͯɺ2ͰׂΓ·͢ɻ(ྫ) font-size: 10px / line-height: 120% ((10*120)-10)/2 = 1 // ্Լ1pxͷߦؒ
line-heightɿ୯Ґͳ͠ͷಛϑΥϯταΠζʹline-heightͷΛֻ͚ࢉͯ͠ɺͦͷ͔ΒϑΥϯταΠζΛҾ͍ͯ2Ͱ্ׂ͕ͬͨԼʹߦؒͱͯ͠͞Ε·͢ɻ(ྫ) font-size: 10px / line-height: 2 ((10*2)-10)/2 = 5 // ্Լ5pxͷߦؒ
ͭ·Γ…%ͱ୯Ґͳָ͕͠ʂϨεϙϯγϒͷͱ͖ʹPCͱεϚϗͰͦΕͧΕϑΥϯταΠζͱline-heightΛࢦఆ͍ͯ͠ΔέʔεΛΑ͘ݟ·͕͢ɺline-heightΛˋ୯Ґͳ͠Ͱࢦఆ͓͚ͯ͠ɺ΄΅ಉ͡ߦؒΛอͯΔͷͰνϣοτָ͕Ͱ͖·͢ʂͪͳΈʹࢲ͍ͭ୯Ґͳ͠Ͱॻ͍͍ͯ·͢ɻ
ͭ·Γɺ͜Μͳײ͡ʹʂ.text {font-size: 10px;line-height: 1.6;}@media (min-width: 768px) {.text {font-size: 16px;}}// εϚϗͷͱ͖((10*1.6)-10)/2 Ͱɺ্Լ3pxͷߦؒ// PC((16*1.6)-16)/2 Ͱɺ্Լ4.8pxͷߦؒ
ॏෳ͢Δهड़Λ·ͱΊΑ͏.text-a {text-align: left;font-size: 20px;color: #000;}.text-b {text-align: left;font-size: 50px;color: #000;}.text-c {text-align: left;color: #000;}
ॏෳ͢Δهड़Λ·ͱΊΑ͏CSSΧϯϚ۠ΓͰ·ͱΊΔ͜ͱ͕Ͱ͖·͢ɻελΠϧ͝ͱ૿͍ͯ͘͠ͱԆʑCSSϑΝΠϧ͕͘ͳͬͯʮͲ͜ʹ͚ͨͬ͠ʁʯͱͳΓ͕ͪͳͷͰɺΧϯϚ۠ΓͰ·ͱΊͯΈ·͠ΐ͏ɻ
ॏෳ͢Δهड़Λ·ͱΊΑ͏.text-a, .text-b, .text-c {text-align: left;color: #000;}.text-a {font-size: 20px;}.text-b {font-size: 50px;}
Ϋϥεෳ͚ͭΒΕ·͢͜ͷΑ͏ʹɺ֯εϖʔεΛೖΕΕɺҰͭͷཁૉʹͨ͘͞ΜͷΫϥεΛ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ※ͨͩ͠ɺidҰ͔͚ͭͭ͠Δ͜ͱ͕Ͱ͖·ͤΜʂ
ઌఔͷॏෳΫϥεڞ௨Խ.textset {text-align: left;color: #000;}.text-a {font-size: 20px;}.text-b {font-size: 50px;}// HTML
z-indexͷʹҙॏͶॱΛมߋͰ͖ͯศརͳz-indexͰ͕͢ɺ͋·Γେ͖͍Λ͏ͱɺҙਤ͠ͳ͍ͱ͜ΖͰॱ൪௨ΓʹͳΒͳ͔ͬͨΓ͠·͢ɻ
margin৺ͷڑ// CSS.a {margin: 40px 0;}.b {margin-top: 20px;}Question.bͷ্ʹͭ͘marginԿpxʁ
margin৺ͷڑਖ਼ղ40pxʂ60px͡Όͳ͍ͷʁͱࢥ͍·͢ΑͶɻ marginجຊతʹେ͖͍ํͰऔΒΕ·͢ɻ͜Ε͕marginͷ૬ࡴͱݺΕ͍ͯΔͷͰ͢ɻʮ৺ͷڑʯҾ༻ɿhttp://kojika17.com/2012/08/margin-of-css.html
Ͳ͏ͬͯษڧͨ͠Βʁ
ॻ͔͘͠ͳ͍…ʂʂHTMLͱ͔CSSͬͯσβΠϯΑΓͬͱ;Θͬͱ͍ͯͯ͠ɺͲ͏ॻ͍ͯݟΕΔ͔Β͍͍ͬͯͳΓ͕ͪͰ͢ɻʢ͋ͱࢦఠ͞ΕͨΒ͙͵…ͬͯͳΓ·͢ΑͶʣ ͜Ε͔ͬΓॻ͍ͯܦݧΛஷΊΔ͔͋͠Γ·ͤΜ…ࢲɺલʹ͕ࣗॻ͍ͨίʔυͱݟൺͯʮ͜ͷͱ͖ΑΓϚγʹॻ͚ΔΑ͏ʹͳͬͨͳʯΛੵΈॏͶ͖ͯ·ͨ͠ʂ
͓·͚
Brackets
ܰɹ͍ɹʂ• DreamweaverͦΕͦΕૉΒ͍͠ιϑτͰ͕͢ɺ͍͔ΜͤΜϑϧεϖοΫ͗ͯ͢ॏ͍ͷ͕೦ɻ• DreamweaverૉΒ͍͠ιϑτʢ2ճʣͰ͕͢ɺݸਓతʹͪΐͬͱͨ͠LPͱ͔Λ࡞ΔʹΦʔόʔεϖοΫͳιϑτ͔ͳʁͱࢥͬͨΓɻ ※ࢲͬͯ·ͤΜɻAtomͱ͍͏ผͷΤσΟλΛ͍ͬͯ·͢ˑʢʍωɾʣvŝŒűƅ ʢͰPCͷػݏ࣍ୈͰΊͪΌͪ͘Όॏͯ͘શવಈ͔ͳ͍ͷͰBracketsซ༻͠͡Ί·ͨ͠ʣ
ͪΐͬͱϖʔδ৮Δ͚ͩͳΒBracketsͷ΄͏͕ετϨεগͳ͍͔ʁ• ࣗͷΈʹ߹ΘͤͯΧελϚΠζͰ͖Δͷ͕Α͍• σϑΥϧτͰຊޠԽࡁΈɺDreamweaverʹ͋ΔϥΠϒϓϨϏϡʔ࣮ࡁΈɺͱ͍͏͔…ͦͦDreamweaverͷίʔυϏϡʔ෦Brackets͕Έࠐ·Ε͍ͯΔͷͰɺ༻ײʹۃͳେࠩͳͦ͞͏ ※Dreamweaver͍ͬͯ͜͜ͳ͍ͷͰϋοΩϦͱ͍͑ͳ͍Ͱ͕͢…
ೖΕ͓͖͍֦ͯͨுػೳ• Custom Work ։͍͍ͯΔϑΝΠϧ͕λϒͰදࣔ͞ΕͨΓɺαΠυόʔΛӅͨ͠ΓͰ͖Δ• શۭ֯നɾεϖʔεɾλϒදࣔ ۭനจࣈͳͲΛදࣔͰ͖Δ֦ுɻશ֯Ͱ͖ͨͷ͜ͷ֦ுػೳ͚͔ͩ• Shizimily Multiencoding for Brackets BracketsσϑΥϧτͰUTF-8͔͑͠·ͤΜ͕ɺ͜ͷ֦ுΛೖΕΔͱShift_JISɺEUC-JPͳͲ͕͑·͢
͓ΈͰೖΕΔͱ͍͍͔ͷ֦ுػೳ• Select Lines σϞ͠·͢ɻߦ൪߸ʹϚεΦʔόʔͰϋΠϥΠτͯ͘͠ΕʢςʔϚʹΑΔ͔ʣͯίϐʔͰ͖·͢• Emmet σϞ͠·͢ɻ׳ΕΔͱศརͩͳʔͱ͍͏ػೳͰ͢ʂࠓճڍ֦͛ͨுػೳ΄ΜͷҰ෦Ͱ͢ʂ ʮBrackets ֦ு ͓͢͢Ίʯͱ͔ͰGoogleઌੜʹฉ͘ͱ͍ΖΜͳهࣄ͕ग़ͯ͘ΔͷͰɺࣗͷ͖ͳ֦ுػೳΛೖΕͯΈΔͱ͍͍ͱࢥ͍·͢ʂ
ݟͨม͑ΕΔBrackets
࣭λΠϜ