実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。

知っておくと便利なHTMLの使い方をまとめて紹介します。

サイトのキャプチャ

HTML can do that?
by Ananya Neogi

先日紹介した「CSSでここまでできるのか!」の続編です。


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

1. datalist -フォームに入力候補を表示

<datalist>タグは入力候補となるデータリストをHTMLで定義できます。入力候補をoptionで定義するだけで、オートコンプリート機能を簡単に実装できます。

2. dialog -ダイアログ ボックス

ダイアログ ボックスの実装に迷っていた人は、<dialog>タグで実装してみてください。当初は、Chromeのみのサポートでしたが、現在ではFirefox, Operaにもサポートされています。IE, Edgeはサポート外ですが、ポリフィル(dialog-polyfill)も用意されています。
参考: HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点

See the Pen
HTML only - Dialog
by Ananya Neogi (@ananyaneogi)
on CodePen.

3. progress -プログレスバー

プログレスバーを簡単に実装できる<progress>タグのスタイルは、少し難しいかもしれません。どのようにスタイルできるのかは、The HTML5 progress Elementが参考になります。

See the Pen
HTML - Progress and Meter
by Ananya Neogi (@ananyaneogi)
on CodePen.

4. detailsとsummary -開閉パネル

情報を折りたたみ・展開する開閉パネルは、HTMLだけで簡単に実装できます。開閉状態を示す三角形もラベルの横に配置されます。

See the Pen
HTML only - Detail & Summary
by Ananya Neogi (@ananyaneogi)
on CodePen.

5. inputmode -スマホで入力時に適したキーパッドを表示

フォームの入力欄にinputmode属性を与えると、スマホでその入力に適したキーパッドを表示します。属性の値には、tel, email, url, numericなどがあります。
※デモは、スマホでチェックしてみてください。

See the Pen
HTML - inputmode
by Ananya Neogi (@ananyaneogi)
on CodePen.

6. input type="color" -カラーピッカー

input要素のtypeにcolorがあることを知っていましたか?
typeにcolorを定義すると、カラーピッカーを簡単に使用できます。

See the Pen
HTML - color picker
by Ananya Neogi (@ananyaneogi)
on CodePen.

7. mark -テキストにマーカーを引く

<mark>タグは、テキストを目立たせる要素です。<strong>や<em>のように強調させることが目的ではなく、目立たせるのが目的です。例えば、関心を引きたいワードや検索結果で検索ワードをハイライト表示にする場合に適しています。

See the Pen
HTML - Highlight text
by Ananya Neogi (@ananyaneogi)
on CodePen.

8. href="tel:" -電話発信用のリンク

mailto:のメール用リンクと似ています。デバイスが電話機能を備えていれば、tel:の後に電話番号を記述すると、直接電話をかけるリンクを実装できます。

9. insとdel -追加・削除されたテキストの明示

<ins>タグは追加されたテキスト、<del>タグは削除されたテキストを明示します。datetime属性は、その日時を示します。

See the Pen
HTML - Highlight text
by Ananya Neogi (@ananyaneogi)
on CodePen.

10. contenteditable -コンテンツを編集可能に

通常ページ上のコンテンツをユーザーは編集できませんが、contenteditable属性を与えると編集可能になります。デモは、div要素にcontenteditable属性を与えたものです。

See the Pen
HTML - contenteditable
by Ananya Neogi (@ananyaneogi)
on CodePen.

sponsors

top of page

©2019 coliss