Bootstrapにあらかじめ用意されているクラスで代替できるものはなるべく使うことを重視し、元サイトにズレなく合わせることはしませんでした。(ピクセルパーフェクトにはほど遠い)
下準備
- デスクトップにdaytraなどといったフォルダを作ります
- その中にDAY5でダウンロードした素材一式を入れます
- フォルダをVS Codeにドロップします
- VS Codeでindex.htmlを新規作成(今回はBootstrapのテンプレがあるのでVS Codeで型を作らなくてよし)
- Bootstrap公式サイト(https://getbootstrap.com/)を開きます
- Downroadボタンの下にあるAll releasesをクリック
- v4.xの欄から4.5を選びます
- Starter templateの下にあるコードをVS Codeにコピペ
- enをjaに
- style.css、faviconを読み込ませる 他、タイトルの書き換えやメタ情報の入力等
- DAY5と同じ要領で各ブロックを作っていきます(VS CodeのEmmetの練習になりますね)
ヘッダーの作成
- Bootstrapの公式サイトでNavbarを検索
- Navの欄からコードをコピー、headerのcontainerの中に貼り付け
- navからbg-lightを取り除く
- navbar-brandをfont-weight-boldに
- DAY12の応用でnavbar-navをml-autoで右揃えに
- メニューからDisabledを取り除きます
- 空いた3つの欄にメニューを入れ込みます
メインビジュアルの作成
- sctionのclassにmb-5を入れて余白をつけます
- Bootstrapのサイトでjumbotronを検索
- Jumbotronの欄からコードをコピー、topセクション内に貼り付け
- 下線以下の不要な部分を削ります
- style.cssを使って背景画像を設定します
- タグラインとサブタイトルを入れ込みます
- h1タグ(タイトル)にdisplay-4 font-weight-bold text-centerを追加
- pタグ(サブタイトル)にlead text-centerを追加
「デイトラとは」の作成
- sectionのclassにmb-5 py-5を入れて余白をつけます
- 「デイトラとは」をh2でマークアップ クラスにtext-center display-5 font-weight-bold mb-5を追加
- DAY12の応用でGridシステムを使います
- containerの中にrowを作りその中にcol-mb-6を2つ作ります
- 左のカラムに画像を貼ります py-3で余白をとります
- 画像のクラスにw-100を追加
- 右のカラムに説明文を貼ります py-3で余白をとります
「コース一覧」の作成
- sectionのclassにmb-5 py-5を入れて余白をつけます
- 「コース一覧」をh2でマークアップ クラスにtext-center display-5 font-weight-bold mb-5を追加
- Bootstrap公式サイトでcardを検索
- Card decksの欄からコードをコピー、aboutのcontainerの中に貼り付け
- card-titleとLast updatedの欄は使わないので取り除く
- 3つのカードそれぞれに画像を貼ります altタグも適宜
- card-textにテキストを貼ります
「お問い合わせ」セクションの作成
- sectionのclassにmb-5 py-5を入れて余白をつけます
- 「お問い合わせ」をh2でマークアップ クラスにtext-center display-5 font-weight-bold mb-5を追加
- フォームの上のテキストをpでマークアップ text-centerで中央寄せ
- Bootstrap公式サイトでformを検索
- Orverviewの欄からコードをコピー、contactのcontainerの中に貼り付け
- 不要なパーツを取り除きます
- form-groupの横にform-control-lgと入れてフォームを大きく
- input要素のplaceholderに「メールアドレス」と入力
- ボタンをセンター寄せにするためにdivタグで囲みtxt-center
- ボタンを大きくするためにbtn-lgを追加(※正確には異なりますがbtn-dangerをプラスすると手軽に近い色になります)
フッターの作成
- 正確な色ではありませんがfooterをbg-darkにすると簡単に近い見た目にできます
- fotterのクラスにpy-5を追加して高さを出します
- コピーライトをpでマークアップし、small text-white text-right m-0とつけます
以上がメインビジュアル以外でstyle.cssを使わずにできる設定です。
細かい調節をしようと思えばstyle.cssが必要になってきますが、
あんまり使うとBootstrapを使う意味がなくなるので今回はこの辺にしておきます。
コメント