Open10

インタラクティブなHTML

<label for="input01">テキストフィールドにフォーカスが移るラベル</label>
<input id="input01">
  • input
  • select
  • textarea
  • a
  • button
  • form
  • details
  • dialog
  • label

あたりがインタラクティブなHTML要素の例。

inputselecttextareadetailsは、インタラクションがそのページ内で完結する。

aは、ページ内リンクだったらインタラクションがページ内で完結する。ページ外へのリンクだったら遷移が発生する。

formはページ遷移が発生する。

CSSを使うと:target+ページ内リンクという組み合わせである程度インタラクティブにできる。タブを作ったり、表示・非表示を切り替えたり。

HTML要素になっていないインタラクティブなウィジェットが色々ある。

  • カルーセル
  • ショッピングカート
  • タブ

など。

これらとのインタラクションを、HTMLだけでデザインできるようになったら、素敵ではないだろうか。

そういうためのボタンをカスタム要素として作っている:control-button

カルーセル用のボタンをどうしようか。

カルーセルのことだけ考えると、carousel.prev()carousel.next()といったメソッドを呼ぶようなボタンが分かり易い。しかし実装済みの<setter-control-button>を使って、スライドのn番目を表示する、<adder-control-button>を使って前/次のスライドを表示する、ということができて、こちらの方が汎用的だ。しかしこのためにカルーセルにcarousel.slideIndex = 2みたいなAPIを強制することになる。

Glide.jsとかのカルーセルとのインタラクション難しいな、aria-controlsでは指定できないから。どうしてもJavaScriptを使わざるを得ない

ウェブコンポーネントを使っているので「HTMLだけで」インタラクティブなページを作成、とはならないのだけど、使う側の感覚としてはHTMLだけにしたい。Twitter Bootstrapを使えば自分でJavaScript使わないでドロワーとか使えるけど、そんな感じ、で、手軽というよりは自分で使い方や組み合わせを考えてコンテンツを作れる、としたい。

ログインするとコメントできます