Tweet
Tweet

Slide 1

Slide 1 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH Webجૅ࣮शB/ ৘ใϝσΟΞ׆༻ԋश_01/02 #07 CSSʹΑΔϨΠΞ΢τ 2012.06.04 ୲౰: ߴඌ ढ़հ (౦ژ᥁ज़େֶ ܳज़৘ใηϯλʔ)

Slide 2

Slide 2 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ तۀαϯϓϧϑΝΠϧ •http://goo.gl/quUgg

Slide 3

Slide 3 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ͓͖͍֮͑ͯͨCSSͷϓϩύςΟ(ଐੑ) •margin(Ϛʔδϯ)ɿཁૉͷ༨നΛࢦఆʢ֎෦ʣ •padding(ύσΟϯά)ɿཁૉͷ༨നΛࢦఆʢ಺෦ʣ •width(෯)ɿཁૉͷ෯Λࢦఆ •height(ߴ͞)ɿཁૉͷߴ͞Λࢦఆ •border(ܩઢ)ɿཁૉʹܩઢΛ͚ͭΔ

Slide 4

Slide 4 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϘοΫεϞσϧͱdivʹΑΔྖҬࢦఆ •΢Σϒϖʔδͷ۠ըΛද͢λά •divisionͷུ •ϖʔδ಺ͷ࿦ཧతͳ۠෼ʹ࢖͏ •ྫ͑͹ϝχϡʔ/αΠυόʔɺϔομʔɺϑολʔͳͲ •
:ϒϩοΫཁૉ •վߦ͞ΕΔͷͰɺจষ΍ਤදΛ۠෼͚ΔͨΊʹ࢖͏ •:ΠϯϥΠϯཁૉ •վߦ͞Εͳ͍ͷͰɺ಺༰ͷ૷০͍ͨ͠෦෼ͷࢦఆʹ࢖͏

Slide 5

Slide 5 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϘοΫεϞσϧ •༨ന:divҎ֎ͷཁૉͰ΋ࢦఆ͸ಉ͡ divλάͷ಺෦ྖҬ margin (Ϛʔδ ϯ) padding (ύσΟϯ ά) width(෯ ) border(ܩ ઢ) height(ߴ ͞)

Slide 6

Slide 6 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϓϩύςΟࢦఆͷํ๏ •/* divཁૉશମͷ෯ͱߴ͞Λࢦఆ͢Δ */ div{ /* ෯Λ300pxɺߴ͞200pxʹ */ width:300px; height:200px; } •HTMLଆʹdivཁૉΛ૿΍ͯ͠ΈΔɻ •width,heightͷ਺ࣈΛมߋͯ͠ΈΔ •pxͰ͸ͳ͘%ʹ

Slide 7

Slide 7 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϓϩύςΟࢦఆͷํ๏ • /* divཁૉશମʹܩઢΛࢦఆ͢Δ */ div{ /* ܩઢΛ5pxɺdivཁૉͷपғʹҾ͘ */ border:solid 5px #000000; } • border-widthɿ࿮ઢͷ෯ • border-colorɿ࿮ઢͷ৭ • border-styleɿ࿮ઢͷछྨ • solidΛdouble(ೋॏઢ)ʹ • doubleΛdotted(఺ઢ)ʹ

Slide 8

Slide 8 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϓϩύςΟࢦఆͷํ๏ •/* divཁૉશମʹ༨നΛ͚ͭΔ */ div{ /* ֎ଆ΁ͷ༨നΛ্ɺӈɺԼɺࠨͷॱʹࢦఆ */ margin:10px 0px 10px 30px; /* ಺ଆ΁ͷ༨നΛ·ͱΊͯࢦఆ */ padding: 10px; }

Slide 9

Slide 9 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ CSSͷཁૉࢦఆͷํ๏ •CSSͰͷHTMLͷཁૉࢦఆͷํ๏͸͍͔ͭ͋͘Δ •HTMLλάཁૉʹΑΔࢦఆ(ྫ͑͹: div) •IDʹΑΔࢦఆ(ྫ͑͹: #menu) •ΫϥεʹΑΔࢦఆ(ྫ͑͹: .box) •ID΍ΫϥεʹΑΔࢦఆͷ৔߹ɺHTMLଆͷλάʹࣄલʹ •
~
•
~
•ͷΑ͏ͳࢦఆ͕ඞཁɻ

Slide 10

Slide 10 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϘοΫεϞσϧ •CSSͷfloatϓϩύςΟ •ཁૉΛࠨدͤ·ͨ͸ӈدͤ͢Δ •float: left; → ࠨدͤ͢Δ •float: right; → ӈدͤ͢Δ div#main { float:left; } •floatλάʹΑΔճΓࠐΈ •divλάͷωετ(ೖΕࢠ)

Slide 11

Slide 11 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ 2ஈ૊ϨΠΞ΢τ •֎࿮Λ࡞Δ •ϔομʔɾϑολʔͷઃஔ •ϝΠϯεϖʔεͷ࿮Λ࡞Δ •αΠυόʔͷ࿮Λ࡞Δ •·ͣେ࿮900px × 600pxΛ࡞Δɻ •େ࿮ͷதʹɺ3۠ը͕ඞཁɻ •ԣฒͼʹฒ΂Δ •1ͭ໨͸600pxɻ2ͭ໨͸෯300pxɻ

Slide 12

Slide 12 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •divλά(HTML)΍floatϓϩύςΟ(CSS)Λ࢖ͬͯ3ஈ૊ϨΠΞ΢τΛ࡞ ੒͠ͳ͍͞ ԋश: 3ஈ૊ϨΠΞ΢τ දʹܩઢΛ෇͚Δ͜ͱ αΠυ(྘৭)͸ɺ ϝΠϯ(ਫ৭)ͷதʹ͋ΔΑ ͏ʹ ϨΠΞ΢τ͞Ε͍ͯΔ ϖʔδͷ഑৭΍ຊจͷ಺༰͸ɺ ࣗ༝ʹܾΊͯྑ͍

Slide 13

Slide 13 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •divλά(HTML)΍floatϓϩύςΟ(CSS)Λ࢖ͬͯ3ஈ૊ϨΠΞ΢τΛ࡞ ੒͠ͳ͍͞ •ώϯτ •·ͣେ࿮900px×600pxΛ࡞Δɻ •େ࿮ͷதʹɺ3۠ը͕ඞཁɻ •ԣฒͼʹฒ΂Δ •1ͭ໨͸ɺ෯150pxɻ2ͭ໨͸෯250pxɻ3ͭ໨͸500px ԋश: 3ஈ૊ϨΠΞ΢τ

Slide 14

Slide 14 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •෯΍ߴ͞ͷ୯Ґ͸ɺϐΫηϧ(px)Ͱࢦఆ͢Δ •width(෯)Λઃఆ͠ͳ͍ͱɺ෯͍ͬͺ͍(100%) •height(಺༰͕ೖΓ͖Δ͚ͩߴ͞)Λઃఆ͠ͳ͍ͱ •෯΍ߴ͞͸ɺύʔηϯςʔδ(%)ͰࢦఆͰ͖Δ ͨͩ͠ɺ͋·Γଟ༻͠ͳ͍͜ͱ •ଟ༻͢Δͱࢥͬͨ௨ΓʹදࣔͰ͖ͳ͍ (px୯ҐͰࢦఆ͢Δํ͕ࢥ͍௨ΓʹͳΓ΍͍͢) •ݹ͍ϒϥ΢βͰ͸ղऍ͕ҟͳΔ ϘοΫεϞσϧ

Slide 15

Slide 15 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •Twitter Bootstrapͷར༻ •http://twitter.github.com/bootstrap/ • ࠓޙͷ༧ఆ

Slide 16

Slide 16 text

ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ Ξϯέʔτ •ࠓճͷतۀʹ͍ͭͯ •http://goo.gl/MC6T9