Dreamweaverで学べるBootstrapの超基本！第1回 「必要なファイルを揃える」
Dreamweaverで学べるBootstrapの超基本！
1. 必要なファイルを揃える
Bootstrapは、レスポンシブな、すなわち表示幅に応じてレイアウトが変わるページをお手軽に作れるフレームワークです。Dreamweaverのライブビューを使えばコードをまったく書かずにBootstrapページを制作することさえ不可能ではありません。Bootstrapはこれまでに数百万単位のサイトで採用された実績があり、安心して使えるのもポイントです。
Bootstrapを使ってWebページをつくるには、まず、いくつか必要なファイルを揃えます。最新版のファイルを入手するにはBootstrapサイトのダウンロードページを訪れて、”Download Bootstrap”のボタンをクリックします。
https://blog.adobe.com/media_1f05005fe579ae6cbf08d5baea2630e122abb3fc.gif
ダウンロードしたzipファイルを開き、その中に含まれるファイルを確認しましょう。特に重要なファイルは以下の2つです。
- bootstrap.css ： レスポンシブなレイアウトを実現するためのスタイル
- bootstrap.js ： 便利なコンポーネントやアニメーションの定義
上記の2番目のbootstrap.jsは、内部でjQueryを使用しています。ということで、最低限必要なファイルは上記の2つにjquery.jsを加えた3つです。3つともBootstrapのサイトからダウンロードしたファイルにちゃんと含まれています。
Dreamweaverを使って新規にBootstrap用のHTMLドキュメントを作成すると、必要なファイルは全て自動的に適切な場所に配置されます。事前にダウンロードしたり、環境を整える手間は要りません。直ちにページ制作を開始できます。
下の図は、新しいBootstrapファイルを作成し、index.htmlという名前で保存した直後のフォルダ内の状態です。
目次
- はじめる前に
-
- レスポンシブデザインの理由
- 必要なファイルを揃える
- 最低限必要なHTMLコード
- メディアクエリの指定を確認
- グリッドレイアウトの組み方
- コンテンツを配置する