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
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Writing Fast Ruby
sferik
627
61k
Building Your Own Lightsaber
phodgson
103
6.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Bash Introduction
62gerente
608
210k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Making Projects Easy
brettharned
115
5.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Building Applications with DynamoDB
mza
90
6.1k
Building Adaptive Systems
keathley
38
2.3k
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