WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

コーダーとして１年目を過ぎ、ちょっと慣れ始めると今までの自分の引き出しの中にある知識だけでサイトを構築しがちな私です。

良くないですよね。成長が止まってしまいますから。たとえ忙しくても、ちょっとずつでも知識を増やしていくべきですよね。

そういうわけで今回は自分の引き出しを広げるべく、自分が絶対知らないようなHTMLタグを調べてみることにしました。

それでは紹介していきたいと思います。

メールソフトでもよく見るbタグ・iタグ・uタグ

まずは初歩的なものから。

bタグ、iタグ、uタグですね。

なんとなくお気づきかもしれませんが、メールソフトなどでもある機能で、テキストを太くするのがbタグ、フォントをイタリック体にするのがiタグ、下線を引くのがuタグですね。

CSSを使わなくてもHTMLのみで見た目を変えることができるんですね。

bタグ、iタグ、uタグすべての機能を兼ね備えたタグがあればアツくて童心くすぐられたのですが今のところなさそうです。それがあったらちょっとカッコ良くないですかね？

理系出身にはマストのタグ？

お次はsupタグ、subタグです。

supタグは上付き文字を表示してくれるタグで、例を挙げればべき乗計算式を表す際によく用いられるものかなと思います。

subタグは下付き文字を表示してくれるタグで、例を挙げれば化学式を表す際によく用いられるものですね。

毎回使うようなタグではないかもしれませんが、上記のような計算式を表現したいときは便利ですね！私は学生の頃、一応理系だったので重宝していければと思います。

CSS・JS不要のアコーディオン！

detailsタグとsummaryタグですね。

detailsタグとsummaryタグをセットで使うことによってCSSやJavascriptを使わずともアコーディオンメニューを作ることができます。

すごいですね！こんなのあったんですね（笑）

見た目がちょっと簡素なのは否めませんが、レトロ（？）な感じが私は好きです。

進捗や容量を表現したい際にもってこいのタグ

最後にご紹介するのがmeterタグとprogressタグ。これらは似てるようで少し違うのです。

meterタグは特定の範囲内にある数値を表すものです。メモリの容量などを表現する際に使えそうです。

meterタグを設定する際に必要な属性は以下の通りです。

<meter value="現在の値" min="最小値" max="最大値" low="低い範囲の値" high="高い範囲の値" optimum="最適な値"></meter>

これらを元に一度属性に数値を入れていきたいと思います。

こんな感じで入れてみました。

valueで指定した値がlow=”20″より低い、またはhigh=”80″より高い場合は値が“低すぎる・高すぎる”ということでメーターが黄色で表示されます。反対にこれらの値を超えていない場合は緑色に表示されます。

下記のように最適値であるoptimumの値からvalueがかけ離れていると赤色に表示されます。

ポケモンのゲームやドラクエのHP（ヒットポイント）を彷彿とさせますね。

続いてprogressタグです。

こちらは進捗を示すためのタグですね。

<progress value="現在の進捗" max="全体の進捗"></progress>

max(全体の進捗)に対してvalue（現在の進捗）がどのくらいなのかを視覚化したものですね。

因みに属性を書かないでおくと

読み込み中になるんですね！一体どんな理屈でしょうか。

まとめ

今回のご紹介は以上となります。

当たり前ではあるんですけどやっぱりHTMLタグって実用的で意味のあるものばかりなんですね。「勉強する！」を大義名分にネタ系の変なタグを探していた自分の浅ましさに忸怩たる思いです。

すぐにでも実務に取り入れたい！というわけではありませんし、使う機会は稀なものが多いのかもしれませんが、それでもここは使い時かも！というケースに出会ったら積極的に使っていきたいと思います。

面白かったのでまた第二弾もやってみたいと思っています！

当メディア「WWGスペース」は、名古屋のホームページ制作会社 WWG（ダブル・ダブル・ジー）が運営するオウンドメディアです。当社WWGは、ホームページを作るプロとして、IT・Web・AI関連の最新情報に日々アンテナを張って技術を磨いています。WWGの強みは、地域に特化した価値あるホームページ制作です。

今後も、WebやIT、AIに関するお役立ち情報はもちろん、ホームページ制作・Web制作に関する情報も分かりやすくお届けしていきますので、ぜひお楽しみに…！