Zenn
Open10

インタラクティブなHTML

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

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

北市真北市真

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

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

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

北市真北市真

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

北市真北市真

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

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

など。

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

北市真北市真

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

カルーセルのことだけ考えると、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使わないでドロワーとか使えるけど、そんな感じ、で、手軽というよりは自分で使い方や組み合わせを考えてコンテンツを作れる、としたい。