Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5でマークアップ、初めの一歩

 HTML5でマークアップ、初めの一歩

Atsushi Tadokoro

May 15, 2014
Tweet

More Decks by Atsushi Tadokoro

Other Decks in Technology

Transcript

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

    جຊతʹ)5.-Ͱಠࣗͷݟग़͠Λ࣋ͭ͢΂ͯͷ΋ͷ ‣ IFBEFSϖʔδʹදࣔ͞ΕΔϖʔδɾϔομʔɺIFBEཁૉ ͱ͸શ͘ҙຯ߹͍͕ҧ͏ͷͰ஫ҙ ‣ GPPUFSࡉ͔͍จࣈͰͷઆ໌͕ೖΔϖʔδɾϑολʔɺ &NBJMɾϝοηʔδͷॺ໊ͳͲ͕ೖΔ ‣ OBWଞͷϖʔδ΁ͷϦϯΫͷू·Γ ‣ BSUJDMFϒϩά΍8FCϚΨδϯɺҰཡهࣄͳͲʹܝࡌ͞Ε ͍ͯΔݸʑͷΤϯτϦʔ
  2. )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>
  3. )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>
  4. )5.-͸͡ΊͷҰา ‣ ͜ͷϖʔδͷߏ଄ ‣ ϔομʔ ‣ େݟग़͠I ‣ தݟग़͠I ‣

    ϔομʔϝχϡʔVM MJ ‣ ηΫγϣϯ ‣ هࣄ ‣ େݟग़͠I ‣ ஈམQ ‣ தݟग़͠I ‣ ஈམQ ‣ هࣄ ‣ େݟग़͠I ‣ ஈམQ ‣ φϏήʔγϣϯ ‣ େݟग़͠I ‣ φϏήʔγϣϯϝχϡʔVM MJ ‣ ϑολʔ ‣ ஈམ
  5. )5.-͸͡ΊͷҰา ‣ ͜ͷϖʔδΛ)5.-ʹॻ͖׵͍͑ͯ͘ ‣ ҙຯͷߏ଄ ηϚϯςΟΫε Λ)5.-ͰϚʔΫΞοϓ ‣ ϔομʔˠIFBEFSཁૉ ‣

    ݟग़͠ͷ·ͱ·ΓˠIHSPVQཁૉ ‣ ݸผͷهࣄˠBSUJDMFཁૉ ‣ φϏήʔγϣϯˠOBWཁૉ ‣ ϑολʔˠGPPUFSཁૉ
  6. )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>
  7. )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>
  8. )5.-͸͡ΊͷҰา ‣ $44Λద༻͢ΔͨΊIFBEཁૉʹ௥Ճ ‣ $44΁ͷϦϯΫΛهड़ɿTUZMFDTT ‣ *OUFSOFU&YQMPSFSରࡦ ‣ *&ͷ)5.-ରԠ͸͋·Γྑ͘ͳ͍ʜ ‣

    *&ରࡦͷͨΊʹɺIUNMTIJNͱ͍͏*&Λ)5.-ʹରԠͤ͞Δ ͨΊͷ+BWB4DSJQU IUNMKT Λར༻ ‣ http://code.google.com/p/html5shim/
  9. )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> ! <!-- ҎԼলུ -->
  10. )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; }
  11. )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;
  12. )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; }
  13. )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; }
  14. )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; }
  15. )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; }
  16. )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; }