HTML5


html5では意味のあるタグしか使わない。例外としてdivがある。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>html5レイアウト</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
  <header>
    <h1>HTML5の使い所</h1>
    <p>W3Cの勧告までカウントダウン！さてIEは追従できるか否か！？</p>
  </header>
  <nav>
    <ul class="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>
      <h2>【html5使い所】</h2>
      <p>「これからはHTML5だ！」といきり立たず、どんな場合にhtml5のタグを使用できるのかしっかり学ぼう。スマホのブラウザシェアーが凄い勢いで伸びているが、まだまだコア層はIE8と9だ。</p>
    </section>
    <section>
      <h2>【W3Cの勧告】</h2>
      <p>来年に迫るW3Cの勧告で、WHATWG、W3C、そしてブラウザごとにバラバラに開発されていたhtml5が統一されるのか否か。</p>
    </section>
    <section>
      <h2>【DTD宣言】</h2>
      <p>PCではhtml5に完全対応しているブラウザはモダンブラウザのみ。今はW3Cのhtml5勧告のための準備として、html5で記述する箇所はDTD宣言と、IE7〜8に支障の無いタグにとどめておこう。</p>
    </section>
    <section>
      <h2>【スマホサイト】</h2>
      <p>スマホに特化したサイトならほぼ全てのhtml5のタグを使用できる。PCサイトと別サイトをスマホ専用に作って同一アドレスでデバイスを振り分けよう。振り分けの方法は.htaccessを設置する方法、phpで記述する方法、JavaScriptを用いる方法がある。</p>
    </section>
    <section>
      <h2>【Media Queries】</h2>
      <p>Media Queriesを使用したマルチディバイスなサイト作りが今人気を得ている。しかしながら、Media Queriesは現在のIE8ではサポートされていない。IEに対応されるための様々な手法を紹介しよう。</p>
      <section>
        <h3>【Respond.js】</h3>
        <p>IE6〜8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするスクリプト</p>
        <section>
          <h4>【Respond.jsの問題点】</h4>
          <p>古いPCでページを読み込む時のロード時間が極端に長くなる。</p>
        </section>
        <!--３番目のセクション--> 
      </section>
      <!--２番目のセクション-->
      <section>
        <h3>【html5shiv】</h3>
        <p>Googleが用意しているIE8以下での崩れを防ぐJavaScript。</p>
      </section>
      <!--２番目のセクション-->
      <section class="last">
        <h3>【条件付きコメント】</h3>
        <p>IEの独自仕様をhead内に記述。</p>
      </section>
      <!--２番目のセクション--> 
    </section>
    <!--1番目のセクション--> 
  </article>
  <aside>
    <ul class="sidemenue">
      <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>

@charset "utf-8";
/* CSS Document */

body {
  font-size: 16px;
  line-height:1.7;
  font-family:
  "Hiragino kaku "
}

div#container{
  width: 940px;
  margin: 0 auto;
  padding: 20px;
  background:#FFFFCC;
  overflow:hidden;
}

header,nav,article,aside{
  padding:10px;
  background:#fff;
  margin-bottom:20px;
}

article{
  float: left;
  width: 620px;
  margin-right: 20px;
}

aside{
  float: left;
  width: 260px;
}

footer{
  clear:both;
  text-align:center;
  background:#ffffff
}


ul {
  list-style:none;
  margin: 0;
  padding:0;
}

nav ul {
  overflow:hidden;
}

nav ul li {
  float:left;
  margin-right: 30px;
}

section {
  margin-bottom: 10px;
  padding: 10px;
  background:#FFCC66;
}

section > section{
  background:#ffffff;
}

section > section >section{
  margin-bottom:0;
   background:#FFCC66;
}

section.last {
  margin-bottom:0;
}

reset.cssはEric Meyer's "Reset CSS" 2.0を使用。
htmlではreset.cssを先にリンクさせ、次に個別のcssを読み込ませる。

prompt 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>

<body><script>
  var heisei;
  var seireki;
  seireki = prompt('西暦は平成何年？！','西暦を入力して下さい');
  heisei = seireki-1988;
  
  if(seireki<1988){alert('年号エラーです');
  }else{
  document.write('西暦',seireki,'年は、平成',heisei,'年です。');}
</script>
</body>
</html>

<script>
  var heisei
  var seireki
  seireki = prompt('西暦は平成何年？！','西暦を入力して下さい');
  heisei = seireki-1988
  
  if(seireki<1988){alert('年号エラーです');
  }else{
  document.write('西暦',seireki,'年は、平成',heisei,'年です。');}
</script>

復習課題

Q11

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
<style>
body,p {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
a:link{ 
  color: #0000ff;
}
a:visited{
  color: #800080;
}
a:hover{
  color: #ff4500;
}
a:active{
  color: #ff4500;
}

</style>
</head>
<body>
<p>お問い合わせはこちらになります。<br>
<a href="http://www.felica.co.jp">http://www.felica.co.jp</a>
</p>
</body>
</html>

Q12

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<ul>
<li><a href="#">a-link-skyblue</a></li>
<li><a href="#">a-visited-turquise</a></li>
<li><a href="#">a-hover-coral</a></li>
<li><a href="#">a-active-lawngreen</a></li>
</ul>
</body>
</html>

@charset "UTF-8";

body,ul,li{
  margin: 0; 
  padding: 0;
}

body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

ul{
  list-style: none;
}

li a {
  text-decoration: none;
  display: block;
  color: #ffffff;
  margin-bottom: 1px;
  width: 200px;


  
  }
li a:link{ 
  background-color: skyblue;
}
li a:visited{
   background-color: turquoise;
}
li a:hover{
   background-color: coral;
}
li a:active{
   background-color: lawngreen;
}

復習課題

[復習]

Q4

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>豊島区池袋猫カフェ「CatCaf&#233;」</title>
</head>
<body>
<h1>CatCafeのにゃんこ紹介</h1>

<h2>●あたる（白キジトラ・オス）</h2>

<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。

［写真：幅200px 高さ200px］</p>

<dl>
<dt>特徴</dt>

<dd>大きな目と耳。まがったしっぽ。</dd>

<dt>性格</dt>
<dd>マイペース。</dd>
</dl>
<a herf="cat/ataru.html">もっと見る→</a>
</body>
</html>

Q5

<table width="300px">
<caption>CatCafeのにゃんこ紹介</caption>
<tr>
<td>名前</td>
<td>あたる</td>
</tr>
<tr>
<td>性別</td>
<td>オス・メス</td>
</tr>
<td>特徴</td>
<td>大きな目と耳。曲がったしっぽ</td>
<tr>
<td>性格</td>
<td>マイペース</td>
</tr>
<tr>
<td>写真</td>
<td>画像</td>
</tr>
</table>

Q6

<small>Copyright (c) CatCafe.All Rights Reserved.</small>

Q7

<link rel="stylesheet" href="css/style.css">

Q8

h1,h2,h3,p,ul,li,img{
 margin: 0;
 padding: 0;
}

Q9

body{
  font-size: 16px;
  font-color: #333333;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  line-height: 1.5;
}

Q10

body{
  background-color: #3366CC;
}
h1{
  color: #ffffff;
}