Web基礎実習B/情報メディア活用演習 01/02 #07

Transcript

1. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH Webجૅ࣮शB/ ৘ใϝσΟΞ׆༻ԋश_01/02 #07 CSSʹΑΔϨΠΞ΢τ 2012.06.04 ୲౰: ߴඌ ढ़հ (౦ژ᥁ज़େֶ ܳज़৘ใηϯλʔ)
2. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ तۀαϯϓϧϑΝΠϧ •http://goo.gl/quUgg
3. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ͓͖͍֮͑ͯͨCSSͷϓϩύςΟ(ଐੑ) •margin(Ϛʔδϯ)ɿཁૉͷ༨നΛࢦఆʢ֎෦ʣ •padding(ύσΟϯά)ɿཁૉͷ༨നΛࢦఆʢ಺෦ʣ •width(෯)ɿཁૉͷ෯Λࢦఆ •height(ߴ͞)ɿཁૉͷߴ͞Λࢦఆ •border(ܩઢ)ɿཁૉʹܩઢΛ͚ͭΔ
4. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϘοΫεϞσϧͱdivʹΑΔྖҬࢦఆ •΢Σϒϖʔδͷ۠ըΛද͢λά •divisionͷུ •ϖʔδ಺ͷ࿦ཧతͳ۠෼ʹ࢖͏ •ྫ͑͹ϝχϡʔ/αΠυόʔɺϔομʔɺϑολʔͳͲ •<div>:ϒϩοΫཁૉ •վߦ͞ΕΔͷͰɺจষ΍ਤදΛ۠෼͚ΔͨΊʹ࢖͏ •<span>:ΠϯϥΠϯཁૉ •վߦ͞Εͳ͍ͷͰɺ಺༰ͷ૷০͍ͨ͠෦෼ͷࢦఆʹ࢖͏
5. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϘοΫεϞσϧ •༨ന:divҎ֎ͷཁૉͰ΋ࢦఆ͸ಉ͡ divλάͷ಺෦ྖҬ margin (Ϛʔδ ϯ) padding (ύσΟϯ ά) width(෯ ) border(ܩ ઢ) height(ߴ ͞)
6. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϓϩύςΟࢦఆͷํ๏ •/* divཁૉશମͷ෯ͱߴ͞Λࢦఆ͢Δ */ div{ /* ෯Λ300pxɺߴ͞200pxʹ */ width:300px; height:200px; } •HTMLଆʹdivཁૉΛ૿΍ͯ͠ΈΔɻ •width,heightͷ਺ࣈΛมߋͯ͠ΈΔ •pxͰ͸ͳ͘%ʹ
7. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϓϩύςΟࢦఆͷํ๏ • /* divཁૉશମʹܩઢΛࢦఆ͢Δ */ div{ /* ܩઢΛ5pxɺdivཁૉͷपғʹҾ͘ */ border:solid 5px #000000; } • border-widthɿ࿮ઢͷ෯ • border-colorɿ࿮ઢͷ৭ • border-styleɿ࿮ઢͷछྨ • solidΛdouble(ೋॏઢ)ʹ • doubleΛdotted(఺ઢ)ʹ
8. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϓϩύςΟࢦఆͷํ๏ •/* divཁૉશମʹ༨നΛ͚ͭΔ */ div{ /* ֎ଆ΁ͷ༨നΛ্ɺӈɺԼɺࠨͷॱʹࢦఆ */ margin:10px 0px 10px 30px; /* ಺ଆ΁ͷ༨നΛ·ͱΊͯࢦఆ */ padding: 10px; }
9. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ CSSͷཁૉࢦఆͷํ๏ •CSSͰͷHTMLͷཁૉࢦఆͷํ๏͸͍͔ͭ͋͘Δ •HTMLλάཁૉʹΑΔࢦఆ(ྫ͑͹: div) •IDʹΑΔࢦఆ(ྫ͑͹: #menu) •ΫϥεʹΑΔࢦఆ(ྫ͑͹: .box) •ID΍ΫϥεʹΑΔࢦఆͷ৔߹ɺHTMLଆͷλάʹࣄલʹ •<div id=”menu”>~</div> •<div class=”box”>~</div> •ͷΑ͏ͳࢦఆ͕ඞཁɻ
10. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ϘοΫεϞσϧ •CSSͷfloatϓϩύςΟ •ཁૉΛࠨدͤ·ͨ͸ӈدͤ͢Δ •float: left; → ࠨدͤ͢Δ •float: right; → ӈدͤ͢Δ div#main { float:left; } •floatλάʹΑΔճΓࠐΈ •divλάͷωετ(ೖΕࢠ)
11. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ 2ஈ૊ϨΠΞ΢τ •֎࿮Λ࡞Δ •ϔομʔɾϑολʔͷઃஔ •ϝΠϯεϖʔεͷ࿮Λ࡞Δ •αΠυόʔͷ࿮Λ࡞Δ •·ͣେ࿮900px × 600pxΛ࡞Δɻ •େ࿮ͷதʹɺ3۠ը͕ඞཁɻ •ԣฒͼʹฒ΂Δ •1ͭ໨͸600pxɻ2ͭ໨͸෯300pxɻ
12. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •divλά(HTML)΍floatϓϩύςΟ(CSS)Λ࢖ͬͯ3ஈ૊ϨΠΞ΢τΛ࡞ ੒͠ͳ͍͞ ԋश: 3ஈ૊ϨΠΞ΢τ දʹܩઢΛ෇͚Δ͜ͱ αΠυ(྘৭)͸ɺ ϝΠϯ(ਫ৭)ͷதʹ͋ΔΑ ͏ʹ ϨΠΞ΢τ͞Ε͍ͯΔ ϖʔδͷ഑৭΍ຊจͷ಺༰͸ɺ ࣗ༝ʹܾΊͯྑ͍
13. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •divλά(HTML)΍floatϓϩύςΟ(CSS)Λ࢖ͬͯ3ஈ૊ϨΠΞ΢τΛ࡞ ੒͠ͳ͍͞ •ώϯτ •·ͣେ࿮900px×600pxΛ࡞Δɻ •େ࿮ͷதʹɺ3۠ը͕ඞཁɻ •ԣฒͼʹฒ΂Δ •1ͭ໨͸ɺ෯150pxɻ2ͭ໨͸෯250pxɻ3ͭ໨͸500px ԋश: 3ஈ૊ϨΠΞ΢τ
14. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •෯΍ߴ͞ͷ୯Ґ͸ɺϐΫηϧ(px)Ͱࢦఆ͢Δ •width(෯)Λઃఆ͠ͳ͍ͱɺ෯͍ͬͺ͍(100%) •height(಺༰͕ೖΓ͖Δ͚ͩߴ͞)Λઃఆ͠ͳ͍ͱ •෯΍ߴ͞͸ɺύʔηϯςʔδ(%)ͰࢦఆͰ͖Δ ͨͩ͠ɺ͋·Γଟ༻͠ͳ͍͜ͱ •ଟ༻͢Δͱࢥͬͨ௨ΓʹදࣔͰ͖ͳ͍ (px୯ҐͰࢦఆ͢Δํ͕ࢥ͍௨ΓʹͳΓ΍͍͢) •ݹ͍ϒϥ΢βͰ͸ղऍ͕ҟͳΔ ϘοΫεϞσϧ
15. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •Twitter Bootstrapͷར༻ •http://twitter.github.com/bootstrap/ • ࠓޙͷ༧ఆ
16. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ Ξϯέʔτ •ࠓճͷतۀʹ͍ͭͯ •http://goo.gl/MC6T9