React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ

I realized a #CSS only #slider – #carousel with a full-working bottom navigation thanks to • the new scroll-timeline feature • the native scroll-snapping / scroll-behavior • a step() animation-timing-function So far it works only on Chrome Canary codepen.io/fcalderan/pen/… Just remember: all the snippets work only on Chrome 94+. Why a carousel? Well, I'm aware that carousels are probably the most

はじめに おはようございます、もきゅりんです。 月からの啓示を受けて、Chakra UI の学習していました。 遥か昔に学習した CSS がまるで記憶になかったので、CSS: カスケーディングスタイルシート | MDN でざっと復習しました。 そして、コンテンツ内にある CSS レイアウト料理帳を見て、これを Chakra UI で対応してみるときっと良い総まとめになるゾ！と思ってやってみました。 そして、ついでにブログにしました。 ソースは こちら です。 なお、自分は AWSのソリューションアーキテクトではあるのですが、フロントエンドは見様見真似のお猿さんなので、クオリティへの期待は禁物です。 生暖かい目で眺めて下さい。 ついでに「よく、がんばったな。でも、こうしたらもっと良くなるぞ？ boy。」みたいなコメント貰えたら嬉しいです。 Chakra UI の使い方のベストプラクティスとか

Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS

この記事は、既存のCSSのレイアウトの文脈ではなく、「プログラムから制御されるレイアウト」をいかに綺麗に制御・生成するか、です。 複雑なSPAや何らかのオーサリング環境で、主に JavaScript の視点からレイアウトを扱うのに Grid をどう活かしていくか、という話。 grid-template-areas の視覚的な対応 IEがない世界では CSS grid のフル機能を使うことができます。 自分が grid を使う際、今まで grid-template-areas を気に入って使っていました。これは CSS の視覚的な情報が最終的な表示と一致する、という理由からです。 例えば、 svelte で書いた grid-template-areas を使ったレイアウト設定のコードはこんな感じになります。。 <div class="grid"> <div style="grid-area:

友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。 目次: 日本語版に寄せて 監訳者まえがき Chapter 1: 基礎 1–01: ボックス 1–02: コンポジション 1–03: 単位 1–04: グローバルスタイルとローカルスタイル 1–05: モジュラースケール 1–06: 公理 Chapter 2: レイアウト 2–01: Stack 2–02: Box 2–03: Center 2–04: Cluster 2–05: Sidebar 2–06: Switcher 2–07: Cover 2–08: Grid 2–09: Frame 2–10: Reel 2

はじめに この記事はツクリンクのエンジニアを対象に、サービスで利用されているCSS設計の概要を知り、実際にマークアップできるようになるためのドキュメントです。 社外にも公開することで、CSS設計と運用の一例として参照していただいたり、改善意見の募集、今後ツクリンクで一緒に開発していただく可能性のある方に開発体制をよく知っていただくことも期待しています。 疑問点、改善点などあればお気軽にコメントしてください。 ※ここで紹介した設計、運用は執筆現在のものです。記事の更新状況によっては実際の運用と異なる可能性があります。 CSS設計の変遷 現状のCSS設計の詳細の前にこれまでどのようなCSSが書かれてきたのかを説明します。 v1, 規則無し 初回リリース時はid, clsss, 要素型セレクタなどを複数使ったマークアップをしていました。 一部の古いページ、SP版のレイアウトで極稀に残っている可能

こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。

Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS or SVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カットアウトとは アバター画像で見かけるカットアウト カットアウトの実装 1: clip-pathを使用する カットアウトの実装 2: CSSのマスク カットアウトの実装 3: SVGのマスク アバター画像を重ねるカットアウト カットアウトの実装 1: clip-pathでマスク カットアウ

*2021 6/11追記　『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ

CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 コンテナクエリの背景 メディアクエリの問題点 コンテナクエリはどのように役立つのか？ コンテナクエリの基礎知識 コンテナクエリの使用例 コンテナクエリのデバッグ方法 まとめ コンテナクエリの背景 私がフロント

Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関する議論が活発におこなわれており、本記事では私たちが考えた方式を紹介します。本記事はVue.jsのSFC（シングル・ファイル・コンポーネント）でScoped CSSを利用しているものを想定しています。 CSS設計とは 基本的にCSSは常にすべてのページで読み込まれ、増えれば増えるほど相互に上書きし合う状態が起きやすく、他の言語に比べてかなり壊れやすい言語と言えます。 そこで登場するのがCSS設計です。BEMやSMACSS、

はじめに CSSアニメーション以外でのtransform-originの使い方ありますか？ transform-originと戯れたので今回はこのローディングアニメーションの解説を行います。 完成品 ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta name="robots" content="noindex"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ee</title> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background: #

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳

Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a

WEB制作のCSS設計において、marginのルールを上か下かどちらに統一すべきかという議論は色々なところで行われてきました。 私もWEBサイトの制作を仕事にしてから10年ほどになりますが、この問題を日常的に考えてきました。 世の中のデザイナーさんやコーダーさんの記事を読んでいると、いくつかの結論がありました。 ・下marginで統一派 ・上marginで統一派 ・状況によって上も下も使い分ける ・サイトごとにルールが決まってればいい これだと全パターンありますよね。数としては下margin派が一番多いと思います。 ある意味、ちゃんと設計してあれば良いっていう感じもします。 今回は私なりにベストだと思うルールを紹介してみたいと思います。 一文で表すなら、 「基本的に下marginだけど場合によって上marginも使う。上に配置される要素が変わる要素には上marginも使う。」 これを分解し