Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web基礎実習B/情報メディア活用演習 01/02 #07
Search
takawo shunsuke
June 03, 2012
0
160
Web基礎実習B/情報メディア活用演習 01/02 #07
takawo shunsuke
June 03, 2012
Tweet
Share
More Decks by takawo shunsuke
See All by takawo shunsuke
Web基礎実習B/ 情報メディア活用演習_01/02 #12
takawo
0
140
Web基礎実習B/ 情報メディア活用演習_01/02 #11
takawo
0
140
Web基礎実習B/情報メディア活用演習 01/02 #10
takawo
0
240
Web基礎実習B/情報メディア活用演習 01/02 #09
takawo
0
220
Web基礎実習B/情報メディア活用演習 01/02 #08
takawo
1
230
Web基礎実習B/情報メディア活用演習 01/02 #06
takawo
1
150
Web基礎実習B/情報メディア活用演習 01/02 #05
takawo
0
150
法政大学システム工学部 システムデザイン学科 プログラミング(クリエーション系) #05
takawo
0
95
法政大学システム工学部 システムデザイン学科 プログラミング(クリエーション系) #05
takawo
0
150
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
How to Ace a Technical Interview
jacobian
275
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Testing 201, or: Great Expectations
jmmastey
38
7k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
For a Future-Friendly Web
brad_frost
175
9.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Git: the NoSQL Database
bkeepers
PRO
425
64k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Transcript
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH Webجૅ࣮शB/ ใϝσΟΞ׆༻ԋश_01/02 #07
CSSʹΑΔϨΠΞτ 2012.06.04 ୲: ߴඌ ढ़հ (౦ژज़େֶ ܳज़ใηϯλʔ)
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ तۀαϯϓϧϑΝΠϧ
•http://goo.gl/quUgg
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ ͓͖͍֮͑ͯͨCSSͷϓϩύςΟ(ଐੑ)
•margin(Ϛʔδϯ)ɿཁૉͷ༨നΛࢦఆʢ֎෦ʣ •padding(ύσΟϯά)ɿཁૉͷ༨നΛࢦఆʢ෦ʣ •width(෯)ɿཁૉͷ෯Λࢦఆ •height(ߴ͞)ɿཁૉͷߴ͞Λࢦఆ •border(ܩઢ)ɿཁૉʹܩઢΛ͚ͭΔ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ ϘοΫεϞσϧͱdivʹΑΔྖҬࢦఆ
•Σϒϖʔδͷ۠ըΛද͢λά •divisionͷུ •ϖʔδͷཧతͳ۠ʹ͏ •ྫ͑ϝχϡʔ/αΠυόʔɺϔομʔɺϑολʔͳͲ •<div>:ϒϩοΫཁૉ •վߦ͞ΕΔͷͰɺจষਤදΛ͚۠ΔͨΊʹ͏ •<span>:ΠϯϥΠϯཁૉ •վߦ͞Εͳ͍ͷͰɺ༰ͷ০͍ͨ͠෦ͷࢦఆʹ͏
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ ϘοΫεϞσϧ
•༨ന:divҎ֎ͷཁૉͰࢦఆಉ͡ divλάͷ෦ྖҬ margin (Ϛʔδ ϯ) padding (ύσΟϯ ά) width(෯ ) border(ܩ ઢ) height(ߴ ͞)
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ ϓϩύςΟࢦఆͷํ๏
•/* divཁૉશମͷ෯ͱߴ͞Λࢦఆ͢Δ */ div{ /* ෯Λ300pxɺߴ͞200pxʹ */ width:300px; height:200px; } •HTMLଆʹdivཁૉΛ૿ͯ͠ΈΔɻ •width,heightͷࣈΛมߋͯ͠ΈΔ •pxͰͳ͘%ʹ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ ϓϩύςΟࢦఆͷํ๏
• /* divཁૉશମʹܩઢΛࢦఆ͢Δ */ div{ /* ܩઢΛ5pxɺdivཁૉͷपғʹҾ͘ */ border:solid 5px #000000; } • border-widthɿઢͷ෯ • border-colorɿઢͷ৭ • border-styleɿઢͷछྨ • solidΛdouble(ೋॏઢ)ʹ • doubleΛdotted(ઢ)ʹ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ ϓϩύςΟࢦఆͷํ๏
•/* divཁૉશମʹ༨നΛ͚ͭΔ */ div{ /* ֎ଆͷ༨നΛ্ɺӈɺԼɺࠨͷॱʹࢦఆ */ margin:10px 0px 10px 30px; /* ଆͷ༨നΛ·ͱΊͯࢦఆ */ padding: 10px; }
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ CSSͷཁૉࢦఆͷํ๏
•CSSͰͷHTMLͷཁૉࢦఆͷํ๏͍͔ͭ͋͘Δ •HTMLλάཁૉʹΑΔࢦఆ(ྫ͑: div) •IDʹΑΔࢦఆ(ྫ͑: #menu) •ΫϥεʹΑΔࢦఆ(ྫ͑: .box) •IDΫϥεʹΑΔࢦఆͷ߹ɺHTMLଆͷλάʹࣄલʹ •<div id=”menu”>~</div> •<div class=”box”>~</div> •ͷΑ͏ͳࢦఆ͕ඞཁɻ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ ϘοΫεϞσϧ
•CSSͷfloatϓϩύςΟ •ཁૉΛࠨدͤ·ͨӈدͤ͢Δ •float: left; → ࠨدͤ͢Δ •float: right; → ӈدͤ͢Δ div#main { float:left; } •floatλάʹΑΔճΓࠐΈ •divλάͷωετ(ೖΕࢠ)
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ 2ஈϨΠΞτ
•֎Λ࡞Δ •ϔομʔɾϑολʔͷઃஔ •ϝΠϯεϖʔεͷΛ࡞Δ •αΠυόʔͷΛ࡞Δ •·ͣେ900px × 600pxΛ࡞Δɻ •େͷதʹɺ3۠ը͕ඞཁɻ •ԣฒͼʹฒΔ •1ͭ600pxɻ2ͭ෯300pxɻ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ •divλά(HTML)floatϓϩύςΟ(CSS)Λͬͯ3ஈϨΠΞτΛ࡞
͠ͳ͍͞ ԋश: 3ஈϨΠΞτ දʹܩઢΛ͚Δ͜ͱ αΠυ(৭)ɺ ϝΠϯ(ਫ৭)ͷதʹ͋ΔΑ ͏ʹ ϨΠΞτ͞Ε͍ͯΔ ϖʔδͷ৭ຊจͷ༰ɺ ࣗ༝ʹܾΊͯྑ͍
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ •divλά(HTML)floatϓϩύςΟ(CSS)Λͬͯ3ஈϨΠΞτΛ࡞
͠ͳ͍͞ •ώϯτ •·ͣେ900px×600pxΛ࡞Δɻ •େͷதʹɺ3۠ը͕ඞཁɻ •ԣฒͼʹฒΔ •1ͭɺ෯150pxɻ2ͭ෯250pxɻ3ͭ500px ԋश: 3ஈϨΠΞτ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ •෯ߴ͞ͷ୯ҐɺϐΫηϧ(px)Ͱࢦఆ͢Δ
•width(෯)Λઃఆ͠ͳ͍ͱɺ෯͍ͬͺ͍(100%) •height(༰͕ೖΓ͖Δ͚ͩߴ͞)Λઃఆ͠ͳ͍ͱ •෯ߴ͞ɺύʔηϯςʔδ(%)ͰࢦఆͰ͖Δ ͨͩ͠ɺ͋·Γଟ༻͠ͳ͍͜ͱ •ଟ༻͢Δͱࢥͬͨ௨ΓʹදࣔͰ͖ͳ͍ (px୯ҐͰࢦఆ͢Δํ͕ࢥ͍௨ΓʹͳΓ͍͢) •ݹ͍ϒϥβͰղऍ͕ҟͳΔ ϘοΫεϞσϧ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ •Twitter
Bootstrapͷར༻ •http://twitter.github.com/bootstrap/ • ࠓޙͷ༧ఆ
ڞཱঁࢠେֶ8FC جૅ࣮श # ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #07 CSSʹΑΔϨΠΞτ Ξϯέʔτ
•ࠓճͷतۀʹ͍ͭͯ •http://goo.gl/MC6T9