• トップ
  • ブログ一覧
  • 4つの珍しいHTMLタグ!!!
  • 4つの珍しいHTMLタグ!!!

    イデ(エンジニア)イデ(エンジニア)
    2022.07.04

    IT技術

    初めに

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

    今回のテーマは「4つの珍しい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>

     

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

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

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

    最後に、、、

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

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

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

    イデ(エンジニア)

    イデ(エンジニア)

    おすすめ記事