(1/4)話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。true;});最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ!」。今回紹介するフレームワークは「Bootstrap」です。話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。Bootstrapは最近よく聞くCSSの「フレームワーク」といわれるものです。CSSの「フレームワーク」とはCSSの「枠組み・スタイルなど」をある程度最初から定義している、ライブラリファイルのようなものです。Bootstrap」と呼ばれていましたが、現在は「Bootstrap」のみになりました。2014年3月19日の記事公開時現在の最新バージョンは3.1.1です。Bootstrap編集部注(2016年4月11日)本稿は、2016年4月8日現在の最新バージョン3.3.6でも変わらず使えることを確認しております。Basics/Keyword:Bootstrap(ブートストラップ)」をご確認ください。4」のα版がリリースされました。Stylesheets)」を採用するなど、大きな変更があります。alpha」が登場』をご確認ください。4の使い方については、正式版登場ごろに記事を掲載予定です。Bootstrapは洗練・統一されたデザインを素早く適用できるHTMLファイルにCSSフレームワーク(CSSファイル)を読み込むだけで、程良いスタイルが適用されたデザインを表示可能になります。CSSファイル・スタイル定義を最初から作成しなくても、統一されたデザインを適用可能になります。洗練・統一されたデザインを素早く適用できるのも魅力です。プロトタイプ開発などモックアップのデザインでも素早く見栄えを整えられるのが特徴です。BootstrapはレスポンシブWebデザインBootstrapはレスポンシブWebデザインに対応しています。レスポンシブWebデザインに対応しているということは、つまりCSS3のメディアクエリを使用しているということです。Bootstrapを使うのに、HTML5/CSS3の知識が必須ではありませんが、ある程度の知識も身に着けておいた方がCSS内容を読み解くことも可能になります。一度Bootstrapでフロントエンドを作成してしまえば、さまざまなテーマで簡単に色合いを変更可能です。一つの例として、「bootswatch」など閲覧してみてください。多彩なBootstrapのテーマカラーが用意されています。bootswatchこちらは各テーマのCSSをダウンロードして、差し替えるだけで選択したテーマのカラーに変更できるというものです。こちらも一度お試しください。3.6以下はサポートされません。9より下のバージョンの場合、CSS3メディアクエリがサポートされていないため、「Respond.js」を使用する必要があります。Bootstrap」ボタンをクリックします。Bootstrap」ボタンをクリックし、ダウンロードを開始します。※ダウンロード後もこのページを使用しますので、閉じないでください。bootstrap-3.1.1-dist.zip(3.1.1の部分はバージョン番号なので変わることがあります)がダウンロードされます。ZIPファイルを解凍すると、以下のようなフォルダー・ファイル構成になっています。「css」フォルダー、「js」フォルダー、「fonts」フォルダーの3つのフォルダーが表示されます。Template」のカテゴリが表示されます。このカテゴリには、Bootstrapをすぐ使うためのHTMLコードのテンプレートが記載されてます。このHTMLコードをコピー&ペーストするだけで手軽に試していくことが可能です。以下、赤枠の箇所がコピーする「HTMLコード」です。これをコピーしておきます。次に、空のindex.htmlを作成し、index.htmlを開いて、上記「HTMLコード」を上書きします。このファイルを「bootstrap」フォルダー内に設置します。Bootstrap!準備はこれで完了です。index.htmlをブラウザーで開いてください。サンプルファイルのダウンロードここからは、筆者が用意したサンプルファイルを基にBootstrapの使い方を解説していきます。サンプルファイルはBootstrapデフォルトのスタイルを使っています。こちらからダウンロードできます。編集部注(2016年4月11日)本稿の内容については、2016年4月8日現在の最新バージョン3.3.6でも変わらず使えることを確認しておりますが、サンプルファイルはバージョン3.1.1を基にしております。バージョン3.3.6では、「css」フォルダー内に「.map」拡張子のファイルが追加されるなど違いがありますが、基本な動きは変わりありません。alpha」がリリースされた。中の人に聞く、Bootstrap対応を強化するDreamweaverの新機能と今後、コーディングが捗る裏技とはもうすぐ2015年2度目の大きな機能追加が予定されているDreamweaverについて、機能追加の方向性や、あまり知られていない裏技などを開発担当者に聞いた。メールマガジンをご購読ください。Japanスマートジャパン3Dモデラボキャリア@IT自分戦略研究所エンジニアライフディルバートアプリITmediaねとらぼねこらぼついトピ!ITmediaはアイティメディア株式会社の登録商標です。