４つの珍しいHTMLタグ！！！

イデ（エンジニア）

2022.07.04

IT技術

HTML

初めに

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

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

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

第一：<detail><summary>

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

実際に見てみましょう！

1<details> 
2    <summary>本日の昼ご飯は</summary>// 表示されるタイトルの方をsummaryの中に作成します。
3    寿司です！// 開いた時の本文をsummaryの外でdetailsの中で入力します。
4</details>

最初表示されるのは

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

楽でしょう？！

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

1details {
2    border: 1px solid #aaa;
3    border-radius: 4px;
4    padding: .5em .5em 0;
5}
6
7summary {
8    font-weight: bold;
9    margin: -.5em -.5em 0;
10    padding: .5em;
11}
12
13details[open] {
14    padding: .5em;
15}
16
17details[open] summary {
18    border-bottom: 1px solid #aaa;
19    margin-bottom: .5em;
20}

第二：<progress>

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

1<label for="file">File progress:</label>
2// もちろん値を変えるとバーが更新されます！
3<progress id="file" max="100" value="70"> 70% </progress>

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

1progress {
2 accent-color: green;
3}

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

第三：<meter>

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

1<label for="fuel">Fuel level:</label>
2
3<meter id="fuel"
4       min="0" max="100"
5       low="33" high="66" optimum="80" // Optimum = 最適
6       value="50">
7</meter>

valueが50の状態です。

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

最適（optimum）になりました！色が変わりますね！

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

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

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

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

1::-webkit-meter-inner-element
2::-webkit-meter-even-less-good-value
3::webkit-meter-optimum-value
4::-webkit-meter-suboptimum-value

第四：<datalist>

最後に<datalist>タグです！

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

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

1<label for="ice-cream-choice">Choose a flavor:</label>
2<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
3// 注意するところは必ずinputのlistの値とdatalistのidは一緒です！
4<datalist id="ice-cream-flavors">
5　　// ここで自分が欲しい値をoptionとして入れたらOKです！
6    <option value="Chocolate">
7    <option value="Coconut">
8    <option value="Mint">
9    <option value="Strawberry">
10    <option value="Vanilla">
11</datalist>