「Meguro.css #4 @ oRo」に参加してきました

勉強会メモ
  • Meguro.cssに参加してきました

megurocss.connpass.com

  • Meguro.cssは#2以来の2回目の参加でした。
  • 実用的な話が多くて特にShadowDOMの実践的な話を聞けてとても勉強になりました。
タイトル 発表者
雑誌風レイアウトを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

unitscss.kokush.in

Uny

unys.github.io

  • 柔軟性を意識
  • SCSSを採用
  • スタイルの一括調整
    • メンテナンス性
  • pxではなくremを使ってフォントサイズ管理楽になった

Unim

kokushin.github.io

  • まだ公開してない
  • レイアウト用、テーマ用、カラー用のスタイルに分割
  • 日本語での表示に特化

mono.css

kokushin.github.io

jpn.css

kokushin.github.io

  • bootstrap合わせて使うと日本語が読みやすくなる

CSS と Shadow DOM

  • @ktsnさん

ShadowDOM

  • スコープが区切られたDOMを作れる
    • 外部のCSSは内部に影響を与えない
    • 内部のCSSは外部に影響を与えない
  • CSSが漏れない

使ってみって

  • reset.cssどうする？
    • shadowDOMごとに読み込む
  • 手っ取り早くリセット
    • all:initial;
    • all:unset;
  • テーマ変更
    • CSS Custom Property
: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ライブラリ

github.com

まとめ

  • outline: none;をする前に一旦立ち止まろう
  • 問題なければデフォルトでいいとおもう
    • スタイル変えるならよく考えないといけない
  • いろんなサイトをタブキーで移動してみよう

Marqueeタグでゲームを作りたい

  • @bug_ojisanさん

Marqueeタグ

Marqueeタグの可能性

  • ゲームとか作れそう

  • パラメータは変数ではないので衝突判定とかできない

  • CSS in JSで作り直す
    • remarquee

remarquee

www.npmjs.com

  • 衝突判定したい
  • Reactベースで
  • 横に動くだけで100%追従してるものはない

word-wrap周りのベストプラクティスを考えてみた

  • @masahiko888

word-wrap

  • 固定幅の要素内で文字が横にはみ出させずに折り返したい
  • word-wrap: break-word
  • word-wrap: break-all
  • break-wordでダメな時に安易にbreak-allしてはダメ
  • 考えないと行けないパターン
    • 英字の連続
    • 、。…の連続
    • 、。…の禁則処理

どうしたらよいか

  • 基本はbreak-word
  • 禁則処理が発生しないところはbreak-all