title-2
Design

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

こんにちは!やっぱりまだまだ新人森田です。
新オフィスに来る途中にいつものルートを外れてコンビニに寄ったら朝から道に迷いました。裏原宿あたりの迷路みたいな小道どうにかするか、私の方向音痴どうにかしてください。切実に。

普段はよく道に迷うけどコーディングの筋道はしっかり立てていきましょう。
ではBootstrapを使ってサイトを作ろうの続きです。

あ、それと、時々画像に載せているcssはオリジナルで書き出したものです。Bootstrapのcssだけでは実現できない部分もあるのでそれで補完してあります。

webサイトを作る 続き

前回は大枠を作って、全体が見えてきました。
この調子で次は細かい部分を作り込んでいきましょう。

細部を作る 1

まずコンテンツを仕上げます。

テンプレートに従って140px四方の正方形の画像を用意しておいたので、いよいよ出番です。
CSS3を知るべしでも紹介した角丸処理ですが、Bootstrapなら“img-circle”をclass指定すれば正円の出来上がり。

詳細説明に飛ばすためのボタンも、buttonタグにBootstrapの基本ボタンスタイル“btn”・ボタンの色を表す“btn-default”をclass指定するだけです。

20140207-1b

簡単に作れちゃいました。サクサク次にいきましょい。

細部を作る 2

ナビゲーションバーに手をつけます。

そういえばほったらかしだったナビゲーションバー。通称は”navbar”っていうらしく、カタカナ表記だとナヴバー?むしろカタカナにしなくていいか。

恒例のdiv囲い開始です。
containerの下に基本スタイルが設定された“navbar”・バー全体の色設定の“navbar-inverse”でclass指定したdivを作ります。その下にサイトの総合タイトルを“navbar-header”として作成。“float: left;”の含まれるclassが一番先に記述されるので、これでタイトルがバーの左側に固定されます。さらにタイトル名に“navbar-brand”をclass指定すると、タイトルっぽく文字が大きめに表示されます。

メニューの中身はリストを使います。ulに“liststyle: none;”が入った“nav”、位置調整用の“navbar-nav”をclass指定したらなんかもう出来ました。それっぽく見せるためにHomeに“active”で色づけしてあります。

20140207-2

細部を作る 3

いったん全体を見渡します。

パーツが揃ってきたところで、ページ全体のバランスを見てみましょう。文字列とにらめっこし続けるのも疲れるのでちょっとした気分転換にもなります。

20140207-3b

ナビゲーションバー、メインビジュアル、コンテンツ、フッターと当初の計画通りに進行中です。
こうして見てみるとグレーが微妙な感じがしてきました。そもそも画像で画面をずばっとぶち抜いた方がスッキリして見えるんじゃなかろうか。というわけでjumbotronをちょっと修正します。

前回jumbotron > container > sample-calouselっていう形にしましたが、jumbotron > jumbotron-innerでよさそうです。cssももう思い切ってsample-calouselのclass名をjumbotronにしてサッパリさせちゃいます。

20140207-4b

…最初からこれで良かったような。まあこんな風にして1つずつ気付きながら調整して作っていく様子をリアルにお伝えしていくということで。じゃあこれってドキュメンタリーだったのか。

細部を作る 4

レスポンシブの動作確認もしておく。

「全体を見渡す」のもう1つの意味として、レスポンシブにした時にデザインが崩れていないかも重要な確認項目です。森田はまだ思い通りに動いてくれないことの方が多くてここでいつも苦しめられています。さあこのサンプルページの幅を狭めていくとどうなるんでしょうか。ちなみにBootstrapでは横幅768px未満がスマートフォンサイズとされています。

20140207-6

うん、さっそくnavbarのactiveにした所(“Home”)がおかしいですね。幅が広い時はそんなに気にならなかったけど、navbarとjumbotronの隙間もちょっと違和感があります。jumbotron以下は特に難しいこともしてない分、今のところいい感じです。

次回予告

今回の作業でサイトに必要なパーツが一通り揃いました(地味にフッターの部分もいじりました)。

あとは動作確認で見えてきた課題:navbarあたりかなと思います。
が、ここでテンプレートをもう一度振り返ってみましょう。

20140207-5

calousel(サンプルではjumbotron)の上にnavbarが重なってますね。ここは再現しておきたいところです。

大枠はサクサクと進んできましたが、やっぱり完成まではもう少しかかりそうな予感。コーディングが仕上がっていくにつれてコードが複雑化するせいか、調整で上手くいかなくて詰まってしまう場面が個人的に多い気がします。連載もまだまだ続きそうです?!というわけで次回もお楽しみに!押忍!

標準