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

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

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

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

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

目次

---

1. メールソフトでもよく見るbタグ・iタグ・uタグ
2. 理系出身にはマストのタグ？
3. CSS・JS不要のアコーディオン！
4. 進捗や容量を表現したい際にもってこいのタグ
5. まとめ

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

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

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

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

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

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

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

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

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

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（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから