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

標準
PAK86_meganewo1039500
Design

PhotoshopスライスツールとWeb用に保存の設定を色々いじってみる

こんにちは山形です。いつもは開発系の記事だけですがたまにはプログラマー目線でデザインツールの使い方でも書いてみたいと思います。

さてWeb制作には欠かせないPhotoshopですがデザイナーが作成したデータを貰ってプログラマーがWeb用画像を書きだすなんてこともたまにあるかと思います。

なんとなく保存はできたものの「あれ、そんなファイル名なの…」とか「いやいやどこに保存してんだよ」「そのファイルいらねえし!」みたいな事が起きた場合の対処方法をまとめました。

Photoshopスライスツールとは

そもそもまずはソレ何?旨いの?という話はこちらからどうぞ。
シンプルな使い方としては「スライスツールで範囲を選択」>「Web用に保存メニューから形式を選んで保存」です。

Web用に保存のショートカット

shift + option + command + S です。(windowsはコマンドの代わりにcontrol)

通常の保存が command + S なのでそこに shift + options が加わった形ですね。

今回の素材

PAKUTASOさんから選びました。

PAK86_meganewo1039500

クオリティの高い画像が無料で使えるのでブログには最適ですね。

画像名を変える(ファイル名に _3 とかいらない)

まずはここ。いざ保存したファイル名に “_”(アンダースコア)と番号がふられてて削除するのめんどくさい!と思いますよね。

そんな時はスライスした範囲を右クリックして出てくるコンテキストメニューから”スライスオプションを編集…”を選択し、”スライスの種類”を”イメージ”に選択した状態で名前の欄を変えましょう。

スクリーンショット 2014-02-06 11.42.08

 

スクリーンショット 2014-02-06 11.43.57

 

こうしておくとWeb用に保存の時のファイル名と違くても先に設定した名前が優先されます。_3とかもつきません。

そもそも1つしか保存してないのに _3 ってなんだ?と僕は思ったのですが、スライスで囲った範囲の上に1と書いてある範囲があり左に2がありますので、画像の左上から自動で分割して番号をふるんですね。

スクリーンショット 2014-02-06 11.39.43

フォルダ名を変える(いつでも images とは限らない。もしくはいらない)

デフォルトだとスライス画像が一枚でもimagesフォルダに入れて保存されますよね。
これはこれで便利な時もあるんだけど(imagesフォルダをまだ作成していない時とか?)名前変えたいとかフォルダにいれないでほしい時もあります。

そんな時はWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を開きましょう。

スクリーンショット 2014-02-06 11.47.26

 

現れたウィンドウから”ファイルの保存”を選択します。

スクリーンショット 2014-02-06 11.50.18

 

一番下の範囲に”画像をフォルダーに保存”という項目があるので、フィールドに任意の名前を入力するかチェックを外すとフォルダーが作成されないようになります。

スクリーンショット 2014-02-06 11.51.21

 

スライスを分割

スライス領域を右クリックして”スライスを分割”を選択するとできます。

スクリーンショット 2014-02-06 12.39.46

 

縦横を等間隔に分割設定できます。

スクリーンショット 2014-02-06 12.41.34

あまり使いどころ無い感じしますが、例えばグリッドレイアウトされている場合とか一つずつ範囲選択するよりは早いかもしれないですね。その場合、各要素の隙間があると適応できないですが…

テーブルレイアウト時代の名残なのかも。

保存と同時に縮小(Retina用素材から、非Retina用にしたい場合とか)

最近はどんどんスマートフォンのアクセスが増えてきてますよね。半分以上スマフォユーザーのサイトも珍しくないんじゃないでしょうか。
高精細なディスプレイ用に大きめにデザインしてもらうのはいいんですが、一旦保存したファイルを開いて小さくしてまた保存…とかめんどくさいですよね。

そんな時に役立つのがWeb用に保存パネルの右下にある”画像サイズ”オプションです。

スクリーンショット 2014-02-06 11.55.32

 

ここでサイズを指定すれば縮小版とかを作ってくれます。
ただ気をつけてください!このサイズは全体の画像サイズです。なのでスライスに設定したつもりでいると出来上がる画像のサイズが違うので戸惑います(ました)。あと同時に2つのサイズを保存してくれるわけではありません!

また画質の選択肢が以下のように別れておりそれぞれに特性があります。

ニアレストネイバー法

一番単純な拡大・縮小が行われます。ドットをそのまま扱う感じなので縮小するとカーブが大分ギザギザします。逆に小さいカンバスでドット絵を書いて大きくする場合にはこれを使うのが最適です。写真の縮小には向いてないと思います。

スクリーンショット 2014-02-06 12.19.39

バイリニア法

ピクセルの色濃度を元に平均値を求めて空いたピクセルを補うという方法みたいです。機械的に平均値を計算するだけなので元画像に含まれていない色が含まれる可能性があり若干画質が劣るようです。

スクリーンショット 2014-02-06 12.20.16

バイキュービック法(デフォルト)

これがデフォルトの設定です。バイリニア法が平均値の計算だけだったのに対して、元画像に含まれる周辺の色も考慮に入れて計算するようです。なのでバイリニア法に比べるとより自然な仕上がりになるかもしれません。

スクリーンショット 2014-02-06 12.20.47

バイキュービック法(滑らか)

バイキュービック法の計算を調整したものですね。素人には何が変わったのかわかりませんが、暗い色の境界のエッジが目立ってしまう場合に使うと良いようです。

スクリーンショット 2014-02-06 12.21.32

バイキュービック法(シャープ)

これもバイキュービック法の計算を調整したもので、暗い色の領域のエッジをもっと目立たせたい場合に使うと良いようです。

スクリーンショット 2014-02-06 12.21.59

こちらを参考にしました:PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。

htmlも生成する(tableとかダサいのでcssでクラス指定で)

あんまり使うことは無いと思いますが、Web業界が長い人には胸アツのtableレイアウトか、Web標準なcssのhtmlコードを出力してくれます。

これはまずフォルダ名を変更した時と同じWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を選択します。

スクリーンショット 2014-02-06 11.47.26

 

スクリーンショット 2014-02-06 12.25.32

 

現れた出力設定からまずはHTML設定を選択します。
ここではhtmlの書き方の設定ができます。そのまま使うことはあまりないと思うので適当でいいと思いますが僕はインデントが半角スペース2文字にしてほしいので以下のようにしました。

スクリーンショット 2014-02-06 12.27.22

 

次にスライス設定に切り替えます。

スクリーンショット 2014-02-06 12.23.00

 

tableレイアウトとかもう滅んでいいと思うけど、htmlメールにはまだ必要なんですかね。htmlメール作ったこと無いのでよくわかりませんが。とりあえずcssを選択しました。

スクリーンショット 2014-02-06 12.30.36

 

好みですがid属性を降ることも出来るようです。何度も言いますがここで出力したhtmlをそのまま使うことなんてほぼ無いと思うので適当でいいと思います。

で、保存すると (psdファイル名).html と images フォルダが作成されます。

htmlを開いてみるとこんな表示なっていたのでPhotoshop上でスライスした見た目がそのまま表現されるってことですね。

スクリーンショット 2014-02-06 12.35.10

まとめ

どうでしたでしょうか。以外にも細かいオプションがあって普段スルーしていた自分には結構驚きでした。
特にファイル名なんかはいちいち保存してから修正していると意外と時間かかるんですよね。例え1ファイルに5秒しか短縮できないとしても、日々の積み重ねで100個直せば8分半かかると考えればなかなか侮れません。

標準
blog-7
Design

Bootstrapを知るべし

こんにちは!もうそろそろ新人脱出?森田です。
旧オフィスも好きだったけど新オフィスはとても快適です。が、近所の昼めしスポットを開拓しなければならないという重大ミッションも抱えております。安ウマなお店たくさん発掘できますように。

さてさて、ただ今ハレノヒでは自社アプリを開発中です!
アプリのデザインはなんと私が担当させていただくことに。webデザインよりもっと全然知識がなくて完全手探り状態でしたが、完成までもう一息というところまでこぎつけました。最初はiPhone用としてリリース予定ですのでどうぞお楽しみに!Android派の方はもうしばしお待ちください(森田もおあずけです…)

blog-5

アプリデザインが一段落ついてからはweb用の告知ページを制作していました。
そこでまた新しい試みをしたので、今回はそのことについて書こうと思います。

Bootstrapとは

「どうやらブートストラップなるものを使うとweb制作がはかどるらしい」というすごい曖昧な予備知識はもっていた森田。でもブートストラップという言葉を初めて聞いた時、真っ先に思い浮かんだのはマッチョな隊長率いるムキムキエクササイズでしたすいません。ちなみに直訳すると長靴のパーツのことらしいです。

正確には、BootstrapとはCSSフレームワークの名前です。
フレームワークというのは色んなところで繰り返し使われる汎用機能を備えたもので、記述の仕方がある程度決まっています。これを利用すれば基盤部分だったり必要な箇所を流用出来てとても効率がいいです。
汎用的なプログラムをまとめたものの仲間としてライブラリというのもありますが、こちらはもうちょっと機能が小さいです。それ自体が働くというよりは、他のプログラムの助けになってくれるイメージです。

本来Bootstrapはテキストベースでナビなどが沢山ある管理画面などの制作に向いています。アプリ用の告知ページは性質が違うのでBootstrapの良さをフル活用とまではならずも、良い勉強になりました!

BootstrapをDLする

まずはBootstrapをダウンロードするところから始めましょう。

blog-1

blog-2

http://getbootstrap.com/

と思ったらボタンが3つありますね。
これはどういうことかというと、作業スタイルによって使い分ける感じでしょうか。ページの大枠をお借りするということで、基本は左の”Download Bootstrap”でオッケーです。

ちょっと話は逸れますが、右の二つはどう使うかというと。

最近ではネット上でバージョン管理されたソースコードのリポジトリを使って他人のコードのバグを修正したり出来ちゃうんです。ソーシャルコーディングというらしいです。技術の進歩すごい。また、そんな風にソースコードを自由に見て書き込むことが出来るような活動形態をオープンソースプロジェクトといいます。

そのオープンソースプロジェクトは主にGithubという共有webサービスが使用されているケースが多く、真ん中と右の”Download source”と”Download sass”はGithubで管理されているコードとsassをダウンロード出来ます。必要な機能だけ選んだりもできるようです。

でも今回はソースコード扱うの師匠と私だけだし全然ソーシャルじゃない!というわけでプライベートモードで作業しました。Githubだとプライベート仕様が有料なのでBitbucketという無料サービスを使っています。

Bootstrapでできること

今回はざっくりと紹介することにして、次の機会に詳しく説明していきますね。

blog-3

Bootstrapではグリッドシステムを使ってレイアウトすることが出来ます。1行に12列のグリッドがあり、その数を目安に配置していけば大まかにデザインを作れちゃいます。

レスポンシブデザインにももちろん対応してます。グリッドにも何種類かに設定が分かれているので、PCではグリッド・スマホではグリッド解除みたいなことも楽々出来ます。

ボタンやフォームなどの各種インターフェースが揃っているのも心強いです。これらを駆使するとかっこいい管理画面が出来ると師匠が言ってました。

まとめ

今回はBootstrapの紹介をしてみました。ここでまとめただけでもだいぶ便利感あふれてると思いますが、実際使ってみると果たしてどれだけ効率が良いんでしょうか?!Bootstrap、恐るべしです。これを使いこなせたら私もムキムキデザイナーになれる気がします。押忍!

標準
title-font
Design

Font Awesomeを知るべし

こんにちは新人森田です。
今日はちょっと女子力高めでお送りしたいと思います

全然キャラじゃなかった!やめます。
なんでいきなりこの流れかというと、単純にアイコンフォント使いたかったからです。こまごましたもの好きとしてはこのこまごま感はたまりません!ガラケーの時に絵文字サイトから毎日絵文字DLしてたし、当然といえば当然の流れなのかも。

そんな見て楽しい・使って楽しいアイコンフォントが今回のテーマです。

アイコンフォントとは

サイトにアイコンを使おうと思ったら、まずアイコン画像を作ってアップして…というのがこれまでの流れでした。でも今はwebフォントサービスの充実によって、アイコン使用がもっとお手軽になったんです。

webフォントについてはまた今度まとめたいと思うので、ここではさわりだけ。
フォントは通常、使用デバイスに入っているものしかブラウザに反映されません。WindowsだとPCで明朝体(小説の本文みたいな文字)を見る機会って少ないんじゃないでしょうか。そうなるとせっかくフォントにもこだわって作ったデザインが台無しです。でも、webフォントを使えばサーバーからフォントファイルを開いて使えるので、見え方が統一できます。

そんな便利なwebフォントは文字だけではなく、アイコンも取り扱っています。
アイコンが画像でなくwebフォントになることでどんな利点があるかというと、

編集が便利

画像だと、何か変更があった場合いちいち作り直して差し替えなければなりません。一方webフォントは文字扱いのため、cssを修正すればすぐ変更が反映されます。イッツ時短。

blog-5

サイズ変更しても見え方が変わらない

web上の画像を拡大していくとどんどん荒くなっていってファミコンの画面みたいになっちゃいます。解像度の関係でそうなるんですが、webフォントは画像(ドット)としてではなくベクトル(方向と長さの情報)で形状を表現しているので拡大縮小自由自在です。

blog-6
画像:Font Awesome

ここまで知ると、今すぐ使いたくなってきちゃったんじゃないんでしょうか。

Font Awesomeを使ってみる

というわけでハレノヒブログがお世話になったFont Awesomeというサービスを使ってみましょう。

blog-1
http://fontawesome.io/

トップページのボタンでまずファイルをDLします。
DLしたzipファイルを展開したらcss、fonts、less、scssのファイルが入っているので、必要なものをコピペします。

blog-2

そしてリンクします。ここでは親のscssにfont-awesomeのscssをインポートさせています。

blog-3

準備完了です。
サイトを参考に使いたいアイコンを選んで、htmlにコードを貼ればオッケーです。

blog-4

単なるマークだけではなくソーシャルアイコンなど豊富な種類が使いたい放題!

blog-12

 

わーいわーい

まとめ

web上でメインの情報伝達ツールは文字です。文字といってもメニュー・タイトル・本文と、それぞれ意味合いの異なった沢山の文字が詰め込まれています。ただ文字だらけの画面ばっかり見てると疲れてしまいますが、ワンポイントでアイコンがあると情報整理されて画面が見やすくなると思います。UIにも一役買ってくれてる感じです。

こまごましたもの好きな森田はどこでどのアイコンを使おうかとワクワクしまくりでしたが、もちろん使い過ぎは厳禁です。
また、今回取り上げたFont Awesomeの他にも、オリジナルのデータをアイコンフォントに出来るサービスもあります。オリジナルなアイコンフォントだなんてムネアツですね!そのうち作ってみたいです。

そんなところで今回はこの辺で!押忍!

標準
title-css
Design

CSS3を知るべし その1

こんにちは!新人森田です。
師匠に影響を受けて土曜日にランニングシューズとジャージを買いました!
さっそくちょっと走ってみたらすぐお腹いたくなりました。
そういえば高校の時も、体育の授業のウォームアップランニング後にお腹いたくてしばらく休んでました。
前途多難です。

とはいえ、形だけでも整えてみるとちょっとモチベ上がりますよね。
NIKEの新品シューズなかなかいい感じです。
形…かたち…スタイル、といえばCSS?!

なかなか強引ですが今回はCSSの中でもCSS3についてまとめてみます。

CSS3とは

CSSはおなじみスタイルシートのことですが、3というのはそのバージョンを意味します。
偉い人たちが日々webの世界の仕組みを作り続けているんですね。
そのおかげで表現の幅も増えて、トレンドも変化していくわけです。

ただ、一言にCSS3といっても「CSS3はこういうものです」みたいに単純なものではありません。
色んな要素がありまくりますので、少しずつ切り分けて見ていきたいと思います。

CSSを使うにあたって

その前に、CSSを便利に使うためのツールについてご紹介します。イケメン揃いです。

イケメンその1:scss

blog-5

css記述における革命児scssさん!
cssは指定するclass等に対して個々に設定を書き込まなければいけませんが、scssは1つのclassの下にある要素のスタイルを入れ子にしてまとめて書くことが出来ます。また、@import、@includeを用いてmixinを使い、記述をコンパクトに。収納上手にお掃除した気分です。

ここまではcssを知るべしの時に書きましたが、実はまだまだあります。

blog-12

こんな風に$で変数を設定してそのまま使用することも出来ます。

他にも、スタイルの中に計算式を埋め込む関数や、複数classに使うスタイルを変数なしで設定出来る継承といった機能も備えています。なんかもうすごくすごいです。

イケメンその2:compass

blog-6

scssに使うmixinをまとめてあるのがcompassさんです。
たとえばfloat解除。floatというのは要素を横に並べる時によく使うスタイルです。が、これは要素を浮かせて並べているイメージなので、その下に来る要素は浮いてるものを無視して重なってきたりします(レイアウトが崩れます)。なのでfloatとセットで使うのがfloat解除です。解除方法にも色々ありますが、便利なのがclearfixというもの。本来何行か書かなければいけないこのclearfixを、compassさんはあらかじめ用意しておいてくれているんです。

まるで…まるで、そう。炊飯ボタンを押したらご飯が炊けるまで全自動ですみたいな。
(繰り返しする作業をワンタッチでお気軽に的な意味で)

イケメンその3:scout

blog-7

ここで満を持しての登場がscoutさん。私は師匠に教えてもらっていきなり使っちゃったりしてます。
compassなどを使って書いたscssを自動的にcssに変換してくれる最強(?)イケメンです。

scss書いただけではhtmlに「cssにして出直して来い」と突き返されてしまいます。この変換はscout以外だと手作業もしくはサーバーにやってもらうという手間や時間のかかる作業です。でもscoutならそんな工程をがっつり省略できちゃうんですね。

炊飯ボタンを押したら最短でご飯が炊けるみたいな。
(昨日作り置きで一気に5合炊いた時のインパクトが凄かったので米ネタがしつこいです)

CSS3の使用例(ハレノヒブログの場合)

では使う準備が出来たところで具体的に見てみましょう。
ハレノヒブログではCSS3の以下の機能を使っています。

  • 角丸処理
  • レスポンシブ対応
  • 不透明度の変更

blog-4

このへんです。さんざん前置きした割に地味です。
でもこういうちょっとしたところが全体の見え方にも影響してくるんです。

[角丸処理]

今までプロフィール画像といえば四角で、丸くするには丸い画像を用意しなければいけませんでした。規模が小さければそれでも対応出来ると思いますが、1つずつ丸く切り抜いて保存し直すっていうのをいちいちやるのは結構面倒です。
それが、border-radiusを使えば四角い画像を丸く見せちゃうことも出来るのです。

blog-2

□い頭が○くなった!

[レスポンシブ対応]

前の記事でも書きましたが、画面サイズを設定してレスポンシブにするのがMedia Queriesです。
これがなかったらすごい複雑なプログラミングとかするんだろうなぁと思うと神機能。

[不透明度の変更]

ハレノヒブログでは画像のhover時にopacityを使って不透明度を変えています。
hoverというのは、リンクが貼られた箇所にカーソルを合わせた時の状態のことです。主にPCでの話になりますが、hover時にちょっと変化をつけることでこの先にリンクがあるよっていう目印になったり、面白い演出になったりします。

不透明度に関しては、差し替え用の画像を用意したり細かく色設定したりしなくても全然オッケーです。

blog-3

compassさんにも助けられつつ、なんとこれだけ!

まとめ

というわけでCSS3の一部を見てみましたが、どれも以前までの作業を楽にしてくれるものばかりでしたね。
インターネット上にはすっごい数のサイトがあるわけで、その中でも目が留まるサイトを作るには沢山の工夫が必要です。そしてその工夫をもっと楽に作るための工夫がCSS3にたくさん搭載されたんだっていうのが、CSS3を実際に使ってみての私の感想です。

森田のweb知識は一昔前のものなので、今はこんなことが楽に出来るんだー!って日々驚きだらけです。
また新機能を使ったら報告したいと思います!ランニングの経過報告も成果があれば報告したいです…
ではでは今回はこの辺で!押忍!

標準
blog-0123-4b
Design

ブログリニューアルしました!あとレスポンシブデザインについて知るべし

ようこそいらっしゃいました!新人森田です。
なんで書き出しからテンション高めなのかというと、見ての通りです。
とうとうついに!ハレノヒブログリニューアルが実現しましたー!!
私もコーディングはしたものの、実装作業は師匠がマッハで仕上げてくださいました。
ありがとうございますおつかれさまです!

脳内迷宮をぐるぐるしながらようやく出来たデザインが実際に稼働していると、必要以上にスクロール上下したり1分おきくらいにスマホで見たりとか。リュックに眠ってたタブレットも久しぶりに起動させてみたり。

blog-0123-1

ニヤニヤしちゃいます。

ん?手持ちのデバイスフル稼働させて動作確認ということは?
イエス、レスポンシブデザインです。
ワイヤーフレームで書いた通り、どのデバイスで見ても崩れないように作ってあります。

と、いい感じの流れになってきたので今回はレスポンシブデザインについてまとめてみます。

レスポンシブデザインとは

レスポンシブデザイン。最近本屋さんのITコーナーなどでよく見かけるワードです。
「responsive:反応の良い、敏感な」の通り、様々なデバイスに対応したデザインという意味です。
みんなスマホを持ってて、iPadとか持ってるとちょっとイケてたりして(?)、最近MicrosoftがSurfaceごり推しだったりして、インターネットはもうPCのものじゃないってことですね。

で、何がレスポンシブなのかというと、一番は画面の横幅です。
今このページをPCから見てくださっている方、よろしければウインドウの横幅を変えてみてください。ウインドウが最大だったら、縮めていくとあるサイズから一度タブレットサイズにガクッと変わって、更に縮めるとまたガクッとスマホサイズになると思います。
ざっくり言うとこれがレスポンシブな感じです。

パソコン、タブレット、スマホそれぞれの横幅を設定して、各サイズになるとデザインがどう変更されるかをcssに書き込むことでこういった動きが可能になります。

blog-0123-2

たとえばこのブログだとこういう記述です。

レスポンシブにするところ

大体の感じはつかめたと思うので、じゃあ具体的にどの辺をレスポンシブにするか?という話に。

blog-0123-3

ハレノヒブログの場合、PC、タブレットでは右にあったサイドカラムがスマホでは記事の下に回り込んでいます(広告は仮でお借りしてまいりました)。その代わりに横幅いっぱいに記事を表示して見やすくしてあります。ブログなので形式的といえばそうなんですが、分かりやすい例ということで。
他によく見かけるのは、アイコンにメニューが収納されてタップするとメニューリストが出てくる、とかですね。

一般的なサイトの場合だと、例外的かもですが横幅に応じて画面が変化する面白いデザインもあったりします。レスポンシブで遊んでるっていうか。ただコンテンツを整然と表示するだけじゃなくて、そういう遊びがあるとちょっとそのサイト気になっちゃいますよね。

と、ここまでは横幅の変化にどう対応するかを書いてきましたが、もっと突っ込んでいくとレスポンシブデザインってデバイスの操作性と結びついていくと思います。

PCはマウスで画面のポインタを操作するから細かいクリックポイントにも対応しやすいし、キーボードがあるから文字入力も楽々です。
それに対して特にスマホはタップがメイン。お手軽ではありますが、細かいボタンのクリックミスでいらっとした人ってかなりいるんじゃないでしょうか。文字入力も、予測変換機能が充実してきたとはいえ結構めんどくさいですよね。スクロールが多いのも大変。

そういう各デバイスの特徴を考慮した上で、かっこよくて且つ操作もしやすい(さらに楽しいとなおよし!)っていうのが理想的です。あ、あとコーディングの時もあまり手を加えずにレスポンシブに出来るようになってると超ステキですね。いつかそんなサイトを作りたいです、いや、作ります!

なんかアツくなってまいりました。このパッションを忘れずに次のミッションにも取り組もうと思います。
というわけで今回はこの辺にしてハレノヒブログにニヤニヤしにいってきます!押忍!

標準
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にコードの書けるクールビューティーになりたいです!押忍!

標準