こんにちは、WEBのプログラマーをしている藤本です。ホームページを作ろうと思って調べると、必ずと言っていいほど目にするHTML。ホームページ作成の基本となる言語です。今回は、便利なHTML5の機能についてご紹介したいと思います。
一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。
HTMLは、マークアップ言語なのでSEO対策にも適切なマークアップは必要になってきます。
その中でも、あまり知られていないHTML5の便利機能をご紹介したいと思います。
detailsタグは、詳細情報であることを示す際に使用します。summaryタグが存在する場合には、summaryタグの内容が、この詳細情報の要約となります。
デフォルトでは、ウィジェットは閉じています。開くと、ウィジェットは展開され、コンテンツが表示されます。
<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 の入力欄の数値が変更されると、答えの部分が自動計算されて変動します。
<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属性の値を同じにして、入力欄とデータリストを関連付けます。
<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を使用しています。
<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」を指定することで実装することができます。
<input type="color" />
今回紹介したHTML5の便利機能は、他にもたくさんにあります。
HTMLだけでできることが増え、便利な機能が増え続ける中、便利な機能を知るということは重要になってくるでしょう。
HTMLだけでなく、新しい技術が次々に生まれ、進歩しているので、新しい技術を取り入れて効率的に作業をしていきたいですね。
