11時00分更新おおくぼようすけ、まきのてつおツイートするスマートフォンやタブレットの普及によって、いつでもどこでもインターネットにつながるようになり、さまざまなWebサービスをたくさんの人に提供できる環境が整ってきました。それに伴い、中小企業や個人のスタートアップが活発になり、新しいWebサービスが次々と生まれています。そこでエンジニアの間で関心が高まっているのが、「いかに効率よく開発・制作」し、「アイデアをいかに早く形にして世の中にローンチする」か、ということです。Bootstrap」について、基本的な使い方から実際のWebアプリ開発での導入方法までを紹介します。Bootstrapが何なのか、どのような場面で使われているのか、確認しましょう。Bootstrapは、米ツイッターが開発・提供しているフロントエンドツールです。オープンソースで公開されており、誰でも無償でダウンロードしてすぐに使えます。Bootstrapは、Webデザインができないエンジニアでも、見た目をすばやく整えられるツールとして位置づけられています。Bootstrapを適用しているWebシステムを多く見かけますし、新規Webサービスのリーンスタートアップに使われるケースも多くなってきました。Bootstrapがこれだけ使われているのには、4つの理由があります。Bootstrapを利用するメリットは、何といってもエンジニアがデザイナーに依頼することなく、自力で「ほどよい」デザインのサービスをが作れることです。Bootstrapを導入しただけでも見栄えはぐっとよくなりますので、その効果はすぐに実感できるでしょう。2.カスタマイズも簡単であるカスタマイズも比較的簡単にできます。HTML5とCSSの基礎的な知識は必要ですが、その学習コストを割いてでも、いちからデザインするのに比べれば、利用するメリットは十分あるでしょう。Bootstrapは一般的にCSSフレームワークとして認知されていますが、CSSフレームワークにはない「コンポーネント」の概念があります。コンポーネントの実体はjQueryのプラグインで、JavaScriptのコードを一切書かなくてもリッチなUIを作れるのが特徴です。HTML/CSSの初心者や、デザインが苦手なエンジニア、JavaScriptがあまり得意でないWebデザイナーにも手軽に使えますし、JavaScriptを書かずに済むので開発工数を削減できるメリットがあります。BootstrapではレスポンシブWebデザインもカバーされています。レスポンシブWebデザインは、スマートフォンなどでPCとは別のレイアウトを提供する手法で、デバイスの画面サイズに併せてCSSが自動的にデザインを変更します。レスポンシブWebデザインは、「モバイルファースト」と言われる時代では必要不可欠な手法であると筆者は考えています。Bootstrapでは基本的なレスポンシブWebデザインのテンプレートが用意されていますので、それに倣って作っていけばよいでしょう。Bootstrapなのです。Bootstrapを利用して作られたWebサービスはたくさんあり、利用範囲は多岐に渡ります。いくつか代表的な例を紹介しますので、実際に確認してみましょう。ドットインストール「ドットインストール」は「3分動画でマスターする初心者向けプログラミング学習サイト」です。Bootstrapの基本的な使い方が解説されています。tipshare「tipshare(ティップスシェア)」は日々見つけた「役に立ったこと」を記録するTips共有サイトです。Bootstrapで作られたさまざまなサイトを紹介するショーケースです。Bootstrapで制作されています。Bootstrapといっても、少し手を加えるだけでまったく違ったデザインを提供できることがわかります。前へ12次へこの記事の編集者は以下の記事をオススメしていますDESIGN柔軟性あるデザインプロセスへ移行するためのヒントWebサイトの設計・開発における“当たり前”だった「ワイヤーフレーム」を見直す時期に来ている。新しいワークフローについて考えてみよう。4357781DESIGNゼロから始めるレスポンシブWebデザイン入門スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。Design)が海外で注目を集めている。どのようなアプローチなのだ...774675512DESIGNCSSの記述が3倍速くなる「LESS」の使い方Webサイトの大規模化、複雑化に伴って注目されているCSS拡張メタ言語。中でもいま注目の「LESS」について、簡単で便利な使い方を紹介しよう。スマホお気に入り一覧マイページ。