HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。

実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。

You can create these elements without JavaScript
by Adrian Bece (@AdrianBDesigns)

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• レスポンシブ対応のテキスト省略
• スター レイティング
• ツールチップ・ドロップダウンメニュー
• モーダル
• フロートするラベル
• アコーディオン・トグル
• 終わりに

はじめに

スマホやWebページでよく使用されるUI要素、アコーディオンやツールチップやテキスト省略などをJavaScriptで実装することに慣れている思います。しかし、HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートが必要なくなったので、こういったUI要素はより少ないJavaScriptで実装できることができます。JavaScriptはコードのロジック部分（バリデーションやデータ検証など）に重点をおくことができます。

ここで紹介するテクニックの中には複雑で柔軟性に欠けるものもありますが、小規模プロジェクトや単体で使用する場合に便利です。

サイトにたった一つのアコーディオンを実装するために、JavaScriptの関数（あるいはjQueryなど）を用意するのは効率的でしょうか？ これが、私のWebサイトでスマホしか表示されないアコーディオンをフッタに追加したときに思ったことです。

実は、JavaScriptを使用せずに実装できるUI要素を紹介します。

レスポンシブ対応のテキスト省略

CSSでテキストを省略するのは実装が非常に簡単で、テキストのHTMLコンテンツを編集するのではなく、レンダリングするだけなので、非常にパフォーマンスにも優れています。テキストが1行の場合の省略は古いブラウザでも十分サポートされていますが、複数行の場合は新しいブラウザでのみサポートされています。

詳しい実装方法は、下記をご覧ください。

• 意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法

スター レイティング

スター レイティングは多くのレビューページで必須とも言える要素です。CSSでこれを実装するには、背景画像やアイコンを使う方法があります。最も簡単に実装できるのは、アイコンとラジオボタンを使う方法です。

この実装方法の欠点は、スターの見た目の順番とラジオボタンの実装の順番が逆になってしまうことです。しかし、この実装は非常に柔軟性に優れており、簡単にカスタマイズできます。

ツールチップ・ドロップダウンメニュー

このテクニックはツールチップとドロップダウンの両方に使用できるため、非常に柔軟です。どちらも同じように動作し、ホバーやクリック、タッチ操作もサポートしています。

問題点として考えられるのは、focusでもパネルを開くようにしているため、クリックしてパネルを開いた際はユーザーが別の場所でクリックするまで、パネルが開いたままになることです。

モーダル

これはリンクの文字列に依存しているため、ちょっとしたハックです。リンクに含まれている「#modal」は、モーダルの要素のidと一致する必要があります。

HTML 5.2では、dialog要素も使用できます。

• HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点

フロートするラベル

この実装は少し複雑なので、フロートするフォームのラベルを実装する方法については別の記事で解説しています。

• floating label input with HTML and CSS only

詳しい実装方法は、下記をご覧ください。

• CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる

アコーディオン・トグル

一時期、HTMLの<details>要素と<summary>要素でアコーディオンが実装できると話題にあがりましたが、スタイルの選択肢が少ないため、Web制作者は今まで通り独自の実装を続けていました。しかし、チェックボックやラジオボタンを使用すると、JavaScriptに依存せずにアコーディオンとトグルを簡単に実装できます。

この実装の欠点は、input要素に依存しているため余分なHTMLが必要になることです。しかしその反面、非常にアクセシブルな要素になっています。

終わりに

ここで紹介したように、CSSのみで実装する場合はJavaScriptのロジックを置き換えるために、:focusや:placeholder-showなどのセレクタを使用します。これらの中にはハックと考えられるものもありますが、パフォーマンスに優れており柔軟性もあります。そしてJavaScriptは必要ありません。

私は実際にここで紹介したCSSのテクニックをプロジェクトに使用しており、余分なJavaScriptを使用したり、ビジュアルのためにJavaScriptを使用する必要がなくなりました。

もちろん他にも多くのCSSのみで実装するテクニックはありますが、ここでは最も興味深いと感じたものを紹介しました。他のテクニックを使用している場合は、ぜひコメントで教えてください。

この記事をお読みいただき、ありがとうございます。