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
150
Web基礎実習B/ 情報メディア活用演習_01/02 #11
takawo
0
150
Web基礎実習B/情報メディア活用演習 01/02 #10
takawo
0
250
Web基礎実習B/情報メディア活用演習 01/02 #09
takawo
0
230
Web基礎実習B/情報メディア活用演習 01/02 #08
takawo
1
240
Web基礎実習B/情報メディア活用演習 01/02 #06
takawo
1
160
Web基礎実習B/情報メディア活用演習 01/02 #05
takawo
0
160
法政大学システム工学部 システムデザイン学科 プログラミング(クリエーション系) #05
takawo
0
100
法政大学システム工学部 システムデザイン学科 プログラミング(クリエーション系) #05
takawo
0
160
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GitHub's CSS Performance
jonrohan
1032
460k
Site-Speed That Sticks
csswizardry
11
870
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Visualization
eitanlees
148
16k
Automating Front-end Workflow
addyosmani
1371
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
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