CSSフレームワークを使う理由は何でしょう。
一度採用してしまうと、その学習も大変ですし、後で他のフレームワークに変えようとしても大変な労力を必要とします。
ですので、最初の選択は重要です。
改めて、CSSフレームワークについて考えてみました。
ひと昔のように CSSフレームワークを話題として取り上げるような記事は少なくなったと思います。
javascript の開発スタイルが多様化しているので React や Vue.js のようなコンポーネント開発が主流になってきています。
SPA(Single Page Application)に代表されるように、html を直接書く機会が少なくなっているように思われます。
あえてCSSフレームワークを使う目的が何かを改めて考える必要があるようです。
最近のGoogle検索エンジンは変です。
自分が意図していない検索結果が多数上位に出てきます。
CSSフレームワークを検索してみると、どうも実態と合っていない印象を受けます。
Bootstrap は良いとして、それ以下の人気度と実態はさっぱり分りません。
日本語では「ちょっと使ってみた」みたいな記事は見ますが、ちゃんと深堀した紹介記事を見た事がありません。
現状、技術者のサイトとして頼りになるのが、qiita と github でしょうか。
これらで１年前以降で話題に出てくるようなものを対象にしましょう。
CSS フレームワークを大きく分けると、javascript を使うか否かです。
近年 CSS の仕様が飛躍的に拡張されて、以前では javascript を使ってしかできなかった事が CSS だけで容易に出来るようになってきています。
下手にフレームワークを使って無駄に裏で javascript が動いて悪さをするような事が無いとは言えません。
javascript を自分で書くのが苦で無ければ、CSS だけのフレームワークの選択も悪くは無いと思います。
私のスタンスとしては、CSS だけでは無理な部分があるので、javascript を使うフレームワークを対象としたいところです。
もし、あなたが初めてホームページを作りたいと思っているなら、まず一番簡単なサンプルを探しましょう。
最も基本的なのが、カバーページ(Cover Page)です。
ここでは、CSS だけのフレームワークは多くは取り上げないつもりですが、
その前に CSS という意味では少し興味深かったのが classレスのフレームワークです。
綺麗な構造の html ですね。どのタグをどこに使うべきかが良く解ります。
最近はタグ自体も種類が増えていますので、これらにちゃんと対応して書けばある程度デザインができると感じています。
既存の CSS フレームワークの多くが新しいタグを無視している実態を考えると正直どうしてだろうと思います。
例えば、<nav class="navbar"> とかは明らかに冗長ですよね。
では、各フレームワークのリンクを載せておきます。ソースコードを見ていただければと思います。
MUI(Material UI) の Cover Page サンプル
Bootstrap のサンプルのソースは正直なところ汚いですね。
サンプルにしては、不要なコンテンツが多いのが理由です。本当はもっとシンプルに書けます。
jQuery に依存しなくなったのは大きいです。
Semantic UI も余計なコンテンツと制御が入ってます。これでは何が良いのかさっぱり判りません。
Bulma は、CSS だけのフレームワークですが、ハンバーガーメニューが動いていたので紹介しています。
実際には、javascript を個別に書いて制御されていますが、class の使い方は Bootstrap よりはシンプルです。
ただ、今でもバージョンが 0.9x というのと、Bulma という名前からも想像できますが、"hero-*"とかちょっと癖があるようです。
MUI は Cover Page が無かったのでアルバムページのサンプルです。
ソースを見ると、もうサンプルという代物では無いですね。人が書いたのではなく、
webpack とかで生成したコードを載せている感じです。
MUI と改名したのも React を使う前提となったようです。
Foundation も Cover Page が無かったので、ブログページのテンプレートです。
html を見ると、ほとんど <div> で済ませちゃてます。まあ、確かに class で制御するつもりなんで
合理的なのでしょうが、そういう考えで今後も大丈夫なのか心配です。
UIkit も Cover Page が無かったので、フロントページでのサンプルです。
class の使い方は Bootstrap に似てます。uk- が先頭に付く分 Bootstrap より冗長に感じます。
自分で定義した class と見分けがつくという意味では良いです。
ソース通りでこのデザインなら素晴らしいですが、このサンプル用に巨大な CSS で粉飾しているのでこれだけで判断は出来ません。
結局、Bootstrap5 が今でも安定してます。
Foundation や、UIkit は Bootstrap の発想とさほど変わり映えしない印象で、
Bootstrap のデザインに飽き足らない人に支持されているのかな？とも思います。
javascript が得意なら CSS だけのフレームワークも良いと思いますが、
どれも癖(結局は開発者自身が個人的に気に入ったデザインを使おうとしている感じ)が強そうです。
この中で、Semantic UI だけが Bootstrap とは違う考え方を持っていてのが特徴的です。
class の命名規則が他のフレームワークと一線を画していますし、デザインも良い意味で平凡です。
ただ、jQuery 依存は流行りのコンポーネント開発には向いていない印象もあります。
| « 前頁 | 次頁 » |