)5.-
͸͡ΊͷҰา 

)5.-
͸͡ΊͷҰา ‣ )5.-͔Βಋೖ͞Εͨ৽͍͠ཁૉΛ࢖༻ͯ͠ɺ)5.-ͷϖʔ δΛ࡞੒ͯ͠ΈΔ ‣ $44Ͱ࡞੒ͨ͠)5.-ͷϖʔδΛߏ଄ʹଈͯ͠ϨΠΞ΢τ ‣ $44ʹಋೖ͞Ε༷ͨʑͳදݱख๏Λࢼͯ͠ΈΔ 

)5.-
͸͡ΊͷҰา ‣ ࡞੒͢ΔϖʔδͷΠϝʔδ ‣ ্ԼʹϔομʔͱϑολʔɺࠨʹφϏήʔγϣϯӈʹෳ਺هࣄ ͔ΒͳΔϝΠϯίϯςϯπ 

)5.-
͸͡ΊͷҰา ‣ )5.-Ҏલ
)5.-ɺ9)5.-
Ͱͷ΍Γ͔ͨ ‣ EJWཁૉΛ࢖༻ͯ͠ɺϖʔδΛߏ଄ͷ୯Ґ͝ͱʹ෼ׂ ‣ ͦΕͧΕͷEJWཁૉʹJEଐੑɺ·ͨ͸DMBTTଐੑΛ෇༩ ‣ ଐੑͷ໊લ͔Βɺ$44͔ΒͦΕͧΕͷཁૉ΁ΞΫηε ‣ $44ͰϨΠΞ΢τ΍ݸผͷσβΠϯΛهड़ 

)5.-
͸͡ΊͷҰา ‣ )5.-Ҏ߱Ͱ͸ɺҙຯ ηϚϯςΟΫε ʹΑΔϚʔΫΞοϓ͕ ՄೳͱͳΔ ‣ )5.-ͷϖʔδͷߏ଄Λࢦఆ͢Δཁૉ ‣ TFDUJPO
ຊͷҰ෦͋Δ͍͸ষɺষͷηΫγϣϯɺ͋Δ͍͸ جຊతʹ
)5.-

Ͱಠࣗͷݟग़͠Λ࣋ͭ͢΂ͯͷ΋ͷ ‣ IFBEFS
ϖʔδʹදࣔ͞ΕΔϖʔδɾϔομʔɺIFBE
ཁૉ ͱ͸શ͘ҙຯ߹͍͕ҧ͏ͷͰ஫ҙ ‣ GPPUFS
ࡉ͔͍จࣈͰͷઆ໌͕ೖΔϖʔδɾϑολʔɺ &NBJMɾϝοηʔδͷॺ໊ͳͲ͕ೖΔ ‣ OBW
ଞͷϖʔδ΁ͷϦϯΫͷू·Γ ‣ BSUJDMF
ϒϩά΍
8FC
ϚΨδϯɺҰཡهࣄͳͲʹܝࡌ͞Ε ͍ͯΔݸʑͷΤϯτϦʔ 

)5.-
͸͡ΊͷҰา ‣ )5.-ɺ9)5.-ͰͷϚʔΫΞοϓ 

)5.-
͸͡ΊͷҰา ‣ )5.-Ͱ͸͜͏ͳΔ 

)5.-
͸͡ΊͷҰา ‣ ࣮ࡍʹ)5.-Λهड़͢ΔͨΊͷ਽ܗΛ༻ҙ͢Δ ! ! ! ! ! HTML5ͱCSS3ʹΑΔϖʔδαϯϓϧ ! ! ! !

HTML5 + CSS3, Layout Sample

! !

Media Literacy 2011, Tama Art University

! !

! ! !
• Home
! ! !
• Menu 1
! ! !
• Menu 2
! ! !
• Menu 3
! !

! !

͜ͷαΠτʹ͍ͭͯ

! !

͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒ…

! !

HTML5ͱCSS3ʹΑΔ๛͔ͳදݱ

! !

͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒ…

! !

͞Βʹผͷهࣄ

! !

͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒ…



)5.-
͸͡ΊͷҰา ‣ ࣮ࡍʹ)5.-Λهड़͢ΔͨΊͷ਽ܗΛ༻ҙ͢Δ
͖ͭͮ ! !

Navigation

! !

! ! !
• example 1
! ! !
• example 2
! ! !
• example 3
! ! !
• example 4
! ! !
• example 5
! ! !
• example 6
! ! !
• example 7
! ! !
• example 8
! !

! !

This site is licensed under a Creative Commons License.

! 

)5.-
͸͡ΊͷҰา ‣ ͜ͷϖʔδͷߏ଄ ‣ ϔομʔ ‣ େݟग़͠
I ‣ தݟग़͠
I ‣ ϔομʔϝχϡʔ
VM
MJ ‣ ηΫγϣϯ ‣ هࣄ ‣ େݟग़͠
I ‣ ஈམ
Q ‣ தݟग़͠
I ‣ ஈམ
Q ‣ هࣄ ‣ େݟग़͠
I ‣ ஈམ
Q ‣ φϏήʔγϣϯ ‣ େݟग़͠
I ‣ φϏήʔγϣϯϝχϡʔ
VM
MJ ‣ ϑολʔ ‣ ஈམ 

)5.-
͸͡ΊͷҰา ‣ ϒϥ΢βͰදࣔ 

)5.-
͸͡ΊͷҰา ‣ ͜ͷϖʔδΛ)5.-ʹॻ͖׵͍͑ͯ͘ ‣ ҙຯͷߏ଄ ηϚϯςΟΫε Λ)5.-ͰϚʔΫΞοϓ ‣ ϔομʔ
ˠ
IFBEFSཁૉ ‣ ݟग़͠ͷ·ͱ·Γ
ˠ
IHSPVQཁૉ ‣ ݸผͷهࣄ
ˠ
BSUJDMFཁૉ ‣ φϏήʔγϣϯ
ˠ
OBWཁૉ ‣ ϑολʔ
ˠ
GPPUFSཁૉ 

)5.-
͸͡ΊͷҰา ‣ )5.-Ͱߏ଄Խͨ͠αϯϓϧ ! ! ! ! ! HTML5ͱCSS3ʹΑΔϖʔδαϯϓϧ ! ! ! ! ! ! ! ! ! ! ! ! !

HTML5 + CSS3, Layout Sample

! ! ! !

Media Literacy 2011, Tama Art University

! ! ! ! ! !

! ! ! !
• Home
! ! ! !
• Menu 1
! ! ! !
• Menu 2
! ! ! !
• Menu 3
! ! !

! ! ! !

)5.-
͸͡ΊͷҰา ‣ )5.-Ͱߏ଄Խͨ͠αϯϓϧ
͖ͭͮ ! ! ! ! ! ! ! ! ! !

͞Βʹผͷهࣄ

! ! ! !

͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺՆͰ΋ఈʹྫྷͨ͞Λ…

! ! ! ! ! ! ! ! ! !

Navigation

! ! !

! ! ! !
• example 1
! ! ! !
• example 2
! ! ! !
• example 3
! ! ! !
• example 4
! ! ! !
• example 5
! ! ! !
• example 6
! ! ! !
• example 7
! ! ! !
• example 8
! ! !

! ! ! ! ! ! !

This site is licensed under a Creative Commons License

! ! ! 

)5.-
͸͡ΊͷҰา ‣ )5.-Ͱߏ଄Խͨ͠ϖʔδΛϒϥ΢βͰ։͍ͯΈΔ ‣ ʜݟͨ໨ʹ͸มԽͳ͠
ˠ
Կނ͔ ‣ )5.-ͷߏ଄Խཁૉ͸จষͷ۠෼ΛϚʔΫΞοϓ͢Δ͚ͩ ‣ ҙຯߏ଄Λड͚ͯɺͲͷΑ͏ʹϨΠΞ΢τ͢Δͷ͔͸ɺ͍·· Ͱͷ)5.-ͱಉ༷ʹελΠϧγʔτΛ࢖༻ 

)5.-
͸͡ΊͷҰา ‣ $44Λద༻͢ΔͨΊIFBEཁૉʹ௥Ճ ‣ $44΁ͷϦϯΫΛهड़ɿTUZMFDTT ‣ *OUFSOFU
&YQMPSFSରࡦ ‣ *&ͷ)5.-ରԠ͸͋·Γྑ͘ͳ͍ʜ ‣ *&ରࡦͷͨΊʹɺIUNMTIJNͱ͍͏*&Λ)5.-
ʹରԠͤ͞Δ ͨΊͷ+BWB4DSJQU
IUNMKT
Λར༻ ‣ http://code.google.com/p/html5shim/ 

)5.-
͸͡ΊͷҰา ‣ IFBEཁૉ͸ҎԼͷΑ͏ʹͳΔ ! ! ! ! ! HTML5ͱCSS3ʹΑΔϖʔδαϯϓϧ ! ! ! ! ! ! ! ! ! ! 

)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; } 

)5.-
͸͡ΊͷҰา ‣ ϖʔδͷϨΠΞ΢τΛ$44Ͱهड़
͖ͭͮ #main { float:right; width:620px; } footer { clear:both !important; text-align: center; } 

)5.-
͸͡ΊͷҰา ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ 

)5.-
͸͡ΊͷҰา ‣ $44ͷࢹ֮ޮՌΛར༻͢Δ ‣ CSS3Ͱ͸ɺҎલͷόʔδϣϯʹൺ΂ͯେ෯ʹػೳ͕ڧԽ ‣ 8FCGPOUTɺίϥϜɺಁ໌౓ɺؙ֯ɺάϥσʔγϣϯɺυϩο ϓγϟυ΢ɺ൓ࣹɺτϥϯδγϣϯ Ξχϝʔγϣϯ ɺճసɾ Ҡಈɺ ‣ HTML Rocks - CSS3 

‣ $44
1MBZHPVOE

$44ͷ࣮ݧ৔ ‣ http://css3.mikeplate.com/ )5.-
͸͡ΊͷҰา Text 

)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; 

)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; } 

)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; } 

)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; } 

)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; } 

)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; } 

)5.-
͸͡ΊͷҰา ‣ $44Λద༻ͨ݁͠Ռ 

)5.-
͸͡ΊͷҰา ‣ ·ͱΊ ‣ ࠓճͷतۀɺ)5.-ͱ$44ͷಋೖ ‣ ߏ଄ԽͷͨΊͷ৽ཁૉΛར༻ ‣ )5.-ʹҙຯཁૉΛ༩͑ɺͦΕΛར༻ͯ͠$44ͰϨΠΞ΢τ΍ σβΠϯΛߦ͏ํ๏ ‣ ͔͠͠ɺ)5.-
ͰՄೳͱͳͬͨ͜ͱ͸ΑΓ޿ൣғʹ౉Δ ‣ ࣍ճ͸ΑΓಈతͳදݱʹ͍ͭͯͱΓ͍͖͍͋͛ͨ