連載  /  

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

BY 公開

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

  AUTHOR

akihiro kamijo

アドビのコンサルティングチームでリードアーキテクトとして主にUIデザインプロジェクトに関わる。現在は独立してデザイン/開発に関連のマーケティング企画や情報発信、プロジェクト支援を行っている。