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という名前で保存した直後のフォルダ内の状態です。
目次
-
はじめる前に
- レスポンシブデザインの理由
- 必要なファイルを揃える
- 最低限必要なHTMLコード
- メディアクエリの指定を確認
-
グリッドレイアウトの組み方
-
コンテンツを配置する
Topics: クリエイティブ, UI/UX & Web
Products: