進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS
Post on:2026年7月16日
sponsorsr
最近では、HTMLとCSSは非常に進化し、強力になってきました。これからの時代はJavaScriptは本来のJavaScriptでしかできないことに使い、HTMLとCSSで可能なものはCSSとHTMLで実装すべきです。
HTMLとCSSだけで実装できる、あるいはごくわずかなJavaScriptで実装できるUIコンポーネントのまとめを紹介します。
NoLoJSは、JavaScriptの負荷を軽減するために、No-JavaScript、あるいはLo-JavaScript（最小限）で実装できるUIコンポーネントをまとめたものです。
ライセンスはGNU General Public License v3.0で、商用プロジェクトでも無料で利用できます。
このまとめを作成したのは、下記の言葉に刺激されたからだそうです。
JavaScript自体に何の不満もないが、 JavaScriptにはアコーディオンやナビゲーションメニューの管理よりももっと重要な役割があるはずだ
最近のWebは過剰なJavaScriptによって重荷を負うようになっています。HTMLやCSSの機能が進化し続けている今こそ、JavaScriptが担っている処理を可能な限りそれらに移行すべきです。
NoLoJSに登録されているUIコンポーネントは、JavaScriptを一切使用しない、あるいは最小限に抑えた、HTMLとCSSで実装可能な「よくあるJavaScriptのパターン」をまとめたものです。HTMLとCSSの進化に合わせて、今後も増えていく予定とのことです。
2026年7月現在、50種類ほどのUIコンポーネントが揃っています。
その中からいくつか見てましょう、まずはアコーディオン。アコーディオンには6つのバリエーションがあり、ベーシックなものから開閉アニメーションや限定オープン、最初は開いた状態のものなどがあります。
ベーシックなアコーディオンは、JavaScriptはなし、さらにはCSSもなし、HTMLだけで実装できます。
デモの下には、実装コードが解説されています。
ベーシックなアコーディオンは、HTMLのdetailsとsummaryの組み合わせで開閉できます。
ほんの少しのCSSを加えるだけで、アコーディオンをアニメーションで開閉することもできます。
Accordion - Animate Open/Close
カルーセルは8種類、シンプルなものからスナップさせたり、グループごとにスワイプさせたり、ヒーロー用のがあります。
すべてのカルーセルが掲載されているデモページは、こちら。
See the Pen
CSSで実装するカルーセル by coliss (@coliss)
on CodePen.
フォーム関連にもこれまではJavaScriptを使用しないと実装できなかったことが、HTMLとCSSで実装できます。たとえば、フォームのフィールドで入力した文字数に合わせてフィールドを拡張することができます。CSSは1行追加するだけです。
これも以前はJavaScriptのライブラリがたくさんありました。2枚の画像を比較するスライダーもJavaScriptなしで実装できます。
Image Comparison Slider - Basic
画面外からナビゲーションを視覚的に開閉アニメーションで表示するオフスクリーンのナビゲーションもJavaScriptはなしです。
Offscreen Nav - Animate Open/Close
スクロールすると、ヘッダをシャドウ付きで上部に固定させたり、パララックスなどもJavaScriptなしで実装できます。
スクロールしてもぴたっとくっついて表示されるスティッキー、ページ内アンカーにスムーズにスクロールさせるなども以前はJavaScriptが必須でしたが、今ではJavaScriptなしで実装できます。
動画を背景にして、その上にコンテンツを表示させるのも一時期すごい流行りましたね。これも今ではJavaScriptなしで実装できます。
sponsors
