- PDF 無料ダウンロード

Size: px

Start display at page:

Download ""

きみとしてっちがわら
9 years ago
Views:

1 HTML5 による Webサイト制作の基本株式会社サイバーガーデン益子貴寛 2012年4月7日土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft

10 アップル

11 ローソン

24 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>... <img> <img />

25 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>...

26 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>... charset

27 <meta http-equiv="content-type"... /> <meta http-equiv="content-style-type"... /> <meta http-equiv="content-script-type"... /> <link rel="stylesheet" type="text/css"... /> <script type="text/javascript"... ></script> head

28 <div id="header"> <header id="page-header"> <div id="footer"> <div id="utility-nav"> <footer id="page-footer"> <nav id="utility-nav"> <div id="news"> <section class="news"> id class

29 div div div div div div

30 header nav section aside section footer

32 section, nav, article, aside, hgroup, header, footer, figure, figcaption, summary { display: block; }

34 /* */ #header { height: 80px; } #header h1 { width: 960px; margin: 0 auto; padding: 20px px; } /* */ #page-header { height: 80px; } #page-header h1 { width: 960px; margin: 0 auto; padding: 20px px; } id class

41

54 IE 6/7 IE 8 Windows XP IE 8 IE 9 Windows Vista/7 Internet Explorer ブログ日本語版

56 死ぬ IE 6 がまでおっ The Internet Explorer 6 Countdown

75 section nav article aside hgroup h1 h2 header footer figure figcaption time mark ruby rt rp wbr bdi

76 canvas embed track math svg datalist keygen video audio source output progress meter details summary command

77 address hr strong small i u b menu

78 section nav article aside hgroup h1 h2 header footer figure figcaption time mark ruby rt rp wbr bdi

81 header nav といった感じでおおざっぱに考えれば OK

84 header nav コンテナの背景画像として設定またはもう少しテキスト情報を充実させて section に section nav section

85 section section section

86 footer section

88 h1 header form p ul nav コンテナの背景画像として設定またはもう少しテキスト情報を充実させて section に h2 h3 p section h2 ul nav section ul

89 ul section h2 dl section section

90 h2 section dl まあ div あたりでよいのでは small footer p

92 contenteditable contextmenu draggable hidden spellchack translate data-* * role aria-* * itemscope input textarea select autocomplete input textarea select list datalist input textarea select required input textarea select pattern input textarea select step input textarea select placeholder input textarea select autofocus input textarea select form form

93 type="search" type="tel" type="url" type=" " type="datetime" type="date" input type="month" type="week" type="time" type="datetime-local" type="number" type="range" type="color" html manifest

97 <input... x-autocompletetype="surname" /> <input... x-autocompletetype="given-name" /> <input... x-autocompletetype=" " /> : : <input... x-autocompletetype="state" /> <input... x-autocompletetype="city" /> <input... x-autocompletetype="address-line1" /> <input... x-autocompletetype="address-line2" /> x-autocompletetype

99 async defer <script async defer src="..."></script> async defer async defer

100 scoped <section> <style scoped> p { color: black; } </style> <h1> </h1> <p> </p>  </section> <p> </p>

101 @global <section> <style p { color: black; } </style> <h1> </h1> <p> </p>  </section> <p> </p>  scoped

102 data-* <a data-url="..." data-title="..."> </a> <img src="..." alt=" " />

103 role aria-* <section id="main" role="main"> <li role="treeitem" aria-expanded="true">

104 itemscope itemtype itemprop <div itemscope itemtype=" <h1 itemprop="name"> </h1> <span> <span itemprop="director"> </span> </span> <span itemprop="genre"> </span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"> </a> </div>

105

106

107 <h1> <h6> <hgroup> <section> <article> <aside> <nav> <body> <blockquote> <details> <fieldset> <figure> <dt>

108 <header> <h1> </h1> <h2> </h2> </header> <h3> </h3> <p> </p>... <header> <hgroup> <h1> </h1> <h2> </h2> </hgroup> </header> <h3> </h3> <p> </p> <h1> <h6>... <hgroup>

109 <h1> </h1> <p> </p> <h2> </h2> <p> </p> <h3> </h3> <p> </p>... <h1> </h1> <p> </p> <article> <h1> </h1> <p> </p> <h2> </h2> <p> </p> </article>...

110 <h1> </h1> <p> </p> <h2> </h2> <p> </p> <h3> </h3> <p> </p>... <h1> </h1> <p> </p> <blockquote> <h2> </h2> <p> </p> </blockquote> <h3> </h3> <p> </p>...

111 <section> <h1> </h1> <section> <h2> </h2> <section> <h3> </h3> </section> </section> </section> <section> <h1> </h1> <section> <h1> </h1> <section> <h1> </h1> </section> </section> </section> <h1> </h1> <h2> </h2> <h3> </h3>

112

113

114

115

116

117 ありがとうございました Facebook:

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /