title-coding
Design

コーディング修行 クラス名編

こんにちは!新人森田です。
何気にマラソン大会を間近に控えた先週末、はじめて皇居ランしました。
走る前は諦める気満々でしたが、だんだん楽しくなってきて約5km完走できました!
恥ずかしながら人生初の快挙です。

筋肉痛がおさまったらまた走ろうと乗り気でいたら、日曜日に微熱とだるさに襲われるという重傷っぷり。
風邪引いたのかと思いました。
日頃の運動不足がたたりまくっています。。

なんとか良くなった今回は、サイトコピーの番外編な感じでクラス名の扱いについてまとめてみます。

クラス名の扱い

BEMの命名規則

最近取り組んでいるのは、BEMの命名規則を取り入れたやり方です。
師匠はCSSの命名規則をちゃんとやるためにBEMはいい選択だと思うそうです。

BEMとは。
アメリカのある企業でエンジニアと非エンジニア社員がhtml内の要素を正確に把握する為に作られたもので、お互いの意思疎通・情報共有を促進するためにお互いが歩み寄りながら出来たのだとか。
また、後から参入したメンバーにもすぐ理解しやすく、自分で読み返しても分かりやすいという利点もあります。
バリバリのエンジニアさんからすると美しくないようですが、上記のような利点はとても現実的と言えそうです。

BEMという命名規則とSass 3.3の新しい記法
こちらに分かりやすく且つ実践的にまとめてあります。

BEM
こちらが本家。英文ですが概要がつかめると思います。

実践してみる

ルールが分かったところで、前回作ったインデックスページを例にして見てみましょう。
内容を省略して大枠の部分のクラスを取り出すとこんな感じです。

0330-2

hamlという書き方で作ったので<div>などが省略されてます。
インデントで入れ子状態を表していて、閉じタグ不要なのが楽々です。

一番上の.tosakenで囲っているのは、他ページとの名前のバッティングを回避するためです。
以下の部分は実際の表示と照らし合わせて見ると分かりやすいかもしれません。

0330-1b

.sectionで行を分けて、.section__innerで内側の要素を囲っています。
ヘッダー部は.section__inner––header(innerがheaderの状態)と書いて差別化してあります。
コンテンツ部はアイコンを.section__label、内容を.section__contentでまとめて、この枠組みを繰り返しています。

BEMで正確に追おうとすると、例えばロゴは.section__inner––header__logoとなるかと思いますが、大事なのは正確さではなくて分かりやすさです。
ロゴといえばこのページではタイトルロゴしかあり得ないので独立した.logoになっています。
クラス名とスタイルが対応していれば内容はどうであれデザインには反映されるわけで、正確すぎるのも自己満足の極みというか、それを言っちゃうと元も子もないんですが。
要するに誰が見ても分かりやすく書こう!という意識が大事ということです。

悪い例

正解例を挙げたあとで私が最初に書いていたコードを再現してみます。

0330-3

全体の構成的には全く同じで、これにスタイルを当てれば実際の表示も変わりません。
BEMの命名規則にも従った書き方です。

ではなにが良くないのかというと、クラス名が内容に引っ張られすぎている点です。

.header(headerタグでも可)でコンテンツと差別化。
.companyというクラスは、その中身が会社情報であったことから付けました。

それぞれの要素の役割をもっと俯瞰して見てみると、区分けするパーツなのに.companyはちょっとおかしい。
icon、addressといった部分も直接的すぎます。
枠組みはあくまで枠組みとしてクラス名を付けることで、どんなサイトにも適応できるコーディングが出来上がるんですね。

0330-4b

ビフォーアフターはこんな感じです。
スッキリまとまりました!

まとめ

サイトコピーの作業の間に師匠からクラス名のご指摘をがっつり頂いたので、復習の意味も兼ねてまとめてみました。
BEMで追う範囲や汎用的な名付け方を見極めるにはまだ修行が足りないようです。
あと“__”と“––”の使い分けもまだまだ甘かったりします。
この辺はたくさん読んだり書いたり数をこなして慣れていくに限るんじゃないかと思います。
空いた時間でもっとガツガツ書かねばー。

というわけで今回はこの辺で終わります。押忍!

標準
title-coding
Design

サイトコピーしてコーディング修行 その2

こんにちは!新人森田です。
そろそろ桜も咲いてきましたね。お花見したいです。
今年はどのお花見スポットに行こうかなあ。

さて、それでは前回に引き続きサイトコピーしてコーディングの修行をしていきたいと思います。

Tosakenのインデックスページをコピーする

今回もギャラリーサイトから気になるサイトを見つけてきました。
株式会社トサケンのオフィシャルサイトです。
内容はシンプルですが、縦横100%に引かれたこのラインをどうやって表現するかが鍵になりそうです。

0328-1b

構成を考える

はじめ私は縦100%のborderをもった空divをposition: absoluteで置いてから中を作り込んでいこうと考えました。
でもpositionで場所指定すると、何層にも重なった要素のレイヤーの一番上にきてしまいます。
見た目だけ同じになっても、リンクが機能しなかったりとサイトとしては成立しませんでした。

最終的にこんな風に整理してみました。

0328-2b

まずborder-bottomをもった横100%のブロックで要素を横に分割。
その中に横幅が等しいブロックを入れ子にしてborder-left,rightをつけて線がつながっているように見せる。
内容は更にその中に記述していく。
という感じです。

ホバーエフェクトをコピーする

一枚目のスクリーンショットをよく見ると、“NEWS”の上に黒丸が表示されています。
これはホバー時に表示されて、普段は非表示になってます。

森田:
displayで表示切り替えだと要素の高さ分ずれたりするだろうし…
htmlの方に●って書いておいてfont-colorを白→黒にすればいっか!

師匠:
それだと本来必要ないものがhtml上に記述されることになるよね。
こういう時は疑似要素を使うといいよ。

疑似要素とは。
私がよく見るのは“:before”、“:after”あたりです。
float解除とかアイコンフォント用に使っていますが実はよく分からずに使ってました。
contentと併せてコード上に実体はないけど仮の要素を生成する仕組みのようです。
どうやらこれを極めると表現の幅がグッと広がるらしいです。面白そう!

0328-3

その第一歩として:beforeを使って作ってみました。
10pxの円をpositionで位置指定しています。
文字のクリッカブル領域内だと近い気がして、ちょっとはみ出してます。
これが気になる人は文字のpaddingを調整すればボックスに収まると思います。

ちなみに:hoverは疑似クラスといって、要素のスタイル指定を表示するための条件定義のようなもののようです。
これも今まで何気なく使ってきてました。そういうことだったのか。

文字列をタテ幅の中央に揃える

ヨコ幅の中央だったらtext-align: center;もしくはmargin: 0 auto;でそんなに苦労なく揃えられます。
でもそれがタテになるとヨコほど一筋縄じゃなかったりします。
タテの高さを揃える為に使うスタイルはvertical-alignなのですが、これが子要素に効かないからです。

vertical-alignを使って一発で中央揃えしたい場合は“display: table”の出番です。
ブロックをテーブル扱いにすると楽に解決できちゃうんです。

0328-4b

このように親要素をdisplay:table;にして、子要素をdisplay:table-cell;にすれば楽でした。
また、table-cellのブロックを分けることで3行の文字列に対してアイコンが中央に来てくれるという嬉しいおまけ付き。
なるほどこういうやり方もあるんですね。

アイコンはFontawesomeから同じ意味合いのもので代用してあります。

displayスタイルの違い?

これで完成!と思って全体のチェックをしていると、

0328-5b

あれ。borderが1pxずれてる…。

最初はborderの位置を%で指定したからウインドウ幅で誤差が生じているのかと思いました。
(実際ウインドウ幅によって合ったり合わなかったりしてました)
でもどのクラスも同じスタイルを継承してあるので、ずれるはずがありません。

違いがあるとすれば、上のdivはdisplay:block;、下のdivはdisplay:tableだということです。
結果的に全てをdisplay:tableにすることで解決しましたが、
もしかするとそれぞれの座標の出し方がちょっと違うのかもしれません。

ここを直して、フォントの調整もして改めて完成です。

一応レスポンシブになってます。
1230pxくらいのウインドウで比べるとちょっと似てる気がします。

まとめ

というわけで、インデックスページをコピーしてみました。
シンプルなサイトではありましたが、タイトルロゴ・メニュー・コンテンツと役割の異なる要素が盛り込まれていて、前回よりボリュームのある内容になったんじゃないかと思います。

大体ひととおり作れるようになったかなとサクッとやるつもりでいたら、初歩的なことをいくつも気付かされました。
クラス名の付け方も根本的に見直したりして、やっぱりまだ足りないことだらけです。
クラスの扱いに関して気付いたことなどはまた別でまとめたいと思います。

あとは、当たり前といえばそうなんですが、やっぱりやるのとやらないのとでは全然違います。
出来そうなところから少しずつでもコーディングしてくのがホントに大事だなと思いました。
手をうごかしてこー。おす!

標準
title-coding
Design

サイトコピーしてコーディング修行 その1

こんにちは!新人森田です。
入社してからあっという間に3ヶ月が経ちました。
まだまだ知ることが山積みすぎますが、ここからは更に気合い入れていきます!

そして久しぶりのブログ更新ですすみません。
ネタ探しに行き詰まって違うことしてました。
何をしていたかというと、サイトコピー的なことです。
サイト模写はデザインのスクリーンショットを撮ってPhotoshopでトレースし、間の使い方だったり平面的な勉強が出来ます。
サイトコピーはコーディングで同じようなサイトを作るので、模写の効果+コーディングの腕も上がるんじゃないかという目論見です。

仕事で少しずつコードを触るようになりちょっとしたアイコンなどを画像として切り出して処理していたら、師匠から画像を使わないやり方を教わって目からウロコだったり。
ギャラリーサイトでかっこいいなーと思ったサイトをレスポンシブにしたくなったり。
そんな経緯があって始めてみました。
参考元の作り方を批判したいわけじゃなく、どうやったらより良く作れるかの練習です。
作業する上でのルールもなんとなく決めてみました。

サイトコピーのマイルール

(コード読み解くのめんどくさいから)出来るだけ元のコードは見ない
色とかフォント情報などは参考にしますが、自分でやり方を模索するためです。

(Photoshop立ち上げるのめんどくさいから)出来るだけ画像を使わない
画像を使わないほうが軽いし、修正も楽かもしれない。という言い訳です。使うときは使います。

こんな感じで、ここからはどんな感じで進めたのかをご紹介。

制作準備

制作環境を整える

Bootstrapの回と同様、やっぱり最初は制作環境です。
自分でフォルダ作ってローカルで確認しつつっていう感じでも出来ますが、Compassなどの導入・scss使うにはscout起動必須、などなど結構手間だったりします。というか最初はそうやってました。
が、そんなやり方をしなくてもあるんです。便利ツール。

Middleman

どん!師匠に教えていただいたMiddlemanという静的サイトジェネレータです。
これはRubyをベースに作られているため、まずRuby環境を整える必要があります。
やり方はRubyを始めようで詳しく紹介しています。

最初が少しむずかしくても、Middlemanを導入すればちょっとコマンドを書くだけで至れり尽くせりな環境を作ってくれます。

0327-4

サーバーも立ち上がるみたいだし、練習するにはこの上ありません。

コピーしたいサイトを探す

ギャラリーサイトにも色々あるし、それをまとめたものもググればすぐ出てくるんですが。
あえて挙げるとしたら、このへんがいいかもです。

io3000
どこのまとめサイトでもオススメされてる使い勝手の良いサイトです

muuuuu.org
最近はやりの1ページ完結型の縦長サイトがたくさんあります

これらは国産サイトのギャラリーですが、そのうち海外のデザインも参考にする予定。
おそらく1つはコピーしたいものが見つかったと思うので、早速作業にうつりましょう。

私の作ったものを例に挙げながら作業の様子をお伝えしていきます。

Chowder’sのコンテンツをコピーする

まず1つめに選んだのは、Chowder’sというスープ屋さんのサイトの一部です。
メニューラインナップの下に、本日の名言とおすすめメニューの紹介があります。
このデザインがシンプルなのに可愛くて、すごく気に入ってしまいました。

構成を考える

まずどんな構造かを調べてみます。
コンソールで背景画像を消してみると、要素のひとつひとつがよく見えます。

0327-1

見てみると、見出しがそれぞれ画像だったので、cssだけで作ってみようと思います。

0327-2

まずはこんな風にボックス要素の構成を決めます。

コーディングする

画像の代わりにcssのborderを使うことで周囲の線を処理。
ポストイットに見せかけた黄色いボックスも頑張ればいけそうですが、さすがにそこまでやるとコードがごちゃごちゃしそうなので画像を使います。
Google Fontsを使って見出しのフォントを似せれば完成です。

↑スクロール出来ます
日替わりコンテンツのため、引用したスクリーンショットと内容は違ってます。
スープの画像のところは角丸にしたdivにbox-shadowを使ってそれっぽく。
完全再現とまではいきませんがだいぶ近いはず。

まとめ

今回の例はコンテンツの1部なのであまり複雑なことはしていません。
でもcssだけでもフラットなデザインなら画像なしで結構いけちゃうことが分かりました。
英字ならGoogleFontsで表現の幅もぐっ広がりますね。

というわけでウォーミングアップ編は終了です。
ここから徐々にコピーする範囲をサイト全体に広げていきたいと思います。
次回もお楽しみにー!

標準
title-2
Design

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

こんにちは!新人森田です。
気付いたらもう3月で、しかも3月3日ひな祭りです。
せっかくだしひなあられは食べておこうと思います。

ハレノヒブログのプチリニューアルはその後も少しずつ進行してたりします。
たとえばここ!

0303-1

タグの使用頻度に応じて強弱をつけました。
ブログの記事を読む際にこの辺も使っていただけたらと思います。

それからここ!

banner

さり気なく真ん中バースデーのバナーもおいてあります。
友だち検索機能が付いたりと日々成長中です。
DLがまだの方はこちらからもどうぞ!

では今日の本題に入りたいと思います。
BootstrapでWebサイトを作ろう1〜4ではhtmlとcssのみで制作しましたが、今回はそこにJavascriptを使ってみます。
BootstrapがあればJavascriptも怖くない!

Javascriptを導入する

JavascriptとはWebページに動きをつけるためのプログラミング言語です。
Bootstrapにはあらかじめjsフォルダの中に“bootstrap.js”が用意されているので、まずはこれを使うタグを書きます。

0303-4

<script>で“bootstrap.js”だけ書いたらjqueryがないと動かないとシステムエラーが出てしまいました。
jqueryのサイトから“the compressed, production jQuery 1.11.0”を頂いてjsフォルダの中に保存し、“bootstrap.js”の前に同様に書き込みます。

これで導入準備は完了です。

カルーセルを作る

メインビジュアルの部分をカルーセルにします。
横にスライドする動きを使って、複数のコンテンツビジュアルを表示するのがカルーセル(意味は回転木馬)です。

0303-5

↑はサンプルコードをほぼそのままコピペしたものですが、カルーセルはこんな風に“Indicators”、“Wrapper for sliders”、“Controls”の3つのパーツから成り立っているようです。カルーセルにのせる画像を、元の画像も合わせて3種類にしてみました。

0303-2

おお、見事にスライドしてます。
“jquary”と“bootstrap.js”に動き方などが設定してあるおかげで、htmlをいじるだけでもう出来ました。

ドロップダウンを作る

次はメニューバーにドロップダウンのボタンを付けてみます。

0303-7

上に囲ってある“Toggle navigation”というのは、スマホサイズまで縮めた時にメニューが収納されるアレです。
そして下の“dropdown”の部分がドロップダウンのボタンを設定している箇所です。

0303-3

ちゃんと表示されてますね。

画面幅を縮めていくと…

0303-6

メニューがきちんと収納されました。

まとめ

Javascriptの文法をまったくといっていいほど知らない私でも簡単にJavascriptを使えてしまいました!
本当におそるべしjquery&Bootstrap。
今回はサンプルコードをコピペして動作確認しつつ微調整というシンプルな作業でしたが、こだわろうと思えばもっと作り込めそうです。
今後jqueryとかもっと使えるようになるために、まずはBootstrapのJavascriptを色々使ってみようと思います!押忍!

標準
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総スルーだったし、まだまだやりたいことだらけなので連載はもうちょっと続きそうです。
短期集中連載はひとまずここで区切りということで今回はこのへんで!押忍!

標準
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が重なってますね。ここは再現しておきたいところです。

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

標準
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

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

次回予告

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

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

標準
title-2
Design

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

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

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

制作環境を整える

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

フォルダ作成

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

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

140205-01

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

index.htmlを作成

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

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

140205-02

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

動作確認

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

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

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

140205-03

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

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

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

140205-04

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

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

次回予告

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

140205-06

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

標準
title-css
Design

cssを知るべし

こんにちは!新人森田です。
デザイン情報を集めるために、最近おすすめニュースを自動配信してくれるアプリをDLしてみました。デザイン系ニュースをお気に入りするようにしてるのに、食べ物ネタが日に日に増えてる気がします。切ない。
それでは前回に引き続き、ハレノヒブログリニューアルプロジェクト(長い)の作業工程をまとめますね。

前回はwebページの骨組みであるhtmlタグのことを書いてみました。表記例で見たように<>で囲まれまくっていて、組み立てられてる感がすごくありました。でも、そのままだと実は文章が表示されるだけなんです(後でご紹介)。

骨にはやっぱり肉がついてないとおいしくない!

blog-img-5
(画像は骨付いてないですがめちゃめちゃおいしかったです)

というわけで今回のテーマは、そのhtmlの要素を装飾する=肉付けするスタイルシートについてです。

cssとは

繰り返しになってしまいますが、webページの構造のための記述がhtmlで、その表示を調整する記述がcssです。cssはそれだけだと一人ぼっちなので、htmlとリンクさせて使います。前回のサンプルデータを例に見てみます。

blog-img-3

これで準備完了です。このhtmlにcssで設定されたスタイルが反映されるようになります。

htmlとcssが固い絆で結ばれていることは確かなんですが、cssの中にも書き方の違う兄弟みたいなのもいます。
cssの書き方とほぼ同じで色々ひとまとめに出来るscss、cssと書き方が違うけど上級者なら作業効率上がりそうなsass。その中で何を使うかというと、scssです。文法が同じ方が師匠や未来の自分と情報共有しやすいというのが主な理由。

scssはcssに変換して使うのがお約束です。
私は師匠直伝の[scout]というツールを使いましたがそれはまた別の機会に書くことにします。

htmlとcssの関係

htmlへの肉付けをするのはずばりこの部分です。

blog-img-4

htmlタグの中にclassという名前がついています。この名前に対して設定を書き込むことで、web上の表示をデザインの通りに仕上げていくという仕組みです。

これはタグ自身idclassという3種類の要素に対して有効です。
それぞれの違いをさらっと説明すると、
id:そのページ内で1つしか使えないオンリーワン
class:繰り返し使えて組み合わせも出来るオールラウンダー
タグ:idほど孤高ではないがclassほど器用でもない
って感じでしょうか。
とにかくclass推しってことです。

cssの記述例

それでは実際にcssがどんなものか見てみます。
scssを使う、と書きましたがサンプルは簡単な記述なのであんまりその恩恵は受けてなかったり。

blog-img-1

見るからにhtmlとは違いますね。classに対する設定をひたすら書いてます。@importや@includeというのがscssで出来る便利機能の1つで、繰り返し使うコードをまとめたmixin(ミックスイン)を使ってるということです。

cssをリンクしてない場合とリンクした場合で表示を比較してみます。

blog-img-2

このようにhtmlとcssを組み合わせて使うことで、一枚の画像だったデザインをwebページへと成形していきます。

師匠によると、プログラマは「DRYの原則」に基づいてコードを書いているそうです。これは”Don’t repeat yourself”の頭文字を取ったもので、同じコードを繰り返さず出来るだけ1回の記述でまとめる、ということです。

先ほど紹介したmixinが@import(取り込み)という形式で使われてることや、class推しも同じ理由からです。そうすることで全体の見通しも良くなる(=メンテナンスしやすい)し、共有しやすいし、作業効率大幅アップ!「DRYにコードを書く」とかカッコイイ!

ぺーぺーの森田はハレノヒブログのコードだけでもすごく時間がかかってしまいましたが、本来はこの辺はさくっと済ませたい部分。大量の文字列管理の裏側には色んな工夫がなされているんですね。

そんなこんなでhtmlとcssを使ってwebページという骨付き肉が出来上がりました。ちょっと無理矢理でした。私も早くDRYにコードの書けるクールビューティーになりたいです!押忍!

標準
blog-img-10
Design

htmlタグを知るべし

こんにちは!新人森田です。
年明け早々の3連休があったりもしましたが、前回の更新からハレノヒブログリニューアルプロジェクト(勝手に命名そして長い)を水面下で進めておりました。一段落したところで、作業のおさらいをしてみたいと思います。

その前に、師匠のご指導のもと出来上がったデザインをちょっとだけご紹介!

blog-img-1b

全貌はリニューアルしてのお楽しみということで。
こんな感じにPhotoshopで全体のデザインを作るところから始め、このデザインを元に実際のwebページを作る作業=コーディングをするという流れで作っていきました。

コーディングという作業では、htmlタグというものと格闘することになります。バックに師匠という秘密兵器が控えつつも、やっぱり秘密兵器は秘密兵器なので多分だいたい自力で頑張りました。webページを作っているベースはこのhtmlタグなので、今回はhtmlタグについてまとめてみます。

htmlタグとは

html専用の記述文字のことをhtmlタグといいます。(htmlって何だっけという人はWeb用語を知るべし

“<>”で1つの要素を書き、”< >〜</>”で要素の範囲を表現します。
webページでは検索したりボタンをクリックしたりと色んなことが出来ます。それだけ色んな要素が使われているということなんですが、色々ありすぎるのでhtmlタグにはどんな種類があるのかをざっくりと分類してみました。

分類その1:UIとそれ以外のタグ

上に書いたような「検索」「クリック」といった動作だったり、デザインの表示だったりといったwebページの表面に影響するタグがUI。要素を入れ子にしたりする箱は<div>、文章の見出しを表す<h1>、画像を貼り付ける<img>などです。

blog-img-2

それ以外に、ページそのものを定義したりするタグもあります。<meta><!doctype>などプログラミングしてるぜって感じです(個人差あり)。

分類その2:要素の種類

UIのタグは、さらに要素の種類で分けることが出来ます。
1つの固まりとして扱われて横幅いっぱいに表示される(改行される)ブロック要素と、文章の一部のようにブロック要素の中身として扱われるインライン要素です。

その他にも、インライン要素なんだけどブロック要素のように幅や高さをもつインラインブロック要素、表を作るテーブル要素などもあります。

blog-img-3

ブロック要素:<div>、<h1>(上記参照)、<p>(文章の段落)、<ul><ol><dl>(各種リスト)等

インライン要素:<a>(リンク)、<strong>(強調)、<span>(任意の範囲をひとまとめにする)等

インラインブロック要素:<img>(上記参照)、<button>(ボタン)等

テーブル要素:<table>

htmlタグの表記例

こういったタグたちを駆使してwebページを形作っていきます。といっても、これらをどう使うのか、それがどんな風にwebで表示されるのか等々イメージしづらいと思います。

表記例としてはこんな感じです。

blog-img-5

そして私の頭の中。

blog-img-7

それがこうなります。

blog-img-6

色がついたりしてる理由は次回!

頭の中はさておき、大体このようにwebページが成り立っているのでした。デザインとは違う領域の脳を使っている感覚です。とはいえ、慣れてくるとコードのことも意識しながらデザインする頭も出来てくる。はず。

それから、前回の記事でも触れた「UIを意識したデザインが紙媒体とは性格が違う」理由も、こういう仕組みを覗いてみるとほんのり具体的になってきたのではないでしょうか。

タグについてもですが、バージョンやOSやデバイス等々含めるとhtmlはまだまだまだまだ奥が深いです。日々画面と睨めっこしながらコーディングもデザインの腕も磨いていこうと思います!というわけで今回はこの辺で!押忍!

標準