Bootstrapの基本をおさえよう (1/5)
作成:2017-02-04 10:19
更新:2017-02-04 10:19
更新:2017-02-04 10:19
■Bootstrapとはなにか?
Webサイトの開発は、ここ数年で劇的に変わりました。大きく変わる要因となったものの一つに「スマートフォン」があります。
スマートフォンは、パソコンに比べると画面が小さく、縦長です。このため、パソコン用に作られたWebページをそのまま表示すると、小さくて見づらくなってしまいます。このため、パソコン用とは別にスマートフォン用のページを用意したりしていました。
が、わざわざ同じ内容のWebページを複数作るなんて非効率的です。またページ内容を更新するときは、パソコン用とスマホ用の両方を書き換えないといけません。これはかなり面倒ですね。
Webページをロードした時に、それがパソコンの画面かスマートフォンかをチェックし、環境に応じて自動的に最適なレイアウトに表示するような仕組みがあれば、こうした面倒はなくなります。
そのような考え方から生まれたのが「レスポンシブデザイン」という考え方です。さまざまなデバイスごとに最適化されたレイアウトを生成しよう、というのが基本です。そして、それを簡単に実現できるソフトェアとして注目されているのが「Bootstrap」なのです。
Bootstrapは、「フロントエンド・Webアプリケーションフレームワーク」と呼ばれるプログラムです。一般に、Webアプリケーションを開発するのに「Webアプリケーションフレームワーク」と呼ばれるものが使われたりしますが、これはバックエンド(サーバー側)で動くのが基本です。Bootstrapは、フロントエンド(Webブラウザ側)で動くフレームワークなのです。
このBootstrapは、Mark OttoとJacob Thorntonの2人が中心となって開発されているオープンソース・プログラムです。現在、以下のサイトにて公開されています。
Bootstrapは、ファイルをダウンロードして直接Webサイトに組み込んで使う他、CDN(Contents Delivery Network)を利用してオンライン上でファイルをダウンロードし利用する方法などがあります。CDNを利用するならファイルをダウンロードする必要はありません。(このへんは、後で説明します)
スマートフォンは、パソコンに比べると画面が小さく、縦長です。このため、パソコン用に作られたWebページをそのまま表示すると、小さくて見づらくなってしまいます。このため、パソコン用とは別にスマートフォン用のページを用意したりしていました。
が、わざわざ同じ内容のWebページを複数作るなんて非効率的です。またページ内容を更新するときは、パソコン用とスマホ用の両方を書き換えないといけません。これはかなり面倒ですね。
Webページをロードした時に、それがパソコンの画面かスマートフォンかをチェックし、環境に応じて自動的に最適なレイアウトに表示するような仕組みがあれば、こうした面倒はなくなります。
そのような考え方から生まれたのが「レスポンシブデザイン」という考え方です。さまざまなデバイスごとに最適化されたレイアウトを生成しよう、というのが基本です。そして、それを簡単に実現できるソフトェアとして注目されているのが「Bootstrap」なのです。
Bootstrapは、「フロントエンド・Webアプリケーションフレームワーク」と呼ばれるプログラムです。一般に、Webアプリケーションを開発するのに「Webアプリケーションフレームワーク」と呼ばれるものが使われたりしますが、これはバックエンド(サーバー側)で動くのが基本です。Bootstrapは、フロントエンド(Webブラウザ側)で動くフレームワークなのです。
このBootstrapは、Mark OttoとJacob Thorntonの2人が中心となって開発されているオープンソース・プログラムです。現在、以下のサイトにて公開されています。
http://getbootstrap.com/このページにある「Download Bootstrap」というボタンをクリックすると、Getting Startedページのダウンロードの項目にジャンプします。ここで、「Download Bootstrap」ボタンをクリックすると、Bootstrap本体をダウンロードすることができます。
Bootstrapは、ファイルをダウンロードして直接Webサイトに組み込んで使う他、CDN(Contents Delivery Network)を利用してオンライン上でファイルをダウンロードし利用する方法などがあります。CDNを利用するならファイルをダウンロードする必要はありません。(このへんは、後で説明します)
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※Bootstrapのダウンロードページ。
※関連コンテンツ