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

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

    IT技術

    4つの珍しいHTMLタグ

    初めに

    こんにちは!
    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」文字が入ったものだけ全て検索ができます!!!

    最後に、、、

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

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

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

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background