2019年 ウェブサイト作成講習会

top > Bootstrapその2

Bootstrapその２

第5回目（9月7日）で作成したBootstrapページに写真等を挿入して独自のページに加工します。ここではJumbotron、Breadcrumb、Grid systemを利用します。

画像の準備

下記の画像を「img」フォルダーに名前を付けて保存します。

  1. ページトップに配置する画像1280X300　1枚
  2. スライドショーに使用する画像　縦横比同一の幅1280画像　3枚以上（高さは600～960を推奨）
  3. 並べて配置する画像　幅300程度の画像　4枚

リセット

前回作成したBootstrapページを一旦リセットし各要素を入れ直します。

  1. ローカルサイトをBracketsで開きます。
  2. Bootstrapページを開きます。
  3. body要素の内容を削除します。
  4. body要素に<div class="container"> </div >を挿入します。

Jumbotron

  1. ブラウザでBootstrapを開きます
  2. 「Documentaion」をクリックします。
    BootstrapのTop
  3. ページ左側のカラムで「Components」を選択します。
  4. 続いて「Jumbotron」を選択します。
  5. 右側のカラムで「fluid jumbotron」の下の「Copy」ボタンをクリックします。
    BootstrapのTop
  6. Bracketsに戻り<div class="container">の直下に貼り付けます。
  7. Jumbotronの画像は下記cssにより背景画像として設定します。
    .jumbotron background-image url(../img/画層のファイル名)
    background-repeat no-repeat
    background-position center
    background-size cover
    height auto
  8. h1要素の「Fluid jumbotron」を「Bootstrap練習」に書き換えます。
  9. h1にクラスを追記することによって文字色と位置を変更できます。
    例えば白色にする場合は「text-white」を、中央揃えにする場合は「text-center」を追記します。
    色の詳細は「Utileties」の「Colors」を、配置については「Text alignment」を参照してください。
  10. 同様にしてp要素の内容を書き換えます。必要がなければ削除します。

パンくずリスト

  1. Bootstrapの「Documentaion」ページ左側のカラムで「Components」を選択します。
  2. 続いて「Breadcrumb」を選択します。
  3. 右側のカラムで「Example」から2項目のリスト部分をコピーします。
  4. Bracketsに戻りJumbotronの終了タグの直下に貼り付けます。
  5. liタグ1行目の「Home」を「Top」に書き換え、リンク先をindex.htmlに設定します。
  6. liタグ2行目の「Library」を「Bootstrap練習」に書き換えます。

Carousel

  1. Bootstrapの「Documentaion」ページ左側のカラムで「Components」を選択します。
  2. 続いて「Carousel」を選択します。
  3. 右側のカラムでSlides only（スライドのみ）、With controls（コントロール付き）、With indicators（インジケータ付き）、With captions（キャプション付き）、Crossfadeのいずれかを選び直下の「Copy」ボタンをクリックします。Crossfadeはスライドではなくフェードでアニメーション化します。
    Slides onlyの場合
    BootstrapのTop
  4. Bracketsに戻り</nav>の直下に貼り付けます。
  5. imgタグのsrc="..."の「...」部分にスライドショー用に用意した画像のファイル名を挿入し、alt="..."に代替テキストを記載します。
  6. 3枚以上の画像を加える場合はdiv要素をコピペして追加します。
  7. 画像の切り替え時間はデフォルトでは5000（5秒）に設定されています。
    変更するにはカルーセル親のdivタグに「 data-interval="秒数の千倍の数値"」を追記します。

画像を並べて配置

  1. Bootstrapの「Documentaion」ページ左側のカラムで「Layout」を選択します。
  2. 続いて「Grid」を選択します。
  3. 3カラムのHTMLをコピーします。
  4. Bracketsに戻りカルーセルの終了タグの直下に貼り付けます。
  5. クラスcol-smのdiv要素をコピペして、1組追加します。
  6. クラスcol-smのdiv要素の中身を画像とその説明文に書き換えます。
    例
    <img src="画像のファイル名" width="100%" alt="">
    <p class="text-center">画像の説明文</p>　（注：class="text-center"は文字列の中央揃え）
  7. クラスcolのdivにクラス「my-3」を追記して上下のマージンを設定します。
    マージン及びパディングの設定については、「Utileties」の「Spacing」を参照してください。
  8. 他の3つのクラスcolのdivも同様に設定します。

Footer要素の追記

他のページと同様にしてFooter要素を設定します。