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
150
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
160
法政大学システム工学部 システムデザイン学科 プログラミング(クリエーション系) #05
takawo
0
96
法政大学システム工学部 システムデザイン学科 プログラミング(クリエーション系) #05
takawo
0
150
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
A Philosophy of Restraint
colly
203
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Facilitating Awesome Meetings
lara
52
6.2k
Rails Girls Zürich Keynote
gr2m
94
13k
Six Lessons from altMBA
skipperchong
27
3.6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
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