1. HOME
  2. ブログ
  3. IT技術
  4. 4つの珍しいHTMLタグ!!!
4つの珍しいHTMLタグ

4つの珍しいHTMLタグ!!!

初めに

こんにちは!
2回目のブログ記事になりますね。(夏は暑いですね〜)

今回のテーマは「4つの珍しいHTMLタグ!!!」です。

実際に仕事の上で使ってる珍しいHTMLタグがありまして、共有します!
よろしくお願いいたします。🙇‍♂️

第一:<detail><summary>

第一のHTMLタグですが、
長くなる説明を自分が欲しいとき開けるようにするタグです。

実際に見てみましょう!

最初表示されるのは

これを左にある→ボタンを押して開くと!

楽でしょう?!

こんな感じで、CSSの適用も可能です!

第二:<progress>

第二のHTMLタグは進行率のバーです!

こちも、同じくCSSのCustomができます!

valueが動的に変わるように修正するとprogressの進行率が同じく動的に変わるように見えますよね?!🤩

第三:<meter>

3番目のタグは2番目と似ていますが、違います。

valueが50の状態です。

ここで、値を上げて80にすると!

最適(optimum)になりました!色が変わりますね!

逆に、20まで変更してみます!

やはり、色は変わりますね

このようにmeterタグはvalueが持ってるstateを使える意味のタグとなります!

meterタグの場合、CSS pseudo classesを使ってCSSのCustomができます。

第四:<datalist>

最後に<datalist>タグです!

これは、私が共有するもの中で最高のタグだと思います!

自動でAutoCompleteを作るタグです!

 

このように、全listの値が見えますね。

ここで、「i」文字を入力してみると

このように「i」文字が入ったものだけ全て検索ができます!!!

最後に、、、

ここまで、いかがでしたか?

実際に使ってみるて、楽で面白いタグでした!
ぜひ、試してみてください!

それでは次の記事でお会いしましょう!
最後まで読んでいただき、ありがとうございました!🙇‍♂️

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア