改めてホームページの作成方法について考えてみました。
検索すると殆どが初心者向けで「html は何ぞや・・・」から始まります。
そんな事を期待してる人は少数だと思いますが、現状の検索エンジンの限界ですね。
ここでは、html、css、javascript はある程度理解している前提で実践的に考えてみました。
とすると、css フレームワークを使うのが良いと思います。
次に誰でも思うのがここです。
検索するといろいろありますが、どれが良いのか全く判りません。
とりあえず、Bootstrap が一番メジャーな選択である事がわかります。
なので、Boorstrap を選択すれば間違い無いでしょう。
と言っておきながら、私としては Semantic UI を選択しました。
Semantic UI は公式にはバージョン2.4で止まっているので将来性に問題があります。
今は Fomantic UI に引き継がれて開発は継続されています。(この時点で 2.9.2)
何が気に入っているかと言えば、class 名にハイフン"-"を使わないところです。
Bootstrap 5 では jQuery が不要となったのに対しては Semantic UI は相変わらず依存してますので、
そういった点では、最近の流行りでは無いと思います。
本サイトのトップ画面を Bootstrap 5 と Semantic UI で作成したものと比べてみました。
Bootstrap 5 での例
Semantic UI での例
結果としては、Bootstrap 5 のほうがシンプルに書けます。
例では、ボタンの遷移に jQuery をわざわざ読み込んでますが Bootstrap 5 自体には不要です。
Semantic UI では、わざわざスタイルシートを書いているのが面倒ですね。
このページは、ヘッダーのメニューバーを上部に固定して、フッターは表示画面の最下部に固定するものです。
ヘッダーを固定するとその下に位置するコンテンツと本来は重なるので、その分マージン(余白)を取る必要がありますが、
Bootstrap 5 では"pt-5"で class で指定できます。
フッターは「Sticky footer」と呼ばれるものです。
Bootstrap 5 では "fixed-bottom" で指定可能ですが Semantic UI では対応クラスがありません。
結局はどこまで細かくサポートするかの違いです。
「探すのが面倒なら自分で css 書いたほうが早い」というものでしょうね。
| « 前頁 | 次頁 » |