- Meguro.css #6 @ oRoに参加してきました。
| タイトル | 発表者 |
|---|---|
| レガシーフロントエンドで頑張ってCSS設計した話 | etawin |
| CSSイラストレーション | deren @study_dedede |
| 段組と印刷の地雷 | 吉川雅彦@行程さん社長 @masahiko888 |
| すたいるQ | Ko.Yelie (エリー) @ko_yelie |
| Scoped CSS + RSCSS のすすめ | すわくん @ztrehagem |
レガシーフロントエンドで頑張ってCSS設計した話
- etawinさん
従来の環境
- CSSトランスパイラなし
- JavaScriptUIライブラリなし
改修後
- stylus
- なぜSassじゃないか
- JSっぽく変数書ける
- CSSプロパティライクにmixinを表現できる
- BEM
工夫
実装序盤
- 無理して共通化するよりも愚直に書いた方がいいケースも多い
- 雛形になるクラス作ってそれプラスαって感じで使うと良かった
実装中盤
- 意味のある単位であとからまとめていった
- stylusのmixinが便利
実装終盤
- 抽象のしかた細かく考えだすと不毛な時間に
- 何者かでなく何を指し示すかで分類
最終的な構造
- デザイン規約
- 雛形クラス
- CSSクラス
CSSイラストレーション
- derenさん
CSS/JS学びたい
- CodePenのぞくと面白いと教えてもらった
- CSSだけで作品を作れる
私流イラストレーション
- 1.下絵を書く
- 2.パーツごとにdiv化
- BEMでつけるといい
- クラス名詳細に書いてるのでぱっと見でわかりやすい
- デメリットはクラス名が長いことくらい
- 3.パーツの形をひたすら制作
- before/after使うとタグが無駄に増えないからいい
よく使うプロパティ
overflow
- はみ出た要素の表示方法を指定
overflow: hidden;-はみ出た要素非表示
transform
- 要素の表示位置の変更
transform: translate(10px, 10px);top: 10px;left: 10px;と同じ
transform-origin
- 中心点の変更
CSSで何か作りたい人
https://codepen.io/challenges/codepen.io
段組と印刷の地雷
- 吉川雅彦さん
段組みを印刷
- 段組みをプレビューして印刷するというものを作った
- すべてのブラウザに対応できない
- PuppeteerとヘッドレスChromeでやるとよさそう
難しかったところ
- 紙の余白を指定したい
@pageで指定
- 文字が途中で切れてしまう
display: blockとかdisplay: tableで対応
- h2/h3のサブタイトルのあとで改行したくない
break-inside: avoid使った
- PDF印刷したら文字が欠ける
- ウェブフォント適用で解決
- Androidで絵文字を入れると1MBくらいファイルサイズが増える
- わからない・・・
まとめ
- 段組み+印刷大変
- CSS/JS/デザインなどなどで解決していく
- 割り切りも大事
すたいるQ
- Ko.Yelie (エリー)さん
Q1
- Q
- margin/paddingを全て%で指定した場合基準になるのはそれぞれ親要素?自身の要素
- A
- どの方向で指定しても全て親要素の幅が基準になる
Q2
- Q
- flexで横に並べた要素の最後だけ右寄せにしたい
- A
margin-left: autoをつけると右寄せになる
Q3
- Q
- transformにいろいろ指定した場合にどうなるか
- A
- transformのプロパティは左から順に適用されていく
Scoped CSS + RSCSS のすすめ
- すわくんさん
ScopedCSS
RSCSS
- BEMの簡単版みたいなやつ
- シンプルな規則
- Components
- Elements
- Variants
- 書きやすい読みやすい捨てやすい
ScopedCSS + RSCSS
- より安全なScopedCSS
- より単純なRSCSS