HTML5

2020年10月18日

はじめに

HTML5 についてのメモ。

基本構造

HTML5 の基本構造は次のようになっている。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    .. 本文 ..
  </body>
</html>

その他は HTML4.01 とだいたい同じだが、<center>...</center> など、廃止されているタグもある。

スタイルシートは、<head>...</head> の中で次のように指定する。

<link rel="stylesheet" href="default.css">

追加されたタグ

追加されたタグがいくつかあるが、一番目立つのはグラフィックスを扱う <canvas>...</canvas> であろう。たとえば、スクリプトで線を描画したりできる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
      let c = document.getElementById("myCanvas");
      let ctx = c.getContext("2d");
      ctx.moveTo(0, 0);
      ctx.lineTo(200, 100);
      ctx.stroke();
    </script>
  </body>
</html>

ヘッダー・フッターの固定

HTML5 にはヘッダーとフッターのタグがある。ヘッダー・フッターを動かないように固定するには、CSS を用いる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="default.css">
    <title>タイトル</title>
  </head>
  <body>
    <header>
      <p>ヘッダー</p>
    </header>
    .. 本文 ..
    <footer>
      <p>フッター</p>
    </footer>
  </body>
</html>

defaults.css

header {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

body {
  padding-top: 32px;
  padding-bottom: 32px;
}

footer {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

テキストでボタンを作る

<div class="button"><a href="#">ボタン</a></div>

CSS

div.button a {
  width: 100px;
  border-radius: 5px;
  background-color: #0066ff;
  color: #ffffff;
  display: block;
  font-family: sans-serif;
  font-size: large;
  font-weight: bold;
  text-decoration: none;
  margin: 5px auto;
  padding: 5px 0;
  text-align: center;
}

ただし、href に "#" を指定するので、1 画面で収まるページでないと使いにくい。指型ポインタにしたいだけなので、a 要素を使わずに代わりに CSS で "cursor: pointer" を指定してもよい。その際、テキストが選択されないようにする必要がある。

<div class="button">ボタン</div>

CSS

div.button {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 100px;
  border-radius: 5px;
  background-color: #0066ff;
  color: #ffffff;
  display: block;
  font-family: sans-serif;
  font-size: large;
  font-weight: bold;
  text-decoration: none;
  margin: 5px auto;
  padding: 5px 0;
  text-align: center;
}

インラインのボタンにするには、次のようにする。

<span class="button">ボタン</span>

CSS

span.button {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 100px;
  background-color: #0066ff;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: large;
  font-weight: bold;
  text-decoration: none;
  margin: 5px auto;
  padding: 5px 0;
  text-align: center;
}

画像がない場合に差し替える

<img src="fig.png" onError="this.onerror=null;this.src='no_image.png';">

画像をウインドウサイズに合わせる

CSS

div img {
  width: 100%;
}

画像を横に並べてスクロール

CSS

div {
  display: flex;
  overflow-x: scroll;
}

ローカルのテキストファイルの読み取り

<iframe src="text.txt" scrolling="no"></iframe>

CSS

iframe {
  width: 100%;
  border: 0px;
  display: block;
  margin: auto;
}

ファイルを読み込む代わりにテキストを直接指定したい場合は、srcdoc に指定すればよい。src と srcdoc を同時に指定すると、srcdoc が優先される。

ただし、iframe 側では文字サイズを調整できない。

画像とテキストを同じ高さに置く

<div class="logo">
  <img src="logo.png"></img>
  <h1>タイトル</h>
</div>

CSS

.logo {
  position: relative;
  text-align: right;
}

.logo h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

ロゴを右端に表示しつつ、同じ高さでタイトルを中央に表示している。

表の線や隙間を調整する

表の線を細くしたり、隙間を空けたりするには、以下のようにする。

CSS

th, td {
  border: solid 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

表の色付けする

奇数行にだけ色付けする。

CSS

table tr:nth-child(odd) td {
  background: #eeddff;
}

最初の列だけ色付けする。

CSS

table td:nth-child(1) {
  background: #ddeeff;
}

スクロールバーをつける

div 要素で囲って、CSS で次のように指定する。

div {
  overflow-y: scroll;
}

要素を 1 画面に収める

要素を 1 画面に収めるには、CSS で height に "100vh" などと指定する。

必須マーク

<span class="must">必須</span>

CSS

span.must {
  background-color: #ff3300;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: small;
  font-weight: bold;
  text-decoration: none;
  margin: 5px auto;
  padding: 2px 2px;
  border-radius: 5px;
  text-align: center;
}

テキストボックスを中央に配置する

テキストを中央揃えにすると、すべての行が中央に配置されてしまう。そうではなくて、テキストボックスを中央に配置したい場合は、CSS で次のように指定する。

CSS

div {
  width: 80%;
  margin: 0 auto;
  max-width: 640px;
}

グリッド状のリスト

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>グリッドリスト</title>
    <style>
div#grid ol { 
  list-style-type: none; 
  margin: 0; 
  padding: 0;
} 
 
div#grid li { 
  margin: 1px; 
  padding: 1px; 
  float: left; 
  width: 400px; 
  height: 400px; 
  text-align: center;
}
    </style>
  </head>
  <body>
    <div id="grid">
      <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ol>
    </div>
  </body>
</html>

動画の再生

<video src="movie.mp4" controls></video>

参考

• HTML5 Introduction (w3schools.com)