Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

takawo shunsuke
June 03, 2012
160

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

takawo shunsuke

June 03, 2012
Tweet

More Decks by takawo shunsuke

Transcript

  1. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ ͓͖͍֮͑ͯͨCSSͷϓϩύςΟ(ଐੑ)

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

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

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

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

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

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

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

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

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

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

    ੒͠ͳ͍͞ •ώϯτ •·ͣେ࿮900px×600pxΛ࡞Δɻ •େ࿮ͷதʹɺ3۠ը͕ඞཁɻ •ԣฒͼʹฒ΂Δ •1ͭ໨͸ɺ෯150pxɻ2ͭ໨͸෯250pxɻ3ͭ໨͸500px ԋश: 3ஈ૊ϨΠΞ΢τ
  12. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞ΢τ •෯΍ߴ͞ͷ୯Ґ͸ɺϐΫηϧ(px)Ͱࢦఆ͢Δ

    •width(෯)Λઃఆ͠ͳ͍ͱɺ෯͍ͬͺ͍(100%) •height(಺༰͕ೖΓ͖Δ͚ͩߴ͞)Λઃఆ͠ͳ͍ͱ •෯΍ߴ͞͸ɺύʔηϯςʔδ(%)ͰࢦఆͰ͖Δ ͨͩ͠ɺ͋·Γଟ༻͠ͳ͍͜ͱ •ଟ༻͢Δͱࢥͬͨ௨ΓʹදࣔͰ͖ͳ͍ (px୯ҐͰࢦఆ͢Δํ͕ࢥ͍௨ΓʹͳΓ΍͍͢) •ݹ͍ϒϥ΢βͰ͸ղऍ͕ҟͳΔ ϘοΫεϞσϧ