【奥が深いHTML5】最近知った珍しいHTMLタグについて

どうも、おぎくぼです。

最近はプロコミ!をリリースしてから燃え尽き症候群っぽいです…

そんなある日、ボケーっと気になったことを調べたり、Qiitaを読みあさっていたところ、見たことがないHTMLのタグをいくつも発見しました。

そこで今回は意外にも奥が深い、HTML5の珍しいタグをいくつかご紹介します!

この記事で紹介するタグを使用することは滅多にないかと思いますが、内容としては面白いと思うので、最後まで読んでください。

紹介するタグ一覧

・<output>
・<meter>
・<progress>
・<details>と<summary>
・<datalist>
・<input type=”range”>
・<input step=””>
・<input min=”” max=””>
・<input type=”color”>

<output>

<output>タグは入力された値の結果を表示してくれるタグです。

このコードでは、2つのinputで取得した値の合計を表示します。表示結果は以下の通りです。

値を変更してみてください。

+ = 0

このように、inputで取得した数字の合計を表示することができました。

ちなみに、JavaScriptのparseIntとは何かというと、文字列を整数に変換するグローバル関数です。

「こんなん付けなくても計算できるだろ」って思ってしまいますが、parseIntがないとただの文字列の結合になってしまいます。

以下のコードで確認してみましょう!

+ = 00

値を入力してみると、文字列の結合になってしまうことがわかると思います。

また使用するかわかりませんが、こんなこともできます。

姓:
名:
竈門炭治郎

どうでもいいですね。

<meter>

<meter>タグは規定範囲内の測定値を表示することができます。

例えば、バッテリーの残りやストレージの容量などです。

簡単な使用例を紹介します。

表示はこんな感じです。

バッテリー

20%残っている

ストレージの容量

100GB中64GBを使用中

少しダサいかな。

<progress>

<progress>タグでは、完了までの進行状況を表示することができます。

実際に見た方が理解できると思うので、一例をあげてみます。

投稿の送信

進行状況:投稿中です。

簡単にこんな感じのプログレスバーを表示することができます。

<details>と<summary>

<details>タグはアコーディオンのような機能を簡単に付けられるタグです。

そして<summary>タグは<details>タグの要約を示すタグです。

表示結果は以下です。

ファイルの送信

ファイルを送信しました。
ファイル名:
sample.pdf
ファイル形式:
PDF
ファイル容量:
6.55MB

「ファイルの送信」をクリックすると詳細が表示されます。

JavaScriptを書かなくてもいいのはすごく便利ですね!

<datalist>

<datalist>タグは、フォームの入力の補完を定義することができます。

表示結果は以下です。

好きな鬼滅のキャラは?

文字を入力してみると補完されることがわかると思います。

これもすごく便利な機能ですね!

いや〜それにしても鬼滅の刃面白いですよね〜。毎日映画観たい。

<input type=”range”>

<input type=”range”>はレンジ入力欄を表示することができます。

表示結果は以下です。

価格設定 
接客態度 

このようなアンケートによくある機能を簡単に実装することができます。

少し手を加えるだけで、かなりリッチなアンケートフォームを作れそうですね!

<input step=””>

inputにstep属性を指定すると、数字の入力欄で刻むステップ値を指定することができます。

なんだかよくわからないと思いますが、実際に触ってみたらよく理解できると思います。

表示結果は以下です。

注文数: ※単位kg

上記のコードでは、10ずつ数字が増えてくれるので、入力の手間が省けます。

何か大量に注文するようなフォームを作成するときは、とても活躍しそうですね。

<input min=”” max=””>

<input min=”” max=””>は入力する最小値と最大値を指定することができます。

表示結果は以下です。

予約人数: ※1人以上10人以下

入力するときはどんな数字でも入れることができますが、送信するときにバリデーションをかけてくれるのでとても便利です。

またエラーメッセージを表示してくれるので、実装の手間が省けそうですね。(私は自分でいい感じのエラーメッセージを実装したい。)

<input type=”color”>

<input type=”color”>はカラーピッカーを表示することができます。

表示結果は以下です。

好きな色を選んでね! 

使い時はわかりませんが、便利そうですね。

いつか使ってみたいです。

最後に

今回は最近知った珍しいHTMLタグを紹介しました。

HTMLについて、深く学習する機会は意外とないと思うので、この機会にいろいろ調べてみてください。

まだあなたの知らないHTMLの魅力や奥深さを発見できるかもしれません。

この記事が面白いと感じたらSNSでシェアしてくれると嬉しいです。

これからも楽しく学びましょう!

ではまた。