Meguro.css#4
https://gyazo.com/3ae3d76fb3114b7bcb98f66e3b9da8f1
01. 雑誌風レイアウトをCSS Grid Layoutでリファクタリング
flexboxレイアウトをGrid Layoutで書き換える
HTML構造を変える（マークアップは変えていい）
レイアウトと無関係な部分は変更しない
RWD対応する
ブラウザ
Chrome Dev ToolsのiPhone 6 / 7/ 8
gapは使わない
IE11バグ
grid itemに指定したmargin paddingの挙動がおかしい
grid containerに対するalint-item, grid itemに対するalign-selfが効かない
@mediaの中でgrid-areaを@forで書くとprefixが付与されない
外で@forにする
やってみて
コードは読みやすい
変則的な場合はgrid Itemに直接コンテンツを配置しない
IE11でつらいことになる
アスキーアート組も対応
モバイルファーストで組むのがいい
02. CSSフレームワークを自作してみた話。
GiG Inc.
CSSフレームワークを使っていますか？
便利だけど使いづらいときもある
記述法が違う
使わないスタイル
日本語見た目がダサい
デザインが好みじゃない
自分好みのフレームワーク作ろうか
UNITS
特徴
コンポーネントベース
日本語表示に最適化
属性セレクタ
マテリアルデザイン
良かったこと
勉強になった
属性セレクタ便利
npm公開したら1000DL
使ってくれた
駄目だったこと
cssnextが慣れない
イマイチ柔軟性がない
Uny
特徴
柔軟性を意識
組み合わせパターンに対応
変数を増やして一括調整に対応
良かったこと
pxではなくremを採用してフォント管理が楽になった
SCSSの採用でメンテナンス性が向上
テーマジェネレータを作った
駄目だったこと
既存のスタイルに変更を加えるときはビルドが必要
テーマの色が少ない
UNIM
特徴
レイアウトスタイル、テーマ用、カラー用のスタイルに分割
用途にあわせて使える
基本レイアウトスタイルはグリッドシステムと中心したスタイルを提供
日本語対応
思ったこと
特定の問題を解決するほうが需要ありそう
セレクタや擬似クラスをうまく使っていく
属性、隣接、否定疑似などはめっちゃ助かった
作ってみて楽しかった
03. CSS と Shadow DOM
Shadow DOM
基本的にDOM要素（API）
外側のCSSに影響されない
code:shadow.js
const shadow = el.attachShadow({mode: 'open'}):
CSSが漏れない => 管理が楽になる
実際にやってみて
ShadowDOMごとに読み込む必要
reset.cssとか
手早くリセット
all: initial;
all: unset;
テーマ変更
CSS Custom Property
--text-color: red;
変数
color: var(--text-color, blue);
外から自由にスタイルを変えたい
まだできないが、以下を提案中
::part
::theme
yamanoku.icon 発表
05. Marqueeタグでゲームを作りたい
株式会社リクルート
Keyframe animation
CSS in JS
React base Web廃墟
marqueeが足りない
横に動く
縦に動く
動き方も選べる
入れ子にできる
並打てる
障壁
パラメータは変数ではない
衝突判定
remarquee
二番煎じ
先人は横移動のみ
keyframe animation
MDNで仕様をみてみた
わかったこと
モード３種類
スピード指定
デフォルトで6px移動
secがない
移動幅を指定
ゲームをつくってる（最中）
06. word-wrap周りのベストプラクティスを考えてみた
起業準備中
句点で次の行で移動してしまうこと
word-wrap: break-word
単語が溢れないよう適切な位置
駄目なとき
inline-blockで囲まれたラベルやボタン
内容が定まらない時
テーブル（横幅が伸びる）
flexbox
floatやpostion: absolute
word-break: break-all
どっちをつかえばいいか
「、。…」がword-wrapのとき動かない