title-2
Design

Bootstrapを使ってWebサイトを作ろう その4

こんにちは!寒がり新人森田です。
週末の東京は大雪でしたね。珍しく早起きしてちょっとだけ写真撮ってきました。結構降ってたから一眼持ち出す元気が出なかったけど、携帯カメラと編集アプリが便利すぎてこれで十分に思えちゃいます。

140210b

久しぶりの雪で電車が止まったり不便もあった反面、見慣れない白い街並みにテンション上がったりもしました。元気チャージしたところでBootstrapでサイトを作ろうラストスパートいってみましょう!

webサイトを作る 続き

前回は動作確認をしてみたらnavbarの表示がおかしいことに気づいたところまででした。テンプレートのようにjumbotronの上に乗せて表示させたいというのもあるので、その辺をまとめて調整していきます。

細部を作る 5

何点か修正したい部分がある場合も、一度変更点を整理してサイトを作る時と同じように大枠>細部の流れで作業していくと楽な気がします。

まずがっつりと jumbotronの上にnavbarを乗せてしまいます。
今navbarを囲んでいるのは“container”ですが、これは他の箇所でも使っている共用classの為なるべく手を加えたくないです。なので、“container”を新たに”navbar-wrapper”で囲います。

“navbar-wrapper”に“position: absolute;”指定します。こうすることで位置が固定され、floatみたいに要素が浮いたような状態になります。その下にjumbotronが回り込む形になって、navbarが画像の上に重なって表示されます。タイトルにも被ってますがそれは今は気にしない。

140208-1

ちなみに“position: absolute;”の位置固定の仕組みは、“position: static;”ではない親要素を基準とした絶対的な位置に固定されるようになっています。今回の場合は特に指定していないので、body=画面左上に固定されています。上に隙間があるのは”margin-top”を指定してあるからです。スマホ表示では上にぴったりくっつけたいので“margin-top: 0;”も書き込んでおきます。

細部を作る 6

次はnavbarの細かい箇所を修正します。

“active”だけ飛び出ていた表示を中に収まるようにします(この辺りは好みかもしれません)。“navbar”の中をもう一度”container”で囲い込みます。今まで“navbar”の上の“container”が最大幅だったのが、これで“navbar”内に収納されました。

ただ、“container”で2回囲うと元々“container”がもつpaddingが二重で効いてしまいます。上と左右に隙間なく置きたい時は“.navbar-wrapper > .container”という指定方法でpaddingを無しにしておきます。

140208-2

この作業、何をやってるか若干分かりづらいというか森田自身がちょっとこんがらがってます。
もう少し分かりやすく説明すると、

140208-3b

navbarの構造はこんな風になってます。
外側の“container”のpaddingは画面の端からの幅にあたるので無くしたいです。
内側の“container”は“navbar”の内側の要素に必要な隙間を与えてくれています。

じゃあそもそも外側の“container”必要ないんじゃないかと思うかもしれませんが、Media Queriesで画面幅に応じた見え方が整えられている為、決していらない子ではないんです。これがあるおかげで他の“container”に囲まれた要素と揃って見えます。

140210-4

あとは“navbar”のmargin-bottomやjumbotronの値を調整します。

前回までと違って今回はスマホベースで作業してきました。これにはちょっとした意味があります。Media queriesを使う時は普通に書いたcssがスマホビューと対応しているんです。“@media (min-width:  768px) {”と書き込むと、768px以上の幅で見た時の表示が変わります。

ここで書くと簡単な設定という感じがしますが、コーディングしてると訳が分からなくなってきたりします。だから今の森田はPCベースで作ってきたものを最後はスマホベースで仕上げて、レスポンシブで表示を変える部分のcssを“@media {”にコピペして混乱回避してます。

細部を作る 7

PCサイズで動作確認。

一通り作り終えたら、PCサイズでもちゃんと表示できてるか確認してみます。といっても実際は作りながら幅を伸ばしたり縮めたりしてるから多分出来てる。はず。

140210-5

特に問題なさそうですね。いい感じです。

細部を作る 8

おまけでコンテンツの詳細を作る。

そういえばコンテンツの見出しは作ったけど詳細部分を作っていませんでした。ここまできたら作っちゃいましょう。グリッドシステムを使った簡単なレイアウトなので1だけにしておいて2、3は以下略とします。

テンプレートと同じ500×500pxの画像を用意してグリッドを7と5で分けます。画像が大きめで、画面幅を狭めると文章の改行がすごいことになりかねないので、グリッド解除のタイミングを見出し部分より早く設定しておきます(“col-md-7”)。

画像に関しては“img-responsive”というclassを使うと、画面幅に応じたサイズに自動的に縮小してくれます。

140210-6

完成

indexページが完成しました!完全に飲食店ですね。

PCサイズ

メリハリがついていて見やすいです。

140210-7

 スマホサイズ

長いです。びよーん。

140210-8b

これに各コンテンツの肉付けをしていけばちゃんとwebサイトになってくれそうです。

まとめ

Bootstrapを使ってwebサイトの1ページが出来上がりました。最近流行りの1ページサイトとするならwebサイトって言えるんじゃないでしょうか(強引)。

作ってみての感想は、やっぱり土台があると作業が楽!です。
最初はどんなclassがあってどういう設定かが分からず、自分でやっていった方が早いんじゃないかって思ってましたが間違いでした。Bootstrapの公式で調べながら作っていくうちに便利なclassの存在を知ると、要素を置いてclass指定するだけで希望する表示が出来ちゃう。すごい。

オリジナルの設定をしたい時も、自分で書いたcssでclass設定を上書き出来る点も素敵です。

ここまで連載にお付き合いいただきありがとうございました!
けどBootstrapの便利機能はまだまだありそうだし、Javascript総スルーだったし、まだまだやりたいことだらけなので連載はもうちょっと続きそうです。
短期集中連載はひとまずここで区切りということで今回はこのへんで!押忍!

標準