Dreamweaverで学べるBootstrapの超基本！第1回「必要なファイルを揃える」

by akihiro kamijo

Posted on 06-22-2015

Dreamweaverで学べるBootstrapの超基本！

1. 必要なファイルを揃える

Bootstrapは、レスポンシブな、すなわち表示幅に応じてレイアウトが変わるページをお手軽に作れるフレームワークです。Dreamweaverのライブビューを使えばコードをまったく書かずにBootstrapページを制作することさえ不可能ではありません。Bootstrapはこれまでに数百万単位のサイトで採用された実績があり、安心して使えるのもポイントです。

Bootstrapを使ってWebページをつくるには、まず、いくつか必要なファイルを揃えます。最新版のファイルを入手するにはBootstrapサイトのダウンロードページを訪れて、”Download Bootstrap”のボタンをクリックします。

ダウンロードしたzipファイルを開き、その中に含まれるファイルを確認しましょう。特に重要なファイルは以下の2つです。

bootstrap.css ：レスポンシブなレイアウトを実現するためのスタイル
bootstrap.js ：便利なコンポーネントやアニメーションの定義

上記の2番目のbootstrap.jsは、内部でjQueryを使用しています。ということで、最低限必要なファイルは上記の2つにjquery.jsを加えた3つです。3つともBootstrapのサイトからダウンロードしたファイルにちゃんと含まれています。

Dreamweaverを使って新規にBootstrap用のHTMLドキュメントを作成すると、必要なファイルは全て自動的に適切な場所に配置されます。事前にダウンロードしたり、環境を整える手間は要りません。直ちにページ制作を開始できます。

下の図は、新しいBootstrapファイルを作成し、index.htmlという名前で保存した直後のフォルダ内の状態です。

bootstrap files

__
Dreamweaver体験版ダウンロード

__
チュートリアルビデオを視聴

Dreamweaverで学べるBootstrapの超基本！第1回 「必要なファイルを揃える」