Bootstrap-シングルページ制作編6


Bootstrap-シングルページ制作編6

Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。

Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。
変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。

制作編6ではフッター部を作成。
フッター部左側には会社のロゴや住所などを、右側部分には問い合わせフォームを設置。
スマホでは一列表示となる。
また、最下部にはコピーライト表示をつける。

シングルページ制作編
Bootstrap-シングルページ制作編1
Bootstrap-シングルページ制作編2
Bootstrap-シングルページ制作編3
Bootstrap-シングルページ制作編4
Bootstrap-シングルページ制作編5
Bootstrap-シングルページ制作編6
Bootstrap-シングルページ制作編7

Bootstrap

シングルページ作成

HTMLを記述する

前回記述したHTMLの[div main4-app]以下に新たに追記。今回は「footer」とした。
「footer」は2行2段組グリッドを使用。
*今回の記事は[!– footer –]の部分。

CSSを記述する

*今回の記事は[footer Bootstrap-シングルページ制作6]の部分。

ここまで終えたサンプルページ
http://mizukazu.16mb.com/single/s-index5.html
singlepage6

デザイン・配置など雑ではあるが、1ページの全体が出来上がった。
「ダウンロードする」ボタンはページ下部にもうひとつあると良かったかな。
次回は、ページ最上部へ戻るボタンをつけてみたい。
それと、画像の最適化も必要。

ここまでの全体のソース

CSS

次回へ…


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL