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


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

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

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

前回ではアプリケーションの簡単な説明の部分を設置。
制作編4ではアプリケーションの特徴となる機能の説明部分となるところを作成する。

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

Bootstrap

シングルページ作成

HTMLを記述する

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

CSSを記述する

*今回の記事は[main3-app Bootstrap-シングルページ制作3]の部分。
バックグラウンドカラーは画像を元に抽出。使ったサービスサイトはコチラ(Colors Palette Generator)

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

ここまでの全体のソース

HTML

CSS

次回へ


この投稿へのコメント

コメントはありません。

コメントを残す

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

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

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

トラックバック URL