コーダー歴1年目の新人が珍しいHTMLタグを調べてみた

See the Pen <a href="https://codepen.io/WWG/pen/poGBLOr"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

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

See the Pen <a href="https://codepen.io/WWG/pen/KKJYoEX"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

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

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

detailsタグとsummaryタグですね。

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

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

See the Pen <a href="https://codepen.io/WWG/pen/LYqvrPb"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

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

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

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

See the Pen <a href="https://codepen.io/WWG/pen/vYbMrmd"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

See the Pen <a href="https://codepen.io/WWG/pen/OJdGENw"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

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

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

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

See the Pen <a href="https://codepen.io/WWG/pen/MWLRXvY"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

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

続いてprogressタグです。

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

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

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

See the Pen <a href="https://codepen.io/WWG/pen/VwgNdyy"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

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

See the Pen <a href="https://codepen.io/WWG/pen/eYxoKVZ"> Untitled</a> by @wwg (<a href="https://codepen.io/WWG">@WWG</a>) on <a href="https://codepen.io">CodePen</a>.

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

5.まとめ

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

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

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

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

【初心者向け】コーダー愛用！時短に必須のスニペット３選

【ホームページ制作】Webコーダーあるあるを漫才で味わう

【自由研究】コードだけでイラストを描く【プログラミング・マークアップ】

コーダーが選ぶアニメーションがすごいサイト3選

【WEB制作】新人コーダーがコーディングする際に気を付けていること

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F

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

もぐら

コーダー

2022年入社。実務未経験ながらも一念発起してWeb業界に飛び込みました。日進月歩の変化の速い業界で日々の勉強が必要不可欠ですが、楽しみながら一人前になるべく頑張っています。

良かったらハートを押してね！

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」

コーダー歴1年目の新人が珍しいHTMLタグを調べてみた

HTML

紹介

初心者

タグ

コーディング

おすすめの記事

人気の記事

おすすめ記事

カテゴリー

最近の投稿

アーカイブ

CONTACT