最後にページ下部のコンタクトフォームやフッターを作って完成です。 順に作っていきましょう。
1.コンタクトエリアの大枠を作成
コンタクトエリアは解説③で作ったAbout me部分に近い設計です。
先にhtmlファイルに大まかなグリッドを書き出し、cssで固定背景を設定してしまいます。
ブラウザで背景画像と、背景色ホワイトのボックスが出来ていることを確認します。
2.フォームを作成する
枠が出来たら左側に表示されるフォームを作ってきましょう。
最初に見出しとなる「Send Message Us」を書きます。 次に、Bootstrapからフォームタグをコピーし貼り付けます。
今回のデザインではlabel を使用していませんので不要なところは削除してください。
フォームの間隔をあけるためform-groupのあとに「pb-3」クラスを追加します。
最後に「Send Message」のボタンを追加します。 完成デザインのボタンはBootstrapのものよりも角が丸いので「button-rouded」という独自クラスを加えています。
ブラウザで確認してみましょう。
これでフォームは完成です。
3.Get in Touch側を作成
続いて右側の連絡先などを書いてある部分を作ります。
こちらもタイトルはフォーム側と同じ、その下のテキストはleadクラスを付けたpタグで囲うだけですね。
その下にあるアドレス部分はリストタグで追加。
cssでリストマークを非表示にします。
一番下のSNSアイコン部分は横並びにしたいので、ulタグにd-flexクラスを追加します。
cssで.ico-circleの大きさを変更。
アイコンが真ん中に収まるよう、padding-topで調整します。
ブラウザで表示を確認してください。
4.フッターを作成
最後にフッターを作ります。
ここまでの工程からすれば非常にシンプル、簡単にできます。
cssで背景色とpadding、文字色が白になるように設定します。
↓
5.最終確認
全体を確認して、レイアウト崩れがないか、仕上がり図通りかを確認しましょう。
例えば、ここまで作ってきたものよりも、見本の方が見出しの文字色が濃いですね。 cssで、hタグの文字色を追加してみます。
このような形で作成したcssや、Bootstrapのクラス(marginやpaddingなど)を見直してみてください。 問題無ければパソコン画面表示のレイアウトは完成です。