こんにちは、WEBのプログラマーをしている藤本です。ホームページを作ろうと思って調べると、必ずと言っていいほど目にするHTML。ホームページ作成の基本となる言語です。今回は、便利なHTML5の機能についてご紹介したいと思います。
一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。
HTMLは、マークアップ言語なのでSEO対策にも適切なマークアップは必要になってきます。
その中でも、あまり知られていないHTML5の便利機能をご紹介したいと思います。
detailsタグは、詳細情報であることを示す際に使用します。summaryタグが存在する場合には、summaryタグの内容が、この詳細情報の要約となります。
デフォルトでは、ウィジェットは閉じています。開くと、ウィジェットは展開され、コンテンツが表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<details> <summary>詳細を表示</summary> <table> <tr> <th>Name</th> <th>Location</th> <th>Job</th> </tr> <tr> <td>アウラ</td> <td>大阪</td> <td>ホームページ制作</td> </tr> </table> </details> |
| Name | Location | Job |
|---|---|---|
| アウラ | 大阪 | ホームページ制作 |
outputタグを使用すると計算結果などを簡単に表示することができます。
使用例で示した例では、a や b の入力欄の数値が変更されると、答えの部分が自動計算されて変動します。
|
1 2 3 4 5 |
<form oninput="result.value=parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="0" /> + <input type="number" id="b" value="0" /> = <output name="result" for="a b"></output> </form> |
datalistタグは、フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、optionタグで定義します。datalistタグをサポートしたブラウザでは、optionタグで指定された値がユーザーに対して入力候補として提案表示されます。
datalistタグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄はinput type=”text”タグのlist属性の値と、datalistタグのid属性の値を同じにして、入力欄とデータリストを関連付けます。
|
1 2 3 4 5 6 7 8 9 10 |
<form action="" method="get"> <label for="color">色の入力</label> <input list="colors" name="color" id="color" type="text"/> <datalist id="colors"> <option value="赤色"></option> <option value="青色"></option> <option value="黄色"></option> </datalist> <input type="submit" /> </form> |
type=”range”を指定するとスライダーが表示されます。minが最小値、maxが最大値、stepがステップ、valueが初期値です。
スライダーを動かすことによってvalueの値が変化します。
数字の表示はjavascriptを使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form method="post"> <input type="range" id="range" min="0" max="100" step="1" value="" onchange="changeValue(event)" onchange="changeValue(event)" /> </form> <div class="range"> <span id="value"> </span> </div> |
HTMLだけでカラーピッカーを表示させるには、input要素のtype属性に「color」を指定することで実装することができます。
|
1 |
<input type="color" /> |
今回紹介したHTML5の便利機能は、他にもたくさんにあります。
HTMLだけでできることが増え、便利な機能が増え続ける中、便利な機能を知るということは重要になってくるでしょう。
HTMLだけでなく、新しい技術が次々に生まれ、進歩しているので、新しい技術を取り入れて効率的に作業をしていきたいですね。
