４つの珍しいHTMLタグ！！！
2022.07.04
初めに
こんにちは！
2回目のブログ記事になりますね。（夏は暑いですね〜）
今回のテーマは「４つの珍しい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は何しにライトコードへ？〜イデさん編〜
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
