LoginSignup
17

More than 5 years have passed since last update.

PL(プロジェクトリーダー)を支える技術(CSS篇)

Posted at

はじめに

治療ノートのフロントエンドエンジニアの @uemurakenta です。
今年もあと少しですねということで、フロントエンド界隈は今年もてんやわんやだったなぁと思い出してみると、node.jsがio.jsと統合されてv4.0がリリースされたと思ったらすぐにv.5.0がstableになったりBootstrapBabelやSassを導入したりnpmがフロントエンドのpackageを受け入れる発表をしたのに対して、Bower側はBowerは元気ですと高らかに宣言したのは記憶に新しいですね

これから書くことと全然関係ないので本題に入ろうと思います。

医療業界のあたりまえを発明するために

少し事業の話になりますが、治療ノートは「治療法を選択できる世の中」を実現するためのサービスです。
現在リリースから半年くらいで、主に、治療法体験談医療に関するコラムなどを展開しています。

ただ、新規事業が当初の計画通りうまくいく保証はありません。
前述の医療に関するコラムなどは当初の予定には無かったものです。

当初の予定

リリース時PLから

とにかく早く出したいです。早く出して感触をつかみたい

と言われていたので、さっさと作るんなら、Bootstrapや、semantic UIなどのUIフレームワークで充分だったかもしれないのですが、新規事業は小さく出して、細かいレベルのピボットを繰り返していくものだと思っていたので、出来るだけライブラリの依存度を低くしようと思って下記のような構成にした。hogehuga.c-notes.jp,foobar.c-notes.jpなどにheaderfooterのデザインを共通化させるために大掛かりなUIフレームワークが必要になるのを避けたい意味合いが強い。また、googleがレスポンシブ・ウェブデザインを推奨していることを受けjpmobileなどのgemは利用していない

c-notes.jpのCSSパッケージ構成

パッケージ(Ruby Gems) 用途 当初の所感
normalize-rails ブラウザ間の誤差を無くす 問題なし
sass-rails sassを使いたい map便利。モジュールや要素でファイルを切り分けて@import
burbon sassのmixinライブラリ 問題なし
neat グリッドレイアウト 問題なし

半年経過

PL曰く

コラムを始めましょう do do do

ここでc-notes.jpにコラムも持たせるか、blog.c-notes.jpなどを新設するかの議論があったが、c-notes.jpに持たせることにした。

パッケージ(Ruby Gems) 用途 半年運用してみた感想
normalize-rails ブラウザ間の誤差を無くす 問題なし
sass-rails sassを使いたい cssnext気になりだし始める
bourbon sassのmixinライブラリ 実はそんなにmixin使ってないのと、制限なく使うと当たり前だけどどんどん依存する
neat グリッドレイアウト _grid.scssとかに依存をとどめておくのがよさげ

半年間で変わったこと

  1. sass-railsもいいけどcsnext気になるなぁ
  2. bourbonのmixin実はそんなに使ってない
  3. neat便利だけど使い方間違えるとcssの記述が@include media($hogehuga)だらけになる
  4. コラム、お薬検索など、医療に関するコンテンツが増えた
  5. チームにsassが書けるデザイナー @htmlmogmog 登場

半年間の学び

  1. レスポンシブ・ウェブデザインは一定の効果があると思う レスポンシブ? アダプティブ? デザイナーにとってのベストな選択肢とは
  2. neat使うためだけになってしまってるbourbonがちょっと…
  3. c-notes.jpのコードは安定してきているので、今後サービスの展開に応じて治療ノート共通デザインcssを切り出した方がいい気がしている(COOKPADさんのsaraみたいなやつ)

今後の準備

PLは言うかもしれない

〇〇に向けた動画配信サービスやバツバツ向けのECサイトが作りたいです!

半年間の学びと今後の展望からしても、治療ノート内で共通で取り扱うデザインCSSがそろそろ必要そうで、それには出来るだけ外部パッケージの依存を減らしたい。今の構成のままでもいいのだけどcssnextの動向とかも含めこんな感じにしたらどうかという案が下記

パッケージ(npm) 用途 懸念
normalize-css ブラウザ間の誤差を無くす まだ分からない
postCss bourbonやsassが担ってきた部分。autoprefixer、@importや変数を扱うライブラリなど必要に応じて まだ分からない
Lost Grid グリッド・システム まだ分からない
postCssに関してはこちらに詳しく書かれているので参考にしてください

Lost Gridに関して日本語の記事が無かったので簡単に解説

Lost Grid に以下のようなことが書いてある

Lost Grid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. You can think of it like the Autoprefixer of grid systems.

It is built upon years of studying and building grid systems with tons of community feedback.

It makes use of calc() to create stunning grids based on fractions you define without having to pass a ton of options.

I can tell you with no ego, this is my finest grid.

以下訳(適当ですすいません)
Lost Gridはすげー強力なグリッドシステムを提供するよ。グリッドシステムのAutoprefixerみたいな感覚で使ってね。vanilla CSSでも動くよ
みんなからのフィードバックを受けて結構頑張って作ったよ
css3のcalc()関数をベースに作ってるからね
良かったら使ってね

calc()かと思って一応 caniuseしてみた。IE8はいいとしてもAndroid Browserがちょっと…と思ったけど環境は常に変化するものと信じ突き進む

使い方

lostのページからmasterブランチをcloneしてきてnpm install&gulpしたらpostCssのバージョンが古いよと怒られたので適当にnpm install --save postCss@latestとかしないと動かなかった

レスポンシブ

@media()の部分はbreakpoint指定。基本的にはlost-columnに適応させたい分割を書けばよさ気

hoge.styl
  .responsive
    background: #42CAFD
    div
      lost-column: 1/1
      background: darken(#42CAFD, 10%)
      @media (min-width: 500px)
        lost-column: 1/2 全体の1/2に分割
      @media (min-width: 800px)
        lost-column: 1/3
      @media (min-width: 1100px)
        lost-column: 1/4
ネスト
hoge.styl
  .nest
    background: #8EB19D
    div
      lost-column: 1/3
      background: darken(#8EB19D, 10%)
      div
        lost-column: 1/2
        background: darken(#8EB19D, 20%)
ワッフル

susyとかでいうgallery
折り返すタイミングをしていするためにneatみたいに@include omega(3n);しなくていい

hoge.styl
  // Waffle Grid
  .waffle
    background: tomato
    div
      lost-waffle: 1/3
      margin-top: 0
      background: darken(tomato, 10%)
      line-height: inherit
      padding: $block

使ってみた所感
- postCssはprocessorで依存関係を明記出来るので素敵
- lostを使うところだけes6みたいに @import `lost` from 'lost'みたいにグリッド処理を記述するcssだけに読み込ませられたらいいなぁと思った
- calc()どうなんだろう

まとめ

  • 新規事業は何が起こるか分からないので柔軟にストレッチさせたり、減らしたりできる開発が望まれる(柔軟な対応が出来ればライブラリの選定は何でも大丈夫だと思う)
  • 今回はlostを使ってみたがbourbon,neatもpostCss版でてるみたいで期待(´∀`∩)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17