ウェブ

HTML5

2011.10.15 基礎

概要

HTML5 の主な特徴をまとめています。

DTD (Document Type Definition)

HTML4 では、Strict、Trasitional、Frameset の 3 種類に分かれて、さらに各 DTD も長い宣言文でしたが、HTML5 では 1 種類になり、しかも宣言文も短くなっています。

<!DOCTYPE html>

エンコーディング指定

HTML4 は長い指定文が必要でしたが、HTML5 では指定文が短くなっています。

<meta charset="utf-8">

スタイルシート

スタイルシートには、2 つの記述方法があります。別ファイルとして作成された css ファイルを読み込む方法と、html に直接記述する方法です。

<link rel="stylesheet" href="main.css" type="text/css">
<style>
  body {
    margin : 0;
    background-color: yellow;
  }
</style>

まとめ

HTML5 では、記述方法が非常に簡素になっており、覚えやすく書きやすくなっているようです。

2011.10.14 基本構造

概要

HTML5 では、ページのレイアウト構造が分かりやすくなりました。<html>、<head>、<body> のタグを基本にして、<body> の中が細分化されます。次のタグを使用して、ページのレイアウト位置を明確にします。

  • <header> : ページヘッダー
  • <nav> : ナビゲーション
  • <article> : 左の列
  • <section> : 中央の列
  • <aside> : 右側の列
  • <footer> : ページフッター

但し、これらのタグを使用したからと言って、自動的に位置が決まるものではありません。位置決めは CSS を使用します。

サンプル

次の HTML を準備します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 の基本構造</title>
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
    <header>ヘッダー</header>
    <nav>ナビゲーション</nav>
    <article>左側の列</article>
    <section>中央の列</section>
    <aside>右側の列</aside>
    <footer>フッター</footer>
  </body>
</html>

次の CSS を準備します。

body {
  margin : 0;
  background-color: white;
}

header {
  width: 800px;
  height: 50px;
  background-color: red;
}

nav {
  width: 800px;
  height: 25px;
  background-color: blue;
}

article {
  width: 200px;
  height: 600px;
  background-color: green;
  float: left;
}

section {
  width: 400px;
  height: 600px;
  background-color: white;
  float: left;
}

aside {
  width: 200px;
  height: 600px;
  background-color: yellow;
  float: left;
}

footer {
  clear: both;
  width: 800px;
  height: 50px;
  background-color: pink;
}

結果

まとめ

当然ながら、HTML5 対応ブラウザで実行する必要があります。左側の列、中央の列、右側の列は、css の float 設定により、位置を決める必要はありますが、これまでのように <div> タグですべてを表現する方法に比べて、格段に HTML の読みやすが向上しています。

2011.10.27 メニューを作成する

概要

HTML5 でメニューを作成する方法です。基本的には以前の HTML と変わりはないと思います。

サンプル

次の HTML を準備します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test1.css" type="text/css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="http://www.asahi.com">朝日新聞</a></li>
        <li><a href="http://www.yomiuri.co.jp">読売新聞</a></li>
        <li><a href="http://mainichi.jp/">毎日新聞</a></li>
        <li><a href="http://www.nikkei.com/">日本経済新聞</a></li>
        <li><a href="http://www.sankeibiz.jp/">SankeiBiz</a></li>
      </ul>
    </nav>
  </body>
</html>

次の CSS を準備します。

nav ul {
  background-color: red;
}

nav li {
  width: 100px;
  height:20px;
  float:left;
  list-style: none;
  text-align: center;
  background-color: red;
}

nav li a {
  display:block;
  text-decoration: none;
}

nav li a:hover {
  height:100%;
  display:block;
  background-color:yellow;
}

結果

まとめ

メニューの作成はリストを作る方法を転用したものです。HTML 側は一見すると、リストにしか見ません。これを CSS 側で表示調整していきます。ポイントのみ説明します。

nav li の float で、リストを横に並べます。

nav li の list-style で、ビュレットを非表示にします。

nav li a の text-decoration で、リンクの下線を非表示にします。

nav li a:hover は、マウスをメニューにあてた際のデザインを変更します。

2011.10.27 タグ

概要

HTML5 のタグについてまとめています。

<b>

HTML4 では、太字や強調の意味で使われていましたが、HTML 5 では、キーワードを指定するときに使います。太字や強調には、<em> や <strong> を使います。

<i>

HTML4 では、イタリック体の意味で使われていましたが、HTML5 では、専門用語、固有の名前などを指定するときに使います。

<h1>

HTML4 では、1 ページに 1 つしか記述できませんでしたが、HTML5 では、複数個記述できます。

<ruby>, <rt>, <rp>

HTML5 で新しく追加されました。ルビをふります。ルビに対応していないブラウザの場合には、ルビの部分が続けて表示されます。この場合は、ルビがかっこで囲まれて表示されます。タグで囲んだ部分は、ルビに対応したブラウザでは表示されません。従って、かっこが表示されず、ルビが表示されます。

<ruby>東京都<rp>(</rp><rt>とうきょうと</rt><rp>)</rp></ruby>

まとめ

HTML5 では、新しく追加されたタグ、意味が変更されたタグ、廃止されたタグがあります。

-ウェブ