BootStrapって何よ!?

BootStrapって!?

成り行き上仕方ないHP作り

BootStrap レスポンシブル

スマホも進化したなあ

仕事で突然既存HPのスマホ対応というものが舞い込んできました。もちろん本業ではありません・・・。ゴリゴリバリバリHTML、CSSを扱えるわけでもありません。元々そのHPは業務の片手間で作ったようなやつだったんですけど、当然それを手直ししていくのは自分なわけで・・・。

にゃんこ
プッ。

その自分で作ったHPってのが古い形式で作ったというか…スマホなどのDisplayが小さいもののことを考慮しないで作っていたんですね…。

スマホでアクセスしても「PC用サイト」がでてくるやつです

そんな状態のまま数年が過ぎて、気がつけば世の中はスマホ全盛時代です。今の若者たちは何でもスマホで情報を得ます。そりゃそうですよね、わざわざPCを開かなくってもあらゆるHPを閲覧できるんですからね。PCが売れなくなってくるのも頷ける状況です。っとそんなありきたりの分析をしている暇はありません。そうなんです!スマホですスマホ。今時会社のHPもスマホ表示に対応してないと厳しいだろうということで急遽対応せざるを得ない状況になってきました。

いろいろ方法はあった

っということでHPの「スマホ対応」を考えてみることにしました。調べたらスマホに対応するには幾つか方法があって

  1. PCとは別のスマホ専用HTMLファイルを用意する
  2. スマホとPC用にCSSを分ける
  3. レスポンシブデザインに変更する

まず1つ目の「PCとは別のスマホ専用HTMLファイルを用意する」は、今までのものはそのままでindex.html(Topページ)にアクセスが来た時にスマホ用HTMLにジャンプするように設定すればできます。一番簡単な方法のようですが、何かの情報が更新された場合にどっちのファイルも修正しないといけないという手間があります。

スマホ用のアドレスを www.example.co.jp/sp/index.htmlにするとか

では、2つ目の「スマホとPC用にCSSを分ける」はどうでしょうか。これはCSS、すなわちスタイルシートを使ってアクセスしてきた各端末によってレイアウトを変えて対応しようとするものです。結局はこれだと既存のファイルにも変更が必要になってきます…かなりの規模で…だって、そうすることを前提に書いてないからね…。

3つ目の「レスポンシブデザインに変更」するも、同様に相当高度なCSSの知識が必要になります。これは2つ目と同じですがこちらは丸々作り直す形になります。でも、PC用とスマホ用でファイルHTMLとCSSの各一つずつなんだから管理も楽ってわけです。

レスポンシブデザインは、PCの表示(横幅が広い)とスマホの表示(狭い横幅)両方に対応しているデザインのことです。

ここまでのことを考慮すると3つ目の「レスポンシブデザイン」にしてしまうという方法が今後を考えた時に一番な気がしてきました。で、でもいかんせんその知識がありません…。

にゃんこ
じゃだめじゃん。

BootStrapという救世主が現わる

方向性は決まっても知識、技術がないなら作れるわけありません。しかも、一から最新のCSSを勉強し直してなんて悠長なこと言ってられません。本来の業務じゃないんだし…。ってことでもっと楽できる方法はないのかを探しました。そしたらありましたありました!!

その名も「BootStrap」です。

スポンサーリンク



BootStrapってそもそも何なの

CSSフレームワーク!?

この「BootStrap」とはなんなんでしょうか。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。Ver2.0以降ではレスポンシブデザインに対応しており、閲覧機器(PC、タブレット、携帯電話)の仕様に応じてWebページのレイアウトが動的に調整される

Wiki

bootStrap

これがBootStapだ

これをダウンロードして、使用することでclass指定をしたりするだけで簡単にかっちょいいデザインのサイトを作ることができるだけでなく、なんと夢の「レスポンシブデザイン」にも対応できてしまうということらしいです。こんなすばらしいもの使わない手はないですね。

メリ
便利な世の中ね。



BootStrapで何ができるのか!?

サンプルを見てみる

例えばこんな画面も…。

BootStrap 綺麗で難しそうだけど…その1

綺麗で難しそうだけど…その1

以下の簡単なHTMLコードを書くだけで出来ちゃいます。

こんなのも…

BootStrap 綺麗で難しそうだけど…その2

綺麗で難しそうだけど…その2

こんなに簡単に…

            

どちらのコードも抜粋なので、このままでは同じ表示ができません。

こりゃ使わないともったいないでしょ

いろいろなパーツのCSSが用意されているから、この「BootStrap」を組み込むだけでこんな簡単なコードで綺麗なパーツ類が使えます。しかもレスポンシブデザインも可能なんて!!もっと早くこの存在に気がついていればよかった…。

メリ
後の祭りね。
もちろんHTMLとCSSのある程度の知識は必要です。

コメントを残す

メールアドレスが公開されることはありません。