WebサイトやWebアプリを作るとき、デザインはCSSで指定します。統一感があるデザインを実現するために、以前はCSSフレームワークを使うことが多かったものですが、最近はUIライブラリを使うことが増えています。その特徴と理由について解説します。
CSSフレームワークとは
Webページの見た目を制御するCSSは、工夫すると緻密なデザインを実現できますが、その調整は面倒なものです。しかし、何もCSSを指定せずにHTMLを記述するだけでは、簡素な表現になってしまいます。
たとえば、次のようなHTMLでボタンを配置すると、図のようなボタンができます。
<button>ボタンの例</button>
これでも機能的には問題ありませんが、あまり見栄えはしません。また、Webブラウザによって表示は異なります。専門のデザイナーがいると、CSSでデザインを指定して細かく調整できますが、見栄えのするデザインを作成するのはITエンジニアにとって大変です。
■CSSフレームワークのメリット
実務で使うWebサイトやWebアプリであれば、それほど凝ったデザインは必要なく、統一感のあるデザインを手軽に実現したい、という要望があります。そこで、見た目（デザイン）やレイアウトを効率よく実装するためにあらかじめ用意されたスタイルシートの集合である「CSSフレームワーク」が使われるようになりました。
たとえば、有名なCSSフレームワークとして「Bootstrap」があります。Bootstrapでは、用意されているCSSを読み込んだうえで、HTMLのクラス（class属性）を次のように指定するだけで図のような綺麗なボタンを表現できます。
<button class="btn btn-primary">ボタンの例</button>
また、以前「Hotwireとは？HTMLに書き足すだけでページが動く」の記事で紹介した「Pico.css 」というCSSフレームワークを使うこともできます。Pico.cssでも、用意されているCSSを読み込んだうえで、HTMLで次のように指定するだけで、ボタンの見た目が変わります。
<button>ボタンの例</button>
このようにCSSフレームワークを使うと、CSSを記述せずにHTMLファイルを作成するだけで、少し見栄えのするデザインを実現できます。Webブラウザによる差もほぼなくなります。
Tailwindが注目される理由
上記で紹介したCSSフレームワークは便利な一方で、デザインをちょっと工夫しようとすると、結局CSSを記述しなければなりません。HTMLファイルとCSSファイルを両方編集する必要があるのです。
そこで、CSSを書かずに、HTMLのクラスを変更するだけでデザインを変えられる「Tailwind（テイルウィンド）」というCSSフレームワークが注目されるようになりました。TailwindはCSSで指定するような内容をクラスで指定するCSSフレームワークです。
たとえば、CSSフレームワークを何も使わずに、buttonというタグに次のようなCSSを指定する場面を考えてみましょう。
button {
border-radius: 0.25rem;
border-width: 1px;
border-color: oklch(0.546 0.245 262.881);
background-color: oklch(0.546 0.245 262.881);
padding-inline: 1.5rem;
padding-block: 0.75rem;
color: #fff;
}
このCSSを適用すると、次のようなデザインのボタンができます。
Tailwindで上記と同じデザインを実現するとき、用意されているCSSを読み込んだうえで、HTMLで次のように記述するだけです。
<button class="rounded-sm border border-blue-600 bg-blue-600 px-6 py-3 text-white">ボタンの例</button>
上記で作成したCSSの1行がHTMLのクラスの1つにそれぞれ対応しています。つまり、HTMLのクラスは長くなるものの、CSSを書かなくて良いことがメリットです。デザインを変更したいときも、HTMLファイルだけを修正すればいいのです。
また、CSSを変更したときに影響が出る範囲を減らせるメリットもあります。CSSを変更すると、そのCSSを使っている部分のデザインがすべて変わってしまいますが、TailwindではHTMLファイルでクラスを変更しなければその部分のデザインが変わることはありません。
UIライブラリでの再利用
Tailwindは便利な一方で、同じデザインのボタンを複数用意するような場合は、すべてのbutton要素に対して、上記のような長いクラスを指定しなければなりません。このようなボタンがたくさんあると、それらをすべて変更する必要があるのです。
これは面倒なので、ある程度デザインされたものを再利用しよう、という考え方が出てきました。この再利用するときのまとまりを「コンポーネント」と呼び、綺麗にデザインされたコンポーネントを提供するライブラリを「UIライブラリ」もしくは「UIコンポーネントライブラリ」といいます。
代表的なUIライブラリとして
などが挙げられます。
これらの多くはReactやVueといったフロントエンドフレームワークで使われることが多いものです。ここでは、一般的なHTMLでも手頃に使えるdaisyUIで紹介します。daisyUIでは、用意されているCSSを読み込んだうえで、次のようにHTMLを指定すると、図のようなボタンができます。
<button class="btn btn-primary">ボタンの例</button>
これを見ると、Bootstrapと同じように使えることがわかります。さらに、Tailwindの指定がそのまま使えるため、上記に少し追加して次のようなクラスを指定すると、図のように色を変えられます。
<button class="btn btn-primary border-blue-600 bg-blue-600 text-white">ボタンの例</button>
このように、ある程度見栄えがするデザインをUIライブラリで実現し、さらに追加でTailwindのクラスを指定することで、自由に調整できるのです。
まとめ
WebサイトやWebアプリを作成するときに、面倒なCSSの指定から解放されると、やりたいことを速やかに実現できます。そして、手軽に修正できるようになると、メンテナンスコストを減らすことにも繋がります。
CSSを学ぶことも大切ですが、CSSフレームワークやUIライブラリを使ってできるだけ楽をすることで効率よく開発してみましょう。
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』、最新刊の『実務で役立つ バックアップの教科書』（翔泳社）がある。
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2025年2月時点のものです。
