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


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

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

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

制作編1ではグローバルナビゲーション(Static top navbar)を設置するところまでの記録。

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

Bootstrap

*Bootstrap3.3.4 Bootstrapのファイルはダウンロード済み ダウンロード方法は導入編にて。

シングルページ作成

Basic templateを使用する

まずは「Basic template」もしくは下記HTMLコードをコピーしてエディタへ貼り付け。
(この手順を飛ばしてstatic navbarのソースを利用することも出来る。)

Basic template

ここで以下の部分を変更しておく。

  • html lang=”en” → html lang=”ja”
  • titleを変更
  • body内に記述されているH1を削除

グローバルナビゲーション作成(Static top navbar

続いてサイトのグローバルナビゲーション部分を作成。
Static top navbarのHTMLコード、または下記コードをコピーしてエディタへペーストする。

ここでの変更点

  • 左ナビゲーションリンク部分を削除
  • navbar-brandへ画像配置

今回はサイトのナビゲーションまで作成。
今回作成したコード全体

レイアウトデザイン用のCSSを作成する

Navbarの余白を消すためにmarginを設定する。

訂正:ナビゲーションのロゴイメージとロゴ(The SImple Groupware)が縦並びになるとの報告がありました。
その場合はbootstrap.min.cssの.navbar-brand>img の display: block を外して下さい。

今回作成したページ(http://mizukazu.16mb.com/single/s-index.html)
Bootstrap-singlepage1

次回へ続く。


この投稿へのコメント

コメントはありません。

コメントを残す

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

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

  1. […] rap-シングルページ制作編2 Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 [紹介元] Bootstrap-シングルページ制作編1 | みずかず […]

トラックバック URL