In 'n' Out | インタラクティブUI

インタラクティブUIとは

HTMLの中には、ユーザーの操作によって表示内容が変化する要素があります。
これらは特別なスクリプトを用いなくても画面表示を動的に扱えるため、補足情報の開閉や、進行状況の可視化、数値の表示など、直感的に使えるUI作りに役立ちますが、最低限JavaScriptは必須となることが多いです。

detailsタグ

クリックすることで内部の内容を表示したり、非表示にしたりできる折りたたみ要素です。

構文

<details 属性>
    <summary>...</summary>
    ...
</details>

detailsタグはブロック要素で、detailsタグの中にsummaryを見出しにして、その内容を直下に記述することで成立します。
実質的にはsummaryに内容を記述するので、detailsタグはコンテナの役割を果たしていると考えてもかまいません。
また、open属性を追加することで最初から開いた状態で見せることもできます。

コード例


    <details>
    <summary>HTMLの歴史</summary>
    HTMLは、ティム・バーナーズ＝リー博士が研究者間の情報共有を目的として1989年に考案し、1991年に発表しました。当初は「SGML」という言語をベースに、WWW（World Wide Web）システム上の文書を記述するために作られました。その後、バージョンアップを繰り返し、特に1997年のHTML4.0で基本的なタグが出揃い、2014年のHTML5で大幅な機能追加と標準化が行われました。
    </details>

出力例

HTMLの歴史

HTMLは、ティム・バーナーズ＝リー博士が研究者間の情報共有を目的として1989年に考案し、1991年に発表しました。当初は「SGML」という言語をベースに、WWW（World Wide Web）システム上の文書を記述するために作られました。その後、バージョンアップを繰り返し、特に1997年のHTML4.0で基本的なタグが出揃い、2014年のHTML5で大幅な機能追加と標準化が行われました。

自動的にブラウザ標準の矢印が頭に付き、開くと矢印が90度時計回りに回ります。
たったこれだけで動きがあるサイトを実現できる便利なタグで、FAQや補足説明など、情報量を適度に整理したいときに使用することが多いです。

ただし、開閉時にdetailsタグの下にある要素は下に動いてしまうこと、カスタマイズの自由度が低いこともデメリットとして挙げられます。

dialog

モーダルウインドウのように画面上に重ねて表示する要素で、通知や確認ウインドウとして用いられます。

構文

<dialog open>...</dialog>

dialogタグはブロック要素で、属性にopenを付けないと非表示のままです。
さらに閉じるボタンやJavaScriptと連動していないと、ただdialog要素がHTML上で表示されているだけになります。

コード例

<dialog id="myDialog">
    <h2>モーダルウインドウ</h2>
    <p>dialogで作ったモーダルです。</p>
    <button id="closeBtn">閉じる</button>
</dialog>

出力例

サンプルを見る

画面いっぱいにモーダルウインドウを表示して、閉じるボタンをクリックするとモーダルウインドウを閉じることができます。
なお、モーダルウインドウが表示されているときは、モーダルウインドウの後ろにある要素はクリックできません。
デフォルトの状態ではこの動きは実現できず、JavaScriptが必要になってきます。
詳しくはJavaScriptの説明時に行いますので、現時点ではdialogタグはこんな使い方ができるくらいでかまいません。

meter

一定範囲内の数値を棒状のバーで表現する要素で、残量やレベル、評価値を視覚的に表したいときに適しています。

構文

<meter 属性="属性値">...</meter>

meterタグはインライン要素で、さまざまな属性があり、少なくともvalueを使わない意味がありません。

meter要素：属性抜粋
属性名	属性値	用途
value	任意の数値	ゲージが示す現在値
min	任意の数値	最小値で、省略時は0になります。
max	任意の数値	最大値で、省略時は1になります。
low	任意の数値	低い領域の閾値を示します。
high	任意の数値	高い領域の閾値を示します。
optium	任意の数値	値がどれくらいならいいか理想的な値です。

コード例

<meter value="0.7">70％</meter>
<meter value="65" min="0" max="100" low="40" high="80" optimum="70">65％</meter>

出力例

70％ 32％

出力例の1つ目はシンプルにvalue属性で0.7を指定してそれが70％ということを示しています。
minとmaxを省略しているので、minは0、maxは1が自動的に割り振られます。

出力例の2つ目は最小値は0、最大値は100で、40以下（low="40"）、もしくは80以上（high="80"）で色が変わるようにしています。
実際にvalueが32なので、40以下のため色が変わっています。
なお、理想値であるoptiumと同数値のときは1つ目の出力例と同じ色になります。

一般のサイトを作る際にはHTMLでは固定値になってしまうため、使用頻度はほぼないと言えますが、CSSとJavaScriptを作りこめばレビューサイトの星評価などで使えます。

progress

タスクの進行度を示す要素で、アップロードや読み込みの状況を示す場面で使用します。

構文

<progress 属性="属性値"></progress>

progressタグはインラインブロック要素で、独特の属性が存在します。

progress要素
属性名	属性値	用途
value	任意の数値	ゲージが示す現在値
max	任意の数値	最大値で、省略時は1になります。

コード例

<progress value="30" max="100"></progress>
<progress max="100"></progress>

出力例

出力例の1つ目はvalueを指定して、30％の位置までバーが伸びた状態です。
出力例の2つ目はvalueを省略して、現在地が不明なためアニメーションで左右にバーが移動しています。

progressタグもmeterタグ同様、HTMLでは固定値になってしまうため、JavaScriptで動作させないと意味がありません。
一般のサイトではフォームの何パーセントを入力したか見せるために使用することが多いと思います。

output

計算や操作の悔過を画面に表示させるための要素です。

構文

<output 属性="属性値"></output>

outputタグはインライン要素で、属性はname、for、formの3つが主要です。
単体では動作しないため、属性を設定してフォームやJavaScriptと組み合わせて使用します。

コード例

<form oninput="result.value=Number(a.value)+Number(b.value)">
    <input type="number" id="a">
    +
    <input type="number" id="b">
    <output name="result"></output>
</form>

出力例

この出力例ではJavaScriptを使用しておらず、それぞれのinputに数値を入力すると一番右にリアルタイムで計算結果が出てきます。
このように計算結果や処理結果をわかりやすく表示できるため、ECサイトで使用することが多いと思います。