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
97
法政大学システム工学部 システムデザイン学科 プログラミング(クリエーション系) #05
takawo
0
150
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
A better future with KSS
kneath
238
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
How GitHub (no longer) Works
holman
314
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
RailsConf 2023
tenderlove
29
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making Projects Easy
brettharned
116
6k
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