知っておきたいHTML5の便利機能

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 知っておきたいHTML5の便利機能

知っておきたいHTML5の便利機能

知っておきたいHTML5の便利機能

こんにちは、WEBのプログラマーをしている藤本です。ホームページを作ろうと思って調べると、必ずと言っていいほど目にするHTML。ホームページ作成の基本となる言語です。今回は、便利なHTML5の機能についてご紹介したいと思います。

HTMLで出来ることは多い

一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。
HTMLは、マークアップ言語なのでSEO対策にも適切なマークアップは必要になってきます。
その中でも、あまり知られていないHTML5の便利機能をご紹介したいと思います。

必要なときだけ詳細を表示できるDitailsタグ

detailsタグは、詳細情報であることを示す際に使用します。summaryタグが存在する場合には、summaryタグの内容が、この詳細情報の要約となります。
デフォルトでは、ウィジェットは閉じています。開くと、ウィジェットは展開され、コンテンツが表示されます。

コード

 

使用例
詳細を表示
Name Location Job
アウラ 大阪 ホームページ制作

計算結果をテキスト出力できるOutputタグ

outputタグを使用すると計算結果などを簡単に表示することができます。
使用例で示した例では、a や b の入力欄の数値が変更されると、答えの部分が自動計算されて変動します。

コード

使用例
+ =

入力候補となるリストを定義できるDatalist

datalistタグは、フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、optionタグで定義します。datalistタグをサポートしたブラウザでは、optionタグで指定された値がユーザーに対して入力候補として提案表示されます。
datalistタグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄はinput type=”text”タグのlist属性の値と、datalistタグのid属性の値を同じにして、入力欄とデータリストを関連付けます。

コード

使用例



数値を選ぶスライダー

type=”range”を指定するとスライダーが表示されます。minが最小値、maxが最大値、stepがステップ、valueが初期値です。
スライダーを動かすことによってvalueの値が変化します。
数字の表示はjavascriptを使用しています。

コード

使用例

カラーピッカー

HTMLだけでカラーピッカーを表示させるには、input要素のtype属性に「color」を指定することで実装することができます。

コード

使用例

便利機能は、増えていく

今回紹介したHTML5の便利機能は、他にもたくさんにあります。
HTMLだけでできることが増え、便利な機能が増え続ける中、便利な機能を知るということは重要になってくるでしょう。
HTMLだけでなく、新しい技術が次々に生まれ、進歩しているので、新しい技術を取り入れて効率的に作業をしていきたいですね。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら