mihoji 最近、案件でBootstrapを使う事があったので所感など書いてみます。
【Bootstrapを使ってみた個人的な所感】
★メリット
・ルールに従ってhtmlやcssを書いていくだけで簡単に、いまっぽいテイストのサイトが作れてしまうのはすごい！
・レスポンシブもOK.
・カラム分けやちょっとしたテーブルのあしらい、文字やフォームなんかも全部あらかじめデザインされているので細かい事きにせずどんどんページ量産できる。
★デメリット
・いろんなとこで使われているので、あーこれBootstrapね、って感じのサイトになる。
・カラム分けは960pxの12分割グリッドなんだけど、実案件の内容によってはこれよりずっと複雑なカラム構成なので、結局は自分でcss書かないといけない。
・いろんなケースを想定してCSSが書かれてるのでソースがとっても長くて複雑。
・jQueryのスライダーなどと一緒に使うと、jsがhtmlに振るクラス名とBootstrapが持ってるクラス名が競合してしまい、なんかおかしくなる事があった。
とまあ、カッチリ決まっててすぐ使える便利さの反面、そこから外れた事をしようと思うと大変という、当たり前の事なのかな。
特に色調の面は、あの濃いグレート鮮やかな青のパターンがサイトの雰囲気にあまり合わなかったので、どうしても何とかしたかった。
BootstrapのボタンやナビゲーションはCSS3でデザインされていて、画像を使っていないのは良いのですがCSSのソースが半端なく複雑で長い。。。
それぞれのカラーコードを変更すれば色は変わるのかもしれないけど、なかなかの手間ですよね。
そこで考えた結果、市販のBootstrapテーマを買って、そのパーツを使うという感じにしました。
たとえばボタンなんかも、こうして様々な色味がパックになって売っています。
https://wrapbootstrap.com/theme/button-essentials-button-pack-WB00T81AK
そんな中、８月１８日にCSS Nite in OSAKA, Vol.32が開催されたので参加してきました！じつはCSS Niteって初めてだったり★
一番聞きたかったのは、もちろんmsngさんの「CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに」というセッション。
LESSってイイネ！と思った事いくつか、私メモ。
・導入が簡単（SASS等と違ってターミナルをたたかなくてもいい）
・less＝変数が使える。変数なので、計算ができる。
・コンパイルが必要だけど、なにか一手間いるわけじゃなく＜link rel=”stylesheet/less” href=”./less.js”＞を読み込ませておくだけでいい
・lessいじりながら、html側のURLには「#!watch」つけておくと、リロードしなくても変更がプレビューに反映される
・less版のbootstrapを使って色味などを編集するときは、variable.lessをいじればよい。だいたいの定義がここにかいてある。
これらを知る前に既にBootstrapのページ作ってしまってた orz
なので、lessが案件で活かされることは無かったのですが、大量に効率よくCSSコーディングするにはよい方法だと思いました。
ただ、変数などの考え方ってプログラマー寄りで、デザイナーはあまりなじみが無いので、すぐにガシガシ活用していくにはハードルが高いなとも感じました。
普段のデザインワークでは、数値で色を考えている訳ではなくて、Phoshotopなどで実際に目で色を見ながらああでもない、こうでもない、と変えていってますもんね。
なんかデモサイト作って、試してみるかぁ。