- Meguro.cssに参加してきました
| タイトル | 発表者 |
|---|---|
| 雑誌風レイアウトをCSS Grid Layoutでリファクタリング | @c_re |
| CSSフレームワークを自作してみた話。 | @kokushing |
| CSS と Shadow DOM | @ktsn |
| outline: none; | @yamanoku |
| Marqueeタグでゲームを作りたい | @bug_ojisan |
| word-wrap周りのベストプラクティスを考えてみた | @masahiko888 |
雑誌風レイアウトをCSS Grid Layoutでリファクタリング
- @c_reさん
雑誌っぽいレイアウト
前提
- 既存のflexboxをGrid Layoutに
- レスポンシブに
苦労したとこ
- IE11対応苦労した
- grid itemに指定したmargin/paddingがおかしい
- grid containerに対するalign-item, grid itemに対するalign-selfが効かない
よかったとこ
- ゴードが読みやすくなった
- レスポンシブはモバイルファーストで組んだ方が楽
CSSフレームワークを自作してみた話。
- @kokushingさん
CSSフレームワーク使ってて
- 使いづらいなと思うところがある
- 記述の癖
- 使わないスタイル
- 日本語つまってる
- デザイン好みじゃない
- -> 自分で作った
自作フレームワーク
UNITS
- コンポーネントベース
- 日本語表示最適化
- MaterialDesign風
Uny
- 柔軟性を意識
- SCSSを採用
- スタイルの一括調整
- メンテナンス性
- pxではなくremを使ってフォントサイズ管理楽になった
Unim
- まだ公開してない
- レイアウト用、テーマ用、カラー用のスタイルに分割
- 日本語での表示に特化
mono.css
- 2kbの軽量フレームワーク
jpn.css
- bootstrap合わせて使うと日本語が読みやすくなる
CSS と Shadow DOM
- @ktsnさん
ShadowDOM
使ってみって
:root { --text-color: red } var(--text-color);
- 外から自由にスタイルを変えたい
;;part``::themeが提案中
対応状況
outline: none;
- @yamanokuさん
outline
- 輪郭線
outline: none;- フォーカスした要素の輪郭線を消す
outline: none;なぜよくない？
- 現在位置わからなくなる
- a11yが悪くなる
- http://www.outlinenone.com/
- とはいえデフォルトのフォーカスはいけてない
マウスとキーボードを別にする
forcus-visible- キーボード操作でフォーカスしたときだけスタイルを当てる
- 使えないブラウザがほとんど
- jsライブラリ
まとめ
outline: none;をする前に一旦立ち止まろう- 問題なければデフォルトでいいとおもう
- スタイル変えるならよく考えないといけない
- いろんなサイトをタブキーで移動してみよう
Marqueeタグでゲームを作りたい
- @bug_ojisanさん
Marqueeタグ
- 廃止されたHTMLタグ
- アクセシビリティが悪い
- 横に動くやつ
- 斜めとかも動かせる
Marqueeタグの可能性
ゲームとか作れそう
パラメータは変数ではないので衝突判定とかできない
- CSS in JSで作り直す
- remarquee
remarquee
- 衝突判定したい
- Reactベースで
- 横に動くだけで100%追従してるものはない
word-wrap周りのベストプラクティスを考えてみた
- @masahiko888
word-wrap
- 固定幅の要素内で文字が横にはみ出させずに折り返したい
word-wrap: break-wordword-wrap: break-all- break-wordでダメな時に安易にbreak-allしてはダメ
- 考えないと行けないパターン
- 英字の連続
- 、。…の連続
- 、。…の禁則処理
どうしたらよいか
- 基本は
break-word - 禁則処理が発生しないところは
break-all