# html5 新タグ要素と廃止タグ要素

html とは HyperText Markup Language の略で 1990 年代誕生し、2008 年に 5 回目の大幅改定が発表されました（html5）。html5 は html 要素だけでなく、マルチメディア、グラフィック、WebSocket API 通信など XHTML、DOMHTML、ECMAScript API も追加しました。2008 以降に開発されたブラウザすべては html5 対応するようになったため、WebSocket や localStorage などの機能は迷うことなく現在使用できます。

# Web 系新しいタグ要素

一部ブラウザ対応していないタグ要素除いて、主要な全ブラウザがサポートするタグ要素

タグ要素	説明
`<article>`	記事など内容が単体で完結するセクション
`<aside>`	余談・補足情報セクション
`<footer>`	文書・セクションのフッタ
`<header>`	文書・セクションのヘッダ
`<mark>`	マーク・ハイライトテキスト
`<nav>`	ナビゲーションセクション
`<progress>`	タスクの進捗状況を表示
`<ruby>`	ルビ注釈
`<section>`	文書内のセクション
`<time>`	日付・時刻

# input タイププロパティ

IE と Firefox がほとんど対応していないが、chrome と safari なら便利に使える input タイププロパティ
ほとんど英語のままで、わかりやすいです。

タイプ	説明
tel	電話番号
search	検索用
url	URL
email	メールアドレス
datetime	日付と時刻
date	日付
month	月
week	週
time	時刻
datetime-local	ローカル日付・時刻
number	数値
range	指定範囲の数値
color	#EECC00 のような色表記
placeholder	値の説明やヒント

# クライアントストレージ localStorage & sessionStorage

html5 では App Cache、Web Storage、Indexed Database API、File API などの機能追加されました。
使用する前にブラウザの対応状況と使えるかどうかの検証行ったほうがいいでしょう。なぜなら、ブラウザが対応していても容量がいっぱいだったり使えないこともあります。例えば、 Safari のプライバシーモードでは localStorage 容量が 0 に制限され、実質 localStorage 使えません。

localStorage と sessionStorage の違いは

localStorage と sessionStorage の書き込み・取得・削除の使い方は一緒で、localStorage に保存されたデータの保存期限がありません。保存されたデータは値削除やブラウザクリアしない限り永遠に保持します。sessionStorage はセッション終了時にデータ消去されます。

localStorage sessionStorage と Cookie の比較

localStorage は Cookie 容量 (4 KB) より大容量 (5 MB)
localStorage は読み込み速度は Cookie より遅い

/*
 * localStorage
 */
// 値セット・書き込み
localStorage.setItem("myColor", "#eee");
// 値取得
var myColor = localStorage.getItem("myColor");
// 値削除
localStorage.removeItem("myColor");

/*
 * sessionStorage
 */
// 値セット・書き込み
sessionStorage.setItem("myColor", "#eee");
// 値取得
var myColor = sessionStorage.getItem("myColor");
// 値削除
sessionStorage.removeItem("myColor");

注意

ブラウザによって localStorage sessionStorage の制限容量が違う
クッキーと同じようにページのプロトコルに限定
localStorage はライフサイクル beforeMount 以降しか使えない

# ブラウザ容量制限

モバイル

ブラウザ	Chrome	Android Browser	Firefox	iOS Safari
バージョン	40	4.3	34	6-8
容量	10MB	2MB	10MB	5MB

デスクトップ

ブラウザ	Chrome	Opera	Firefox	Safari	IE
バージョン	40	27	34	6-8	9-11
容量	10MB	10MB	10MB	5MB	10MB

# 位置を取得する機能 geolocation

Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向きなどの情報を API 使って取得操作したりできます。機能は豊富にありますが、chrome はほぼサポートしているが、他のブラウザはほとんどサポートしていません。
セキュリティ上のこともあって、これらの機能はHTTPS のみ利用できます。

geolocation 使ってユーザーの現在位置と位置の変化を取得ができます。

navigator.geolocation.getCurrentPosition(function(pos) {
  console.log(pos.coords.latitude);
  console.log(pos.coords.longitude);
});

html5 の Geolocation API 利用して開発してもいいですが、IP Geolocation API (opens new window)というツール利用したほうが楽かもしれません。

https://api.ipgeolocationapi.com/geolocate/191.213.103.0

{
  "continent": "South America",
  "address_format": "{{recipient}}\n{{street}}\n{{postalcode}} {{city}} {{region_short}}\n{{country}}",
  "alpha2": "BR",
  "alpha3": "BRA",
  "country_code": "55",
  "international_prefix": "0014",
  "ioc": "BRA",
  "gec": "BR",
  "name": "Brazil",
  "national_destination_code_lengths": [2],
  "national_number_lengths": [10, 11],
  "national_prefix": "014",
  "number": "076",
  "region": "Americas",
  "subregion": "South America",
  "world_region": "AMER",
  "un_locode": "BR",
  "nationality": "Brazilian",
  "postal_code": true,
  "unofficial_names": [
    "Brazil",
    "Brasilien",
    "Brésil",
    "Brasil",
    "ブラジル",
    "Brazilië"
  ],
  "languages_official": ["pt"],
  "languages_spoken": ["pt"],
  "geo": {
    "latitude": -14.235004,
    "latitude_dec": "-10.81045150756836",
    "longitude": -51.92528,
    "longitude_dec": "-52.97311782836914",
    "max_latitude": 5.2717863,
    "max_longitude": -29.3434,
    "min_latitude": -34.0891,
    "min_longitude": -73.982817,
    "bounds": {
      "northeast": { "lat": 5.2717863, "lng": -29.3434 },
      "southwest": { "lat": -34.0891, "lng": -73.982817 }
    }
  },
  "currency_code": "BRL",
  "start_of_week": "monday"
}

# グラフィックを描く Canvas API

<canvas> 要素使って動的にグラフィックスを描画

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

# 廃止したタグとその置き換え

html5 では廃止されたタグ要素とそれを置き換えるためのタグ要素と CSS など

タグ要素	説明	置き換え
`<acronym>`	略語や頭字語	`<abbr>`
`<applet>`	Java アプレットを埋め込むためのタグ	<embed>``<object>
`<basefont>`	基準フォント	CSS font
`<big>`	フォントを強調表示	CSS font-size
`<center>`	要素の左右中央揃え	CSS margin text-align
`<dir>`	ディレクトリ型リスト表示	`<ul>`
`<font>`	フォント指定	CSS font
`<frame>`	フレームの定義	`<iframe>`
`<frameset>`	フレーム（frame 要素）の構成	`<iframe>`
`<isindex>`	キーワード検索入力欄の埋め込み	`<form>`
`<noframes>`	フレーム未対応ユーザー向けにテキスト表示	`<iframe>`
`<s>`	テキストに取消線	`<del>`
`<strike>`	テキストに取消線	`<del>`
`<tt>`	テキストを等幅フォント	CSS `font-family: monospace`
`<u>`	テキストに下線	CSS `text-decoration:underline`

2021-01-29 3年前

CSS リセットのカスタマイズ

CSSリセット方法とカスタマイズ方法について紹介します。...

Tailwindcss でローディングコンポーネント作成

Tailwind css使って next.jsのグローバルローディングをカスタマイズする話...

Nuxt Fontawesome アイコン使う

Font Awesome 特徴と使い方、Nuxtjs Vuejs で Font Awesome使う方...

シェアボタン SNS ソーシャルリンクの作り方

Facebook TwitterなどのSNSに記事をシェアするためのシェアボタンについて...

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

webkit系scrollbarカスタマイズ CSS 疑似要素 webkit-scrollbarにつ...

sass-loader エラー

sassエラー対応とsassをオンラインにcssに変換するツール...

CSS background と conic-gradient で bookmark のブックマーク作る

画像使わずにcssブックマークをスタイルシートのbackgroundとconic-gradientで...

HTML 特殊文字エンティティ参照

よく使うhtml特集文字の文字実体参照と10 進数コードエンティティ参照...

safari でボタンタップしたら影が残る怪奇現象

safariでタップしたボタンの影跡が残る現象の解決方法...

css 学習タイピング風アニメーションを css だけでやってみる

Jqueryなし！javascriptなし！CSSだけでタイピング風アニメーションは憧れでやってみま...

google color palette

google color paletteが用意してくれているから、センスなくてもきれいに配色できる...

フルスクリーン背景画像の 100%表示と iPhone 対応方法

フルスクリーン画像表示をやってみました iphone 対応も...

css フルースクリンの背景画像と透けるログイン画面

フルースクリンの背景画像あるいは背景ビデオ、プラス透けるログイン画面を作ってみました...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...

margin 上下効かない原因

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...