
4つの珍しいHTMLタグ!!!
2022.07.04
初めに
こんにちは!
2回目のブログ記事になりますね。(夏は暑いですね〜)
今回のテーマは「4つの珍しいHTMLタグ!!!」です。
実際に仕事の上で使ってる珍しいHTMLタグがありまして、共有します!
よろしくお願いいたします。🙇♂️
第一:<detail><summary>
第一のHTMLタグですが、
長くなる説明を自分が欲しいとき開けるようにするタグです。
実際に見てみましょう!
1 2 3 4 | <details> <summary>本日の昼ご飯は</summary>// 表示されるタイトルの方をsummaryの中に作成します。 寿司です!// 開いた時の本文をsummaryの外でdetailsの中で入力します。 </details> |
最初表示されるのは

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

楽でしょう?!
こんな感じで、CSSの適用も可能です!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0; } summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em; } details[open] { padding: .5em; } details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em; } |

第二:<progress>
第二のHTMLタグは進行率のバーです!
1 2 3 | <label for="file">File progress:</label> // もちろん値を変えるとバーが更新されます! <progress id="file" max="100" value="70"> 70% </progress> |

こちも、同じくCSSのCustomができます!
1 2 3 | progress { accent-color: green; } |

valueが動的に変わるように修正するとprogressの進行率が同じく動的に変わるように見えますよね?!🤩
第三:<meter>
3番目のタグは2番目と似ていますが、違います。
1 2 3 4 5 6 7 | <label for="fuel">Fuel level:</label> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" // Optimum = 最適 value="50"> </meter> |
valueが50の状態です。

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

最適(optimum)になりました!色が変わりますね!
逆に、20まで変更してみます!

やはり、色は変わりますね
このようにmeterタグはvalueが持ってるstateを使える意味のタグとなります!
meterタグの場合、CSS pseudo classesを使ってCSSのCustomができます。
1 2 3 4 | ::-webkit-meter-inner-element ::-webkit-meter-even-less-good-value ::webkit-meter-optimum-value ::-webkit-meter-suboptimum-value |
第四:<datalist>
最後に<datalist>タグです!
これは、私が共有するもの中で最高のタグだと思います!
自動でAutoCompleteを作るタグです!
1 2 3 4 5 6 7 8 9 10 11 | <label for="ice-cream-choice">Choose a flavor:</label> <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> // 注意するところは必ずinputのlistの値とdatalistのidは一緒です! <datalist id="ice-cream-flavors"> // ここで自分が欲しい値をoptionとして入れたらOKです! <option value="Chocolate"> <option value="Coconut"> <option value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist> |

このように、全listの値が見えますね。
ここで、「i」文字を入力してみると

このように「i」文字が入ったものだけ全て検索ができます!!!
最後に、、、
ここまで、いかがでしたか?
実際に使ってみるて、楽で面白いタグでした!
ぜひ、試してみてください!
それでは次の記事でお会いしましょう!
最後まで読んでいただき、ありがとうございました!🙇♂️
書いた人はこんな人

IT技術10月 31, 2023DRシステムって?
IT技術1月 20, 2023Prismaってなに?【前編】
IT技術10月 19, 2022VueのLifeCycleっていうのは???
ライトコードの日常8月 29, 2022YOUは何しにライトコードへ?〜イデさん編〜