HTML5とは何か、HTML5はじめの一歩

Transcript

1. ৘ใฤू 8FC
   
   )5.-ͱ͸Կ͔
   )5.-ɺ͸͡ΊͷҰา ೥݄೔
   ౦ژ᥁ज़େֶ
   ܳज़৘ใηϯλʔ ".$
   ୲౰ɿాॴ३
   
2. ࠓ೔ͷ಺༰ ‣ ͜ͷߨٛͷޙ൒ͰͱΓ͋͛Δ)5.-ʹࢸΔྺ࢙తͳܦҢ
   ‣ )5.-ͱ͸Կͳͷ͔
   ‣ ࣮ྫͷ঺հ
   ! ‣ ͕࣌ؒ͋Ε͹ʜ
   ‣ )5.-࠷ॳͷҰา
   ‣ )5.-Ͱಋೖ͞Εͨͷ৽͍͠ཁૉͰ8FCϖʔδΛ࡞੒
   ‣ )5.-ͷϖʔδΛ$44ͰϨΠΞ΢τ
   ‣ $44Λ࢖༻ͯ͠ɺ༷ʑͳσβΠϯޮՌΛՃ͑Δ
3. ʮ)5.-ʯͱ͸Կ͔
4. )5.-ͱ͸Կ͔ ‣ )5.-ͷ৽όʔδϣϯɺ)5.-ͱ͸Կͳͷ͔
5. )5.-ͱ͸Կ͔ ‣ )5.-ͷςΫϊϩδͷมભ
   ! ‣ 
   
   )5.-
   ‣ 
   
   )5.-
   ‣ 
   
   $44
   
   +BWB4DSJQU
   ‣ 
   
   )5.-
   ‣ 
   
   $44
   ‣ 
   
   9)5.-
   
   ‣ 
   
   "KBY
   "TZODISPOPVT
   +BWB4DSJQU
   
   9.-
   ‣ 
   
   )5.-
6. )5.-ͱ͸Կ͔ ‣ ࢀߟɿ)5.-·ͰʹࢸΔόʔδϣϯͷมભ
7. )5.-ͱ͸Կ͔ ‣ ࠷େͷมԽΛͻͱ͜ͱͰݴ͏ͱʜ
   ‣ 8FCʮจॻʯ͔ΒʮΞϓϦέʔγϣϯ΁ʯ จॻ ϝʔϥʔɺ஍ਤɺ
   ϜʔϏʔϓϨʔϠʔɺ
   εέδϡʔϥʔ
   ͳͲ
8. )5.-ͱ͸Կ͔ ‣ ྫɿ(PPHMF
9. )5.-ͱ͸Կ͔ ‣ ྫɿϒϥ΢β΍΢Σϒʹ͍ͭͯ஌͓͖͍ͬͯͨͷ͜ͱ
   ‣ http://www.20thingsilearned.com/ja-JP
10. )5.-ͱ͸Կ͔ ‣ 5IF
    &WPMVUJPO
    PG
    8FC
    
    8FCͷਐԽ
    ‣ IUUQXXXFWPMVUJPOPGUIFXFCDPN
11. )5.-ͱ͸Կ͔ ‣ ݫີʹఆٛ͸ɺ͍Ζ͍Ζͳҙݟ͕ʜ
    ! ‣ ࢀߟɿͲ͜·Ͱ͕)5.-ͳͷʁ
    ‣ http://www.publickey1.jp/blog/10/html5_9.html
12. ޿ٛͷ)5.-ͱڱٛͷ)5.- ! ! ! ! ! ! ! ! ! ! ‣ ͜ͷतۀͰ͸ʮ޿ٛͷ)5.-ʯΛ)5.-ͱͯ͠ղઆ͠·͢
    ‣ 8FCΞϓϦέʔγϣϯΛ࣮ݱ͢ΔͨΊͷٕज़શൠͱͯ͠ ޿ٛͷ)5.- ڱٛͷ)5.-
13. )5.-ͷओͳػೳ ‣ ޿ٛͷ
    )5.-ͷओͳػೳ
    ‣ http://www.w3.org/html/logo/#the-technology ! ‣ ηϚϯςΟΫε
    ‣ ΦϑϥϯɺετϨʔδ
    ‣ σόΠεΞΫηε
    ‣ ίωΫςΟϏςΟʔ
    ‣ ϚϧνϝσΟΞ
    ‣ άϥϑΟΫεɺΤϑΣΫτ
    ‣ ύϑΥʔϚϯεɺΠϯςάϨʔγϣϯ
    ‣ $44
14. ηϚϯςΟΫε ‣ ηϚϯςΟΫε ҙຯ ʹΑΔϚʔΫΞοϓ
    ! ‣ ༷ʑͳ৽ཁૉͷ௥Ճ
    ‣ TFDUJPO
    IFBEFS
    GPPUFS
    OBW
    BSUJDMF
    BTJEF
    pHVSF
    NBSL
    UJNF
    WJEFP
    BVEJP
    FUD
15. ηϚϯςΟΫε ‣ ҙຯߏ଄ͷهड़ͷมԽ body div id="header" div id="footer" div id="sidebar" div id="content" div class="article" div class="article" body header footer nav section article article HTML4 HTML5
16. ΦϑϥΠϯ
    
    ετϨʔδ ‣ 1$͚ͩͰͳ͘λϒϨοτ΍ϞόΠϧ୺຤͕ॏཁͱͳͬͨࠓɺ ৗʹωοτϫʔΫʹ઀ଓ͞Ε͍ͯΔͱ͸ݶΒͳ͍
    ! ‣ ωοτϫʔΫ͕ΦϑϥΠϯͰ΋ϖʔδΛӾཡͰ͖Δ࢓૊Έ
    ‣ ϒϥ΢βଆʹσʔλΛ஝ੵ͢Δ
    ‣ ΦϑϥΠϯͰ΋࢖༻Մೳͳ8FCΞϓϦΛߏஙՄೳ
17. ΦϑϥΠϯ
    
    ετϨʔδ ‣ σϞɿWebStorageλΠϚʔ
    
    ࠷ॳʹ։͍ͨ࣌ؒΛهԱ
18. ΦϑϥΠϯ
    
    ετϨʔδ ‣ ϑΝΠϧΞΫηε
    
    %SBH
    
    %SPQͰϑΝΠϧΛ௥Ճ͢ΔͳͲ
    ‣ IUUQTUVEJPIUNMSPDLTDPN1IPUPT
19. σόΠεΞΫηε ‣ ༷ʑͳσόΠε͕׆༻Մೳʹ
    ! ‣ (FPMPDBUJPOɿر๬͢Ε͹ࣗ਎ͷ৔ॴΛ
    XFC
    ΞϓϦέʔγϣ ϯʹ௨஌͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ
    ‣ Χϝϥೖྗ
    
    Ի੠ೖྗ
    ‣ ө૾΍Ի੠ʹΑΔίϯτϩʔϧ
20. σόΠεΞΫηε ‣ (FPMPDBUJPOσϞ
    J1BE͔ΒΞΫηεͨ͠ঢ়ଶ
    ‣ http://html5demos.com/geo
21. σόΠεΞΫηε ‣ 8FCΧϝϥʹ઀ଓ
    ‣ IUUQXXXNSEPPCDPNXFCDBN@EJTQMBDFNFOU
22. ίωΫςΟϏςΟʔ ‣ αʔόʔͱͷΑΓޮ཰తͳ઀ଓ
    ‣ ϦΞϧλΠϜʹ૒ํ޲௨৴Λ࣮ݱ
    ! ‣ νϟοτ
    ‣ ΦϯϥΠϯήʔϜ
    ‣ FUD ϦΫΤετ ϓογϡ ΫϥΠΞϯτ αʔόʔ ϓογϡ ϓογϡ
23. ίωΫςΟϏςΟʔ ‣ TDSVNCMS
    IUUQTDSVNCMSDB
    ‣ ϗϫΠτϘʔυΛڞ༗͠ͳ͕ΒɺΈΜͳͰϒϨετ
24. ίωΫςΟϏςΟʔ ‣ 8FC(-ਫ଒ؗ
    ‣ 8FC4PDLFUΛར༻ͯ͠ɺෳ਺୆ͷϚγϯͷϒϥ΢βΛಉظ
    ‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr
25. ϚϧνϝσΟΞ ‣ ΦʔσΟΦ΍ϏσΦͷऔΓѻ͍͕༰қʹ
    ‣ 8FCΞϓϦͷதʹө૾΍ԻָΛ੝ΓࠐΊΔ
    ‣ ࡉ͔ͳΧελϚΠζ΋
26. ϚϧνϝσΟΞ ‣ ϏσΦө૾ʹϦΞϧλΠϜʹϚεΫॲཧ
    ‣ http://www.apple.com/html5/showcase/video/
27. ϚϧνϝσΟΞ ‣ 5IF
    $POEVDUPS
    IUUQXXXNUBNF
    ‣ ϒϥ΢βͰԻΛ૗ͰΔ࡞඼
28. %ɺάϥϑΟΫεɺΤϑΣΫτ ‣ %ɺ%ɺϕΫλʔσʔλͳͲ༷ʑͳܗࣜͷը૾Λදࣔ
    ! ‣ $BOWBTɿ%άϥϑΟΫεɺΞχϝʔγϣϯ
    ‣ 8FC(-ɿϒϥ΢β্Ͱɺ%άϥϑΟΫεΛදࣔ
    ‣ 47(ɿϕΫλʔσʔλ
29. %ɺάϥϑΟΫεɺΤϑΣΫτ ‣ $BOWBT
    %ʹΑΔΞχϝʔγϣϯͷσϞ
    ‣ http://yoppa.org/blog/2683.html
30. %ɺάϥϑΟΫεɺΤϑΣΫτ ‣ .BHJD
    EVTU
    IUUQNSEPPCDPNNBHJD@EVTU
31. %ɺάϥϑΟΫεɺΤϑΣΫτ ‣ $ISZTBPSB
    IUUQDISZTBPSBDPN
32. $44ɺελΠϦϯά ‣ $44ͷදݱྗ͕ɺΑΓ๛͔ʹ
    ! ‣ 8FCGPOUTɺίϥϜɺಁ໌౓ɺؙ֯ɺάϥσʔγϣϯɺυϩο ϓγϟυ΢ɺ൓ࣹɺτϥϯδγϣϯ Ξχϝʔγϣϯ ɺճసɾ Ҡಈɺ
    ! ‣ HTML Rocks - CSS3
33. $44ɺελΠϦϯά ‣ $44
    1MBZHPVOE
    
    $44ͷ࣮ݧ৔
    ‣ http://css3.mikeplate.com/
34. ύϑΥʔϚϯεɺΠϯςάϨʔγϣϯ ‣ 8FCΞϓϦΛߴ଎Խ͢Δ༷ʑͳٕज़
    ! ‣ 8FC
    8PSLFSTɿϒϥ΢β্Ͱฒྻॲཧ
    ‣ $44ͷηϨΫλͷਐԽ
    ‣ ϒϥ΢βͷώετϦ৘ใΛૢ࡞
    FUD
    ! ‣ 8FCΞϓϦΛΑΓߴ଎ʹɺշదʹ͢ΔͨΊͷجૅٕज़ͷൃల
35. $ISPNF
    &YQFSJNFOUT
     ‣ IUUQDISPNFFYQFSJNFOUTDPN
    ‣ $ISPNF
    &YQFSJNFOUTʹϐοΫΞοϓ͞ΕͨͷαΠτ
36. ·ͱΊ ‣ )5.-ͷීٴʹΑͬͯ8FCͷϢʔβମݧ͸େ͖͘มԽ͢Δ
    ‣ 8FCϒϥ΢βࣗମ͕ΞϓϦέʔγϣϯͷϓϥοτϑΥʔϜ΁
    ‣ ϒϥ΢β͕04ʹ
    
    $ISPNF
    04
    ‣ ʮ8FCදݱʯʹٻΊΒΕΔεΩϧ΋࣌୅ͱͱ΋ʹมԽ
    ‣ ͜ͷतۀͰ͸ɺ৽ͨͳٕज़Λੵۃతʹ׆༻ͯ͠ɺදݱ͢Δख ๏ʹֶ͍ͭͯΜͰ͍͖͍ͨ
37. )5.-
    ͸͡ΊͷҰา
38. )5.-
    ͸͡ΊͷҰา ‣ )5.-͔Βಋೖ͞Εͨ৽͍͠ཁૉΛ࢖༻ͯ͠ɺ)5.-ͷϖʔ δΛ࡞੒ͯ͠ΈΔ
    ‣ $44Ͱ࡞੒ͨ͠)5.-ͷϖʔδΛߏ଄ʹଈͯ͠ϨΠΞ΢τ
    ‣ $44ʹಋೖ͞Ε༷ͨʑͳදݱख๏Λࢼͯ͠ΈΔ
39. )5.-
    ͸͡ΊͷҰา ‣ ࡞੒͢ΔϖʔδͷΠϝʔδ
    ‣ ্ԼʹϔομʔͱϑολʔɺࠨʹφϏήʔγϣϯӈʹෳ਺ه ࣄ͔ΒͳΔϝΠϯίϯςϯπ
40. )5.-
    ͸͡ΊͷҰา ‣ )5.-Ҏલ
    )5.-ɺ9)5.-
    Ͱͷ΍Γ͔ͨ
    ! ‣ EJWཁૉΛ࢖༻ͯ͠ɺϖʔδΛߏ଄ͷ୯Ґ͝ͱʹ෼ׂ
    ‣ ͦΕͧΕͷEJWཁૉʹJEଐੑɺ·ͨ͸DMBTTଐੑΛ෇༩
    ‣ ଐੑͷ໊લ͔Βɺ$44͔ΒͦΕͧΕͷཁૉ΁ΞΫηε
    ‣ $44ͰϨΠΞ΢τ΍ݸผͷσβΠϯΛهड़
41. )5.-
    ͸͡ΊͷҰา ‣ )5.-Ҏ߱Ͱ͸ɺҙຯ ηϚϯςΟΫε ʹΑΔϚʔΫΞο ϓ͕ՄೳͱͳΔ
    ! ‣ )5.-ͷϖʔδͷߏ଄Λࢦఆ͢Δཁૉ
    ‣ TFDUJPO
    ຊͷҰ෦͋Δ͍͸ষɺষͷηΫγϣϯɺ͋Δ͍͸ جຊతʹ
    )5.-
    
    Ͱಠࣗͷݟग़͠Λ࣋ͭ͢΂ͯͷ΋ͷ
    ‣ IFBEFS
    ϖʔδʹදࣔ͞ΕΔϖʔδɾϔομʔɺIFBE
    ཁ ૉͱ͸શ͘ҙຯ߹͍͕ҧ͏ͷͰ஫ҙ
    ‣ GPPUFS
    ࡉ͔͍จࣈͰͷઆ໌͕ೖΔϖʔδɾϑολʔɺ &NBJMɾϝοηʔδͷॺ໊ͳͲ͕ೖΔ
    ‣ OBW
    ଞͷϖʔδ΁ͷϦϯΫͷू·Γ
    ‣ BSUJDMF
    ϒϩά΍
    8FC
    ϚΨδϯɺҰཡهࣄͳͲʹܝࡌ͞Ε ͍ͯΔݸʑͷΤϯτϦʔ
42. )5.-
    ͸͡ΊͷҰา ‣ )5.-ɺ9)5.-ͰͷϚʔΫΞοϓ
43. )5.-
    ͸͡ΊͷҰา ‣ )5.-Ͱ͸͜͏ͳΔ
44. )5.-
    ͸͡ΊͷҰา ‣ ࣮ࡍʹ)5.-Λهड़͢ΔͨΊͷ਽ܗΛ༻ҙ͢Δ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5ͱCSS3ʹΑΔϖʔδαϯϓϧ</title> </head> <body> <h1>HTML5 + CSS3, Layout Sample</h1> <h2>Media Literacy 2011, Tama Art University</h2> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> <h2>͜ͷαΠτʹ͍ͭͯ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒ…</p> <h3>HTML5ͱCSS3ʹΑΔ๛͔ͳදݱ</h3> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒ…</p> <h2>͞Βʹผͷهࣄ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒ…</p>
45. )5.-
    ͸͡ΊͷҰา ‣ ࣮ࡍʹ)5.-Λهड़͢ΔͨΊͷ਽ܗΛ༻ҙ͢Δ
    ͖ͭͮ <h2>Navigation</h2> <ul> <li><a href="#">example 1 </a></li> <li><a href="#">example 2 </a></li> <li><a href="#">example 3 </a></li> <li><a href="#">example 4 </a></li> <li><a href="#">example 5 </a></li> <li><a href="#">example 6 </a></li> <li><a href="#">example 7 </a></li> <li><a href="#">example 8 </a></li> </ul> <p>This site is licensed under a Creative Commons License.</p> </body> </html>
46. )5.-
    ͸͡ΊͷҰา ‣ ͜ͷϖʔδͷߏ଄
    ! ‣ ϔομʔ
    ‣ େݟग़͠
    I
    ‣ தݟग़͠
    I
    ‣ ϔομʔϝχϡʔ
    VM
    MJ
    ‣ ηΫγϣϯ
    ‣ هࣄ
    ‣ େݟग़͠
    I
    ‣ ஈམ
    Q
    ‣ தݟग़͠
    I
    ‣ ஈམ
    Q
    ‣ هࣄ
    ‣ େݟग़͠
    I
    ‣ ஈམ
    Q
    ‣ φϏήʔγϣϯ
    ‣ େݟग़͠
    I
    ‣ φϏήʔγϣϯϝχϡʔ
    VM
    MJ
    ‣ ϑολʔ
    ‣ ஈམ
47. )5.-
    ͸͡ΊͷҰา ‣ ϒϥ΢βͰදࣔ
48. )5.-
    ͸͡ΊͷҰา ‣ ͜ͷϖʔδΛ)5.-ʹॻ͖׵͍͑ͯ͘
    ‣ ҙຯͷߏ଄ ηϚϯςΟΫε Λ)5.-ͰϚʔΫΞοϓ
    ! ‣ ϔομʔ
    ˠ
    IFBEFSཁૉ
    ‣ ݟग़͠ͷ·ͱ·Γ
    ˠ
    IHSPVQཁૉ
    ‣ ݸผͷهࣄ
    ˠ
    BSUJDMFཁૉ
    ‣ φϏήʔγϣϯ
    ˠ
    OBWཁૉ
    ‣ ϑολʔ
    ˠ
    GPPUFSཁૉ
49. )5.-
    ͸͡ΊͷҰา ‣ )5.-Ͱߏ଄Խͨ͠αϯϓϧ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5ͱCSS3ʹΑΔϖʔδαϯϓϧ</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <header> <hgroup> <h1>HTML5 + CSS3, Layout Sample</h1> <h2>Media Literacy 2011, Tama Art University</h2> </hgroup> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </header> <div id="main"> <article> <h1>͜ͷαΠτʹ͍ͭͯ</h1> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ…</p> <h2>HTML5ͱCSS3ʹΑΔ๛͔ͳදݱ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ…</p>
50. )5.-
    ͸͡ΊͷҰา ‣ )5.-Ͱߏ଄Խͨ͠αϯϓϧ
    ͖ͭͮ </article> <article> <h1>͞Βʹผͷهࣄ</h1> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ…</p> </article> </div> <nav> <h1>Navigation</h1> <ul> <li><a href="#">example 1 </a></li> <li><a href="#">example 2 </a></li> <li><a href="#">example 3 </a></li> <li><a href="#">example 4 </a></li> <li><a href="#">example 5 </a></li> <li><a href="#">example 6 </a></li> <li><a href="#">example 7 </a></li> <li><a href="#">example 8 </a></li> </ul> </nav> <footer> <p>This site is licensed under a Creative Commons License</p> </footer> </body> </html>
51. )5.-
    ͸͡ΊͷҰา ‣ )5.-Ͱߏ଄Խͨ͠ϖʔδΛϒϥ΢βͰ։͍ͯΈΔ
    ‣ ʜݟͨ໨ʹ͸มԽͳ͠
    ˠ
    Կނ͔
    ‣ )5.-ͷߏ଄Խཁૉ͸จষͷ۠෼ΛϚʔΫΞοϓ͢Δ͚ͩ
    ‣ ҙຯߏ଄Λड͚ͯɺͲͷΑ͏ʹϨΠΞ΢τ͢Δͷ͔͸ɺ͍· ·Ͱͷ)5.-ͱಉ༷ʹελΠϧγʔτΛ࢖༻
52. )5.-
    ͸͡ΊͷҰา ‣ $44Λద༻͢ΔͨΊIFBEཁૉʹ௥Ճ
    ‣ $44΁ͷϦϯΫΛهड़ɿTUZMFDTT
    ! ‣ *OUFSOFU
    &YQMPSFSରࡦ
    ‣ *&ͷ)5.-ରԠ͸͋·Γྑ͘ͳ͍ʜ
    ‣ *&ରࡦͷͨΊʹɺIUNMTIJNͱ͍͏*&Λ)5.-
    ʹରԠͤ͞ ΔͨΊͷ+BWB4DSJQU
    IUNMKT
    Λར༻
    ‣ http://code.google.com/p/html5shim/
53. )5.-
    ͸͡ΊͷҰา ‣ IFBEཁૉ͸ҎԼͷΑ͏ʹͳΔ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5ͱCSS3ʹΑΔϖʔδαϯϓϧ</title> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></ script> <![endif]--> <link rel="stylesheet" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> ! <!-- ҎԼলུ -->
54. )5.-
    ͸͡ΊͷҰา ‣ ϖʔδͷϨΠΞ΢τΛ$44Ͱهड़ body { width:960px; margin:20px auto; } ! header, nav, footer, #main { display:block; border:1px solid #ccc; margin:5px; padding:20px; } ! header { text-align:center; padding:30px; } ! header ul, header li { list-style-type:none; display:inline; } ! nav { float:right; width:236px; }
55. )5.-
    ͸͡ΊͷҰา ‣ ϖʔδͷϨΠΞ΢τΛ$44Ͱهड़
    ͖ͭͮ ! #main { float:right; width:620px; } ! footer { clear:both !important; text-align: center; }
56. )5.-
    ͸͡ΊͷҰา ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ
57. )5.-
    ͸͡ΊͷҰา ‣ $44ͷࢹ֮ޮՌΛར༻͢Δ
    ! ‣ CSS3Ͱ͸ɺҎલͷόʔδϣϯʹൺ΂ͯେ෯ʹػೳ͕ڧԽ ‣ 8FCGPOUTɺίϥϜɺಁ໌౓ɺؙ֯ɺάϥσʔγϣϯɺυϩο ϓγϟυ΢ɺ൓ࣹɺτϥϯδγϣϯ Ξχϝʔγϣϯ ɺճసɾ Ҡಈɺ
    ‣ HTML Rocks - CSS3
58. )5.-
    ͸͡ΊͷҰา ‣ $44
    1MBZHPVOE
    
    $44ͷ࣮ݧ৔
    ‣ http://css3.mikeplate.com/ 5FYU
59. )5.-
    ͸͡ΊͷҰา ‣ $44Λ׆༻ͯ͠ΈΔ
    
    
     body { background:#aaa; font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif; color:#000; margin:20px auto; text-align:center; line-height:1.5em; width:960px; } h1, h2, h3, h4, h5, h6 { font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif; font-weight:lighter; } a:link, a:visited { color:#c00; text-decoration:none; } a:hover { color:#0cc; } header, nav, #main, footer { display:block; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 0px 4px #666;
60. )5.-
    ͸͡ΊͷҰา ‣ $44Λ׆༻ͯ͠ΈΔ
    
    
     -moz-box-shadow: 0px 0px 4px #666; box-shadow: 0px 0px 4px #666; border: 1px solid #d3d3d3; background-color: #fff; margin:5px; padding: 0 20px 10px 20px; font-size: 12pt; color: #000; text-align: left; } header { text-align:center; padding:30px; background-image: -moz-linear-gradient(top, #888, #333); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #888), color-stop(1.0, #333)); background-color: #444; border:none; color:#fff; text-shadow: 0px 0px 4px #000000; } header h1, header h2, header h3, header h4, header h5, header h6, header li, header p { font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif; }
61. )5.-
    ͸͡ΊͷҰา ‣ $44Λ׆༻ͯ͠ΈΔ
    
    
     header h1 { font-size:2.3em; text-transform:none; letter-spacing:0em; } header h2 { margin:-10px 0px 20px; font-size:1.3em; } header ul { padding:0px; list-style-type:none; display:inline; } header li { margin:0px 10px; padding:0px; list-style-type:none; display:inline; } header a:link, nav a:visited { font-weight:normal; }
62. )5.-
    ͸͡ΊͷҰา ‣ $44Λ׆༻ͯ͠ΈΔ
    
    
     nav { float:right; width:200px; } nav h1 { font-size:1.4em; } #main { float:right; width:656px; text-align:left; margin-bottom:10px; } #main h1, nav h1 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color:#444; color:#fff; padding:10px; margin:10px -10px; text-shadow:1px 1px 5px #000; }
63. )5.-
    ͸͡ΊͷҰา ‣ $44Λ׆༻ͯ͠ΈΔ
    
    
     #main ul { padding:0px; list-style:none; border-top:1px solid #e7e2d7; margin:14px 0px; } #main li { margin:0px; padding:0px; list-style:none; } #main li a:link, #main li a:visited { float:left; width:96%; padding:3px 1%; border-bottom:1px solid #e7e2d7; } #main li a:hover { background:#f2f1ec; } #main p { font-size:0.9em; } article { margin:0 0 30px 0; }
64. )5.-
    ͸͡ΊͷҰา ‣ $44Λ׆༻ͯ͠ΈΔ
    
    
     footer { clear:both !important; padding:10px; background-color: #444; border:none; color:#fff; font-size:0.8em; text-align:center; } footer a { margin:0px 5px; }
65. )5.-
    ͸͡ΊͷҰา ‣ $44Λద༻ͨ݁͠Ռ
66. )5.-
    ͸͡ΊͷҰา ‣ ·ͱΊ
    ! ‣ ࠓճͷतۀɺ)5.-ͱ$44ͷಋೖ
    ‣ ߏ଄ԽͷͨΊͷ৽ཁૉΛར༻
    ‣ )5.-ʹҙຯཁૉΛ༩͑ɺͦΕΛར༻ͯ͠$44ͰϨΠΞ΢ τ΍σβΠϯΛߦ͏ํ๏
    ‣ ͔͠͠ɺ)5.-
    ͰՄೳͱͳͬͨ͜ͱ͸ΑΓ޿ൣғʹ౉Δ
    ‣ ࣍ճ͸ΑΓಈతͳදݱʹ͍ͭͯͱΓ͍͖͍͋͛ͨ