Bootstrapを利用してホームページを作る

カテゴリ:: iPhone; ウェブ・技術

TEMPESTのホームページのデザインがずっと放置状態なのが気になっていまた。しかし忙しいのと、スマートフォン対応がネックで延び延びになっていたのです。

そして調べていると見つけたのがBootstrap。これを使えば自分でCSSを書かなくても、スマートフォンに対応できるらしいよ。

ただこのサイトを見ただけでいきなり理解は難しい…。探してみるとドットインストールにありましたよ。

全部見て大体理解しました(HTMLの基礎知識が必要です、CSSが何か知っている必要があります)。当たり前ですが、基本的なデザインは自分で考えて、必要なCSSやJavaScriptを呼んでくるんですね。元となるCSSやJavaScriptを自分で書かなくて済むのがポイントです。ただのHTMLがイマドキ風になります。

新しいページの具体的な変更点は2箇所。スマートフォンで見るとそのまま最適化されたページになるので、PCで見てください。

まずホームページを開きます。するとトップにナビゲーションがあり、メインは2カラムですね。

そしてブラウザのウィンドウ幅を狭くしていくと自動的に1カラムになり、ナビゲーションも変更されるのが分かります。古いページをあえて残してあるので比較すると違いがよく分かります。

これを自分で一から作るのはかなり気の遠くなる作業ですが、Bootstrapを使えばあっという間です(HTMLの基礎知識があれば)。

ということで今後はBootstrapを理解していればそこそこのホームページは比較的簡単に出来ることが分かりました。大企業やデザインの会社以外は全部これでいいんじゃないのって思う。

今後はスマートフォンやタブレットからのアクセスがますます増えるわけで、それらに対応しているのがすごく重要だよね。