Lesson9Lesson9 6 Bootstrap を用いたレイアウト
Bootstrap と は CSS フ レ ー ム ワ ー ク の 一 種 で す。 Twitter 社 が 開 発 ・ 提 供 を し た の が 初 め で、 「TwitterBootstrap」 と呼ばれていました。 CSS を指定するだけでサイトを形作ることができる素材集のようなもので、HTML と CSS の知識は必須ですがどなたでもそれなりの見栄えのサイトを作ることができます。

新規ファイルの作成① メニューバーの「ファイル」-「新規」を選択します。
②「新規ドキュメント」ダイアログボックスが表示されます。 左図のように設定し「作成」をクリックしましょう。
ドキュメントタイプ ：「HTML」
フレームワーク ：「BOOTSTRAP」
BOOTSTRAP CSS ：「新規作成」③ 新規ドキュメントが作成されます。 必要な CSS や
Javascript ファイルも一緒に作成されます。
bootstrap.css
jquery-1.11.3.min.js
bootstrap.js
確認ができたら次の操作のため、 ルートフォルダに index.
html という名前をつけて保存しましょう。

!

グリッドとブレークポイント

初期設定のグリッド列は 12、 ブレークポイントは 768px、992px、 1200px です。 設定を変更する場合は、 新規ドキュ
メントダイアログボックスにて「カスタマイズ」をクリックして値を変更します。

- 223 -

9-6 Bootstrap を用いたレイアウト

Lesson9

用意されている CSS について

Extra small
Small
画面幅 極小 画面幅 小スマートフォン タブレット
768px 未満768px 以上
992px 未満

新機能Medium
Large
画面幅 中
画面幅 大
デスクトップ992px 以上
1200px 以上

スマートフォン、 タブレット、 パソコンなど異なるデバイス画面に合わせてレイアウトを切り替えるために Bootstrap では
閲覧側画面の幅を 4 種類に分けて想定して CSS を用意しています。

1200px 未満

Bootstrap ではグリッドシステムが採用されており、 このシステムを利用するための CSS は自動作成された CSS の中に記述されています。 その中でもレイアウトによく使用されるクラスについて解説しましょう。

.container.container「.container」は 「格納庫」 という意味で、 決められた幅を持つコンテナです。Bootstrap では先述通り 4 つの幅をデフォルトで持ちます。 中身を画面中央に固定してレイアウトする.row.col-sm-4クラスです。「.container（幅固定）」と、「.container-fluid.col- 〇〇

.col- 〇〇（画面に合わせて流動的）」があります。

.row「.row」は、 コンテナの中に配置し、 水平にグループを作成して並べます。

.col
画面幅

Extra small

Small

MediumLarge

デバイス

ｽﾏｰﾄﾌｫﾝ

タブレット

デスクトップ

ｸﾗｽ接頭子.col-xs-.col-sm-.col-md- .col-lg-「.col」は、 カラム割りを決めるクラスです。 .col-【クラス接頭子】-【数字】で、 画面幅のブレイクポイントとなる値を指定し数字で決めたカラムの幅を指定することができます。

例えば左の例では、 ショートケーキの画像が入ったメニューのカラムクラス名は Medium 画面で４つのグリッドを占有す
出典 ： http://getbootstrap.com/

9-6 Bootstrap を用いたレイアウト

る設定で「.col-sm-4」となります。

- 224 -

Lesson9

ドキュメントの編集

新機能

今回は作成したテンプレートに手を加えてカフェサイトを作成します。 ライブビューに切り替え、画面操作を確認しましょう。

① 画面上部に表示される帯「ビジュアルメディアクエリー」をクリックすると、 各デバイス向けの画面幅に応じたデザインを確認することができます。

◆ロゴの入力とヘッダー画像の挿入① ライブビュー画面左上の「Brand」をダブルクリックし、「CAFE ADVAN」と入力しましょう。

ヘッダー画像を挿入するため、必要な div タグを挿入します。
② DOM パネルにて <h1> タグが入った <div>.row を選
右クリック!

択し、 右クリック -「前に挿入」を選択します。

Bootstrap 公式サイト

用意されている CSS をより詳しく知りたい方、 新しい情報を入手したい方は、 公式サイトをチェックしましょう。 但し、 現在のところすべてが英語表記となっています。
http://getbootstrap.com/- 225 -

9-6 Bootstrap を用いたレイアウト

Lesson9<div> タグが挿入されました。 次に、 用意されているクラス「.jumbotron」を設定しましょう。
③ <div> タグの右横に表示されるボックスに直接入力モードで「.jumb ～」と入力しましょう。 すでに CSS が用意されているため、 選択可能なクラスが表示されます。 この中からクラス .jumbotron を設定しましょう。

次に、 背景画像を挿入します。 ドキュメントタブ下に表示されている bootstrap.css を選択し、「書き込み可能にする」をクリックしましょう。

④ css デザイナーパネルでソースから bootstrap.css を選択し、 セレクターで .jumbotron を選択します。
下記のように設定しましょう。

background-image ： フォルダー「images2」
画像「cafetop.jpg」※セレクターの中に同じ名前のクラスがある場合は、 メディアクエリでデバイス毎の設定をしています。 同じ画像設定を行いましょう。

最後に、 <div class="row"> を <div class="jumbotron"> の入れ子にします。
⑤ DOM パネルで <div>.row を選択し、 直前にある<div> .jumbotron までドラッグしましょう。
ドラッグ

入れ子になったら完成です。 不要な文字 「新規 div タグの内容がここに入ります」 を削除し上書き保存をして、 次に進みましょう。
※完成見本データは、「mihon」-「index-01.html」です。

9-6 Bootstrap を用いたレイアウト- 226 -

Lesson9◆サムネイル画像の挿入
すでに用意されている <div class="row"> に設定を行い、サムネイルを作成しましょう。

コードビュー 81 行目にあるカラムの設定を確認しましょう。
<div class="row"> の中に在配置されているカラムには「colsm-4」の設定がされています。 このまま画像を挿入します。

① 挿入パネルから「Bootstrap のコンポーネント」を選択しましょう。 Bootstrap が持つ様々なコンポーネントが、 このパネルからライブビューとコードビューに挿入可能になっています。
② 挿入パネルから「Responsive Image」の▼から❶「Default」を選択しライブビューの <div class="text-justify
col-sm-4"> の部分にドラッグ＆ドロップします。

❷ドラッグ＆ドロップ- 227 -9-6 Bootstrap を用いたレイアウト

Lesson9

img タグが挿入されます。

③ プロパティインスペクタから、 下記の通り設定します。

❹フォルダー ：「images2」		

画像 ：「menu.jpg」

代替テキスト ：「MENU」④ ライブビューで挿入した画像を選択し、 +「クラス /IDを追加」をクリックしましょう。 下記の括弧内を直接入力で入力します。
「.img-circle」
ここまでできたら上書き保存を行い、 Chrome ブラウザーでプレビューを行いましょう。
※ 「ファイル」 - 「リアルタイムプレビュー」 から選択

先ほど挿入した img タグの後にキャプションを挿入します。
⑤ DOM パネルで <img>.img-responsive .img-circle を選択し、 右クリックのメニューから後ろに <div> タグを挿入します。

⑥ クラス「.caption」を設定し、 「新規 div タグの内容がここに入ります」 の文字を 「MENU」 と打ち変えます。

⑦ プロパティインスペクタのフォーマットから「見出し 3」を設定してメニューの完成です。

同様にして①～⑦を繰り返し、 ABOUT US ・ ONLINESHOP のエリアを作成しましょう。

フォルダー

ABOUT US
images2

ONLINE SHOP
images2

画像
代替テキスト

about.jpg
ABOUT US

onlineshop.jpg
ONLINE SHOP

※完成見本データは、「mihon」-「index-02.html」です。
確認ができたら上書き保存を行いファイルを閉じましょう。

9-6 Bootstrap を用いたレイアウト- 228 -