96's blog

WEBサイト制作科 6ヶ月コース

HTML5

HTMLの変遷

HTML5マークアップ

  • HTMLタグのhr、br、bなどは文章構造としての意味はないので使わない。
  • 以前はh要素でレイアウト構造を分けていたため、同じレベルのhを複数使えなかったが、現在はsectionでレイアウト分けしているため、hを複数使うことができる。順番も自由。ただし、クローラー対策としてh1の使用は1回。
  • スマホ用サイトは全体を囲うdiv id="container"は不要。

DreamWeaverでのコーディング

  • テキストデータをデザインビューに流し込むと自動でpタグに囲まれる。pタグを区切るときは、1行空ける。
  • プロパティでhタグをつけられる。
  • コマンド→ソースフォーマットの適用で、自動でインテンド。
  • リセットCSS eric meyerのサイトからダウンロード
  • sectionタグの中にsectionタグを設置した場合は、CSSセレクタはsection > sectionになる。以降sectionを入れるごとに> sectionを追加していく。

HTML

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>html5テンプレート</title>
<linkhref="css/reset.css"rel="stylesheet"type="text/css">
<linkhref="css/style.css"rel="stylesheet"type="text/css">
</head>
<body>
<divid="container">
  <header>
    <h1>HTML5の使い所</h1>
    <p>W3Cの勧告までカウントダウン!さてIEは追従できるか否か!?</p>
  </header>
  <nav>
    <ulclass="global">
      <li>1章:html5使い所</li>
      <li>2章:W3Cの勧告</li>
      <li>3章:DTD宣言</li>
      <li>4章:スマホサイト</li>
      <li>5章:Media Queries</li>
    </ul>
  </nav>
  <article>
    <section><!--1章-->
      <h2>html5使い所】</h2>
      <p>「これからはHTML5だ!」といきり立たず、どんな場合にhtml5のタグを使用できるのかしっかり学ぼう。スマホのブラウザシェアーが凄い勢いで伸びているが、まだまだコア層はIE8と9だ。</p>
    </section><!--1章-->
    <section><!--2章-->
      <h2>W3Cの勧告】</h2>
      <p>来年に迫るW3Cの勧告で、WHATWG、W3C、そしてブラウザごとにバラバラに開発されていたhtml5が統一されるのか否か。</p>
    </section><!--2章-->
    <section><!--3章-->
      <h2>DTD宣言】</h2>
      <p>PCではhtml5に完全対応しているブラウザはモダンブラウザのみ。今はW3Chtml5勧告のための準備として、html5で記述する箇所はDTD宣言と、IE7~8に支障の無いタグにとどめておこう。</p>
    </section><!--3章-->
    <section><!--4章-->
      <h2>【スマホサイト】</h2>
      <p>スマホに特化したサイトならほぼ全てのhtml5のタグを使用できる。PCサイトと別サイトをスマホ専用に作って同一アドレスでデバイスを振り分けよう。振り分けの方法は.htaccessを設置する方法、phpで記述する方法、JavaScriptを用いる方法がある。</p>
    </section><!--4章-->
    <sectionid="last"><!--5章-->
      <h2>【Media Queries】</h2>
      <p>Media Queriesを使用したマルチディバイスなサイト作りが今人気を得ている。しかしながら、Media Queriesは現在のIE8ではサポートされていない。IEに対応されるための様々な手法を紹介しよう。</p>
      <section><!--5章1節-->
        <h3>【Respond.js】</h3>
        <p>IE6~8でCSS3 Media Queries(max-widthとmin-width)を解釈可能にするスクリプト</p>
        <section><!--5章1節1項-->
          <h4>【Respond.jsの問題点】</h4>
          <p>古いPCでページを読み込む時のロード時間が極端に長くなる。</p>
        </section><!--5章1節1項-->
      </section><!--5章1節-->
      <section><!--5章2節-->
        <h3>【html5shiv】</h3>
        <p>Googleが用意しているIE8以下での崩れを防ぐJavaScript</p>
      </section><!--5章2節-->
      <sectionid="last"><!--5章3節-->
        <h3>【条件付きコメント】</h3>
        <p>IEの独自仕様をhead内に記述。</p>
      </section><!--5章3節-->
    </section><!--5章-->
  </article>
  <aside>
    <ulclass="sidemenu">
      <li>用語解説</li>
      <li>索引</li>
      <li>画像出典</li>
      <li>リンク集</li>
    </ul>
  </aside>
  <footer> <small>COPYRIGHT (C) 1998-2013 Felica Technical Academy. ALL RIGHTS RESERVED.</small> </footer>
</div>
</body>
</html>

リセットCSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSS

@charset "utf-8";
/* base */
body {
  font-size: 16px;
  line-height: 1.7;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
div#container{
  width: 940px;
  margin: 0 auto;
  padding: 20px;
  background: #9cc;
  overflow: hidden;  /* 子要素がフロートしたため */
}
header, nav, article, aside{
  padding: 10px;
  background: #ffffff;
margin-bottom: 20px;
}
article {
  float: left ;
  width: 620px;
  margin-right: 20px;
}
aside {
  float: left ;
  width: 260px;
}
footer{
  clear: both;
  padding: 10px;
  text-align: center;
  background: #fff;
}
/* parts */
nav ul{
  overflow: hidden;
}
nav ul li{
  float: left;
  margin-right: 30px;
}
section {
  margin-bottom: 10px;
  padding: 10px;
  background: #87c2c2;
}
section > section {
  background: #fff;
}
section > section > section {
  background: #87c2c2;
  margin-bottom: 0px;
}
section#last{
  margin-bottom: 0px;
}

f:id:webtm2013:20130801143607p:image