on:2019年7月23日sponsorsHTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。知っておくと便利なHTMLの使い方をまとめて紹介します。Neogi先日紹介した「CSSでここまでできるのか!」の続編です。下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。-フォームに入力候補を表示<datalist>タグは入力候補となるデータリストをHTMLで定義できます。入力候補をoptionで定義するだけで、オートコンプリート機能を簡単に実装できます。ボックスの実装に迷っていた人は、<dialog>タグで実装してみてください。Operaにもサポートされています。Edgeはサポート外ですが、ポリフィル(dialog-polyfill)も用意されています。-プログレスバープログレスバーを簡単に実装できる<progress>タグのスタイルは、少し難しいかもしれません。Elementが参考になります。-開閉パネル情報を折りたたみ・展開する開閉パネルは、HTMLだけで簡単に実装できます。開閉状態を示す三角形もラベルの横に配置されます。-スマホで入力時に適したキーパッドを表示フォームの入力欄にinputmode属性を与えると、スマホでその入力に適したキーパッドを表示します。numericなどがあります。※デモは、スマホでチェックしてみてください。-カラーピッカーinput要素のtypeにcolorがあることを知っていましたか?typeにcolorを定義すると、カラーピッカーを簡単に使用できます。-テキストにマーカーを引く<mark>タグは、テキストを目立たせる要素です。<strong>や<em>のように強調させることが目的ではなく、目立たせるのが目的です。関心を引きたいワードや検索結果で検索ワードをハイライト表示にする場合に適しています。-電話発信用のリンクmailto:のメール用リンクと似ています。デバイスが電話機能を備えていれば、tel:の後に電話番号を記述すると、直接電話をかけるリンクを実装できます。-追加・削除されたテキストの明示<ins>タグは追加されたテキスト、<del>タグは削除されたテキストを明示します。datetime属性は、その日時を示します。-コンテンツを編集可能に通常ページ上のコンテンツをユーザーは編集できませんが、contenteditable属性を与えると編集可能になります。デモは、div要素にcontenteditable属性を与えたものです。