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

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

webサイトを作る　続き

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

細部を作る　５

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

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

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

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

細部を作る　６

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

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

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

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

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

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

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

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

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

細部を作る　７

PCサイズで動作確認。

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

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

細部を作る　８

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

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

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

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

完成

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

PCサイズ

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

 スマホサイズ

長いです。びよーん。

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

まとめ

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

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

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

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

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

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

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

webサイトを作る　続き

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

細部を作る　１

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

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

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

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

細部を作る　２

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

そういえばほったらかしだったナビゲーションバー。通称は”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”で色づけしてあります。

細部を作る　３

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

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

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

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

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

細部を作る　４

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

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

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

次回予告

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

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

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

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

こんにちは！新人じゃなくなりかけたような森田です。
周辺の昼めしスポットの捜索を始めたところ、さっそく良い感じの中華料理屋さんを発見しました。サラダバーがおかわりし放題ということで、ひたすら葉っぱ食べて食後のバナナもいただいたら、師匠たちによく食べるねえと褒められ（？）ました。

さらなる新天地を求めつつ、今回はBootstrapを使ってサイト作る続きです。

webサイトを作る

前回は制作環境を整えました。
今回から実際にwebサイトを作っていきます。テンプレートを参考に制作ということでしたが、グレーのダミーイメージでは個人的に寂しいので森田テイストでいきたいと思います。

素材を揃える

組み立てるのはパーツが揃ってから。

制作環境の他にもうひとつ重要な下準備がありました。ページに必要な素材パーツを揃えておくことです。調理器具があっても素材がないと料理出来なくて悲しいのと同じです。

_sampleフォルダの中に“images”フォルダを作って、使いたい画像を用意しておきます。師匠から教えていただいたPAKUTASOさんから活きのいいのを仕入れてまいりました。ファイル名は良い感じの名前が思い浮かばなかったのでサイズにしときました。

今度こそコーディング開始です。

 大枠を作る　１

webデザインとはデッサンのように全体を見ながら作っていくもの。by山形師匠

そんなありがたいお言葉に従って、body内に要素を書き込んでいきます。テンプレートにはどんな要素があるのかをまず確認しておきます。

このページはナビゲーションバー・メインビジュアル・コンテンツ・フッターに分類できます。ということでまずページを４つの領域に分割してみましょう。

各パーツをcontainerで囲いました。これはBootstrapが持つグリッドシステムの大枠でもあります。ちなみに色は分かりやすいように付けただけで、実際の表示は文字が４列あるだけです。

あんまり進んだ感はしませんが、最初にこの区分をしっかりしておくことで自分がどの部分に手を加えているのかが分かりやすくなると思います。結構大きな一歩です。

大枠を作る　２

さっきが地味だったので、分かりやすいメインビジュアルとコンテンツの部分を整えていきます。

まずメインビジュアルのところについて早速おことわりすべきことが。
テンプレートでは”Carousel”（カルーセル）というJavascriptを使っています。が、森田にはJavascriptの知識がほとんどないため今回は画像一枚で代用させていただきます。

では気を取り直して。
メインにぶち抜きのスペースを取るにはjumbotronを使います。さらにこのjumbotronをcontainerの上に置くことで、左右めいっぱいに表示出来ます。

そしてコンテンツ部分にはグリッドシステムを使います。
グリッドシステムは、rowで１つの行を表し、行の中が１２個のcolumnの列で区切られています。ここでは３つのコンテンツを横に等幅で並べたいので、４列ずつ３つのカラムに分けます。

rowのdivの中にcol-**-4というclassを書くとそれが実現できます。お手軽。
ハイフンの真ん中の部分はMedia queriesを受けていて、xs・sm・md・lgと４種類あります。デバイスごとに定義された横幅に応じてグリッド解除するタイミングが分けてあるんです。いちいちレスポンシブ用の設定を書き込まずに使えちゃうあたり涙が出そうです。

大枠を作る　３

メインビジュアルをいじって、いい感じにしてみる。

webページ、ひいてはwebサイトの顔になる部分がメインビジュアルです。ここが決まるだけで何となくそのサイトの雰囲気が伝わってくるくらい影響が大きい部分です。サクッとバシッと決めちゃいましょう。

calousel予定地にsample-calouselというオリジナルのclassを作って気分だけでもcalouselに近づけてみました。メインとなる画像をbackground-imageとして、文字色やpaddingをいじっていい感じに調整。

おお…？

ついでにコンテンツ部分にtext-centerという真ん中揃えのclassを入れて、テキストにもh2（第２見出し）とp（段落）でそれぞれの要素を意味合い通りに表示されるようにします。
フッター部分もhr（段落の区切り）で線を引いてコンテンツと分けておきます。

おお、なんかすごくそれっぽい！

次回予告

もはやデザイナーというよりは料理人か飲食店経営の修行サイトみたいな空気が漂いまくっておりますが、もうこの流れで推して参りたいと思います。

大枠から作っていってだいぶ形になってきました。
次回は細部を調整していく予定です。
あれ、連載といいつつ結構すぐ終わっちゃう？！次回もお楽しみに！押忍！

こんにちは！新人脱出かもしれない森田です。
数日前はすごくあったかかったのに、昨日今日とものすごい冷え込みです。はふはふ言いながら鍋焼きうどんとか食べたくなります。

前回Bootstrapの紹介をしましたが、その派生としてBootstrapを使って実際に１からwebサイトを作ってみるという連載企画的なものに挑戦しちゃいます。連載ってなんか良い響きですね。
では始まりますよー

制作環境を整える

webサイトを作るといってもいきなりコーディングをするわけではありません。元弓道部的な説明だと、弓を引く為には道場を掃除したり的や弓具の準備が必要です。何事も土台が大切なのです。

フォルダ作成

web制作の土台って何かというと、フォルダとファイルの整備です。

BootstrapをサイトからDLしてきたら、zipファイルを解凍します。解凍したてのフォルダ名は”dist”となっていますが、制作用に“_sample”に名称変更しました（名前はなんでもいいです）。フォルダの中にはcss、fonts、jsという３つのファイルが入っています。これらをそのまま使用します。

この_sampleフォルダが今後webサイトを作っていく為の基本フォルダです。長い付き合いになると思うのできれいに使いましょう。

index.htmlを作成

記念すべき１ページ目を作ります。

webサイトのメインページのファイル名は“index.html”がお決まりパターン。_sampleフォルダの下に右クリックやテキストエディターでファイルを新規作成して“index.html”と名付けましょう。

index.htmlを作ったついでにベースだけ記述してみました。bootstrap.cssのリンクも貼って、Bootstrap使う気満々アピールです。

動作確認

これは本当にちゃんと動くのか？

さっくりhtml書いてはみたけれど、作ったindex.htmlがちゃんとbootstrap.cssを反映して動いてるかは動作確認しないことには分かりません。index.htmlファイルをブラウザで開いてみましょう。森田はよく記述ミスしまくるため、こまめなブラウザチェックを心がけてます。

…といっても、何か書かないとこのままでは真っ白なのでbodyの中に“test”と書き入れてみます。
ページ上に文字が表示されていたらオッケー。さらに、<h1>を使ってcssを読み込んでいるかをチェック。

なんということでしょう
小さかったtestが大きくなったではありませんか

cssファイルも確認してみると、しっかり設定通りになっていることが分かると思います。これで表示確認が出来ました。さらにプログラム側でもエラーが出ていないか見てみます。

Macの“command+option+i”というショートカットキーでインスペクタを出せます。実行中のプログラムの中身を確認出来るとてもありがたいツールです。いつもいつもお世話になってます。

もしエラーが出ると赤文字でその詳細が表示されます。試しにmoritaと打ってエラー表示させてみたんですが、moritaなんてないよって言われてますね。そりゃそうだ。

プログラムエラーもないことが確認出来たら、これで制作環境がばっちり整いました！
もういつでもwebサイト作れちゃいます。さあ何作りましょうか！（鼻息荒め）

次回予告

制作環境が整ったので、次回からはBootstrapのサイトのTemplateを参考にwebサイトを作っていきたいと思います。

おお、いかにもwebサイトな感じのデザインですね。これにきれいな画像はめこんだら本物っぽくなりそうです。せっかくだから森田好みのおいしそうなサイト作りたいなあという野望を抱きつつ、それがどんな風に実現されるのか？！乞うご期待です。押忍！