javascriptを使わずに動きのあるギミックを実装する

公開日：2025.06.09

cssの進化とブラウザの対応によってhtmlとcssが出来る事は日々増えていますおり、IEが無くなったことによりさらにそのスピードが増しています。
少し前はそれをやりたければjavascript必須だった、というようなレイアウトや機能もhtmlとcssだけで実現可能になっているものが多いです。
javascript、html/cssどちらでも実現できるものは、javascriptを使わず実装したほうが軽くなります。

多機能や細かい要望を実現しようとするとやはりjavascriptが必須になる場合は多いですが、一度javascriptが必須だという固定概念を捨ててみるとサイトの表示速度も開発の速度も上がるかもしれません。
今回はいくつかそんな例を紹介します。

スムーズスクロール

#を使ったアンカーリンクでスムーズスクロールに対応するのは、cssでhtmlタグに1行書くだけでだけで実現できます。

無茶苦茶簡単です。
ただ、秒数やイージングの指定などは出来ません。
また、他のjavascriptとの併用や外部リンク時などに思った通りの挙動がされない場合があり、そういった場合にはjacascriptに戻さなくてはいけません。

アコーディオンメニュー

detailsとsummaryタグで実現

これが一番シンプルで簡単な例です。

See the Pen accordion1(@bkrylxri-the-lessful) on CodePen.

なんと開閉にcssさえ要らない。
detailはIEで使えなかったので、彼が廃れて以降自由の身を手に入れたタグです。

チェックボックスで実現

チェックボックスのオン/オフの状態はcssで取得できます。
チェックボックス自体は隠していますが、labelタグを表示させてそれをクリックする事でオンオフを取得しています。

See the Pen Untitled(@bkrylxri-the-lessful) on CodePen.

detailsと違うのは、transitionを利用した簡単なアニメーションを付けることが出来るという事です。
上記の例では、transitionを設定しておいて開閉時にmarginを付ける事で上からスライドするような表現を実現しています。

タブ切り替え

アコーディオンのチェックボックスに似てますが、ラジオボタンを隠してlabelをクリックさせる方法です。
タブ切り替えのコンテンツ全体がひとつのグループなので、ラジオボタンと相性が良いんですね。

See the Pen Untitled by 高井稔 (@bkrylxri-the-lessful) on CodePen.

モーダルウィンドウ

detailsとsummaryタグで実現

アコーディオンで使ったdetailsとsummaryの応用です。
summaryのクリックでオンオフを切り替えるので、モーダルのオーバーレイ部分をsummaryの中に入れて背景全体を閉じるボタンとして機能するクリック要素にしているのがポイントです。

See the Pen Untitled (@bkrylxri-the-lessful) on CodePen.

チェックボックスで実現

チェックボックスでも出来ます。
実装方法は違えど、ユーザー目線ではdetailsを使った場合とあまり違いは無いかもしれません。

See the Pen modal2 by 高井稔 (@bkrylxri-the-lessful) on CodePen.

まとめ

javascriptを使わずに動的な事をするポイントは、いかにして状態を取得するかという事ですね。
detailsタグはopenの状態を、チェックボックスやラジオボタンではchecked状態をjavascript無しで取得できます。
それを応用することで、他にも色々な事が実現できそうですね。
本記事のサンプルは最低限のcssしか書いていませんが、どれもデザインの自由度は高いですので、好きにcssを書いてみてください。