title-2
Design

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

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

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

webサイトを作る

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

素材を揃える

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

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

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

140206-1

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

 大枠を作る 1

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

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

140206-6

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

140206-2

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

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

大枠を作る 2

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

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

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

140206-3c

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

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

大枠を作る 3

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

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

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

140206-4 

おお…?

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

140206-6a

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

次回予告

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

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

標準