初のwebデザイン

中断をはさみつつ足掛け12年あまりSEやってたが、UIデザインはほとんどノータッチであった。

ひとり事業者になるにあたり、ある程度できるようになりたい、と思っていたら、良い機会に恵まれた。仕事先のwebサイト「2000年頃にホームページビルダーで作りました」状態なのを今っぽくしたい。1日50セッション位、商売に直結してはおらず(それってどうなの、というのはおいといて)、クオリティ許容範囲が広い。

----

よくわからないまま、子どもの寝静まった夜(気力のある日に限り)ウロウロ進んでいる。

・とりあえず bootstrap …今も現役なの？

・sublime というエディタが便利らしい

・ズルいwebデザイン

・sass 、compass 使うべきらしい

・jqueryで共通部分は inblude

・lightbox … colorbox というのがよさそう

・box-shadow やっと理解した

・ノンデザイナーズデザインブック は読んだ。

・bootstrapもsass版があるのか…配色とかnavbarとかいじるなら、それ使うべきなのか…

divの高さを揃えたい！問題にはまること3日、flexbox の存在に気がついた。IE9のサポートはしれっと無視できるから使っちゃおう…。追い追い対応するかも？ということで。

一歩進むと一つ新しいことがわかり、本丸のコーディングが一向に進まない…。

あとはナビゲーションの実装手段。bootstrap, jquery, flexboxベースに自作(というか拾い物)、どれがいいんだろう。

あとcssスプライト。

あとフォント。

あと配色。adobe kooler は使いこなせず cooler ?で適当に選んだ。けど http://www.webcreatorbox.com/tech/web-design-color-scheme/ を参考に見直し要。

あと何があるのかな…。遠目に敬遠してたときより何とかなりそうな感触を得つつあるけど、やっぱり習得課題多いな！様々なフレームワーク等によって10年前と比べられないほど楽になってるけど、その分当たり前水準も上がってるからな。

クロスブラウザとかクロスプラットフォームとか手が回らないよ。ネット頼りに作ってみて、無事を祈り、あまりにひどければ対応する、かも…それでも現状よりひどいことはないはず。

---

結局、flexbox, bootstrap-sass 両方をsassで書いてcompassでコンパイルすることにした。全部載せ。
Webサーバにのせるモノたちと別のところにsassを置く場合、http_pathとかどうすれば?という疑問の答えをウロウロ探したが↓に助けられた。
http://qiita.com/makoto_kw/items/e6afe3c03abf3d3ff63e

--sass-dirも指定できるのでプロジェクトファイルと出力ファイルを分けることも可能。例えば以下のような感じ。(中略)
デフォルトだと*-dirの値が使われるのでconfig.rb内でhttp_*_pathを指定しておく。

あとこれにも。
http://qiita.com/quno/items/a9ef299ac2b4ae827bee

require 'bootstrap-sass'
(中略)
※先にconfig.rbに追記しないでインストールすると以下のエラーが表示される

とりあえずcompileしようとして Incompatible character encodings と怒られた。
https://github.com/Compass/compass/issues/1825

So the problem seems to be the non-ASCII characters in the path name. I had a ß in there. Renaming the folder fixed it for me.

パスに非ASCIIが含まれるとダメか・・・是非もなくフォルダ名変更。

既存CSSをSASSに変換する方法は

ようやく皆がボール蹴ってる場所に近づいた感。