[B! CSS] d4-1977のブックマーク

コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

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

d4-1977 2023/06/04

FLOCSSに似ている気がします。FigmaてAutoLayout使うときもこんな感じ。だから、相性はいいと思うんだけれど、関係者全員が理解しておかないと上手くいかない気はしています

React
CSS

リンク

A CSS carousel with snapping points and a scroll-linked navigation

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 rem ember: all the snippets work only on Chrome 94+. Why a carousel? Well, I'm aware that carousels are probably the most

d4-1977 2022/06/05

気になる

リンク

Chakra UI で MDN Web Docs の CSS レイアウト料理帳をやってみた | DevelopersIO

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

d4-1977 2021/10/30

「CSS レイアウト料理帳」なんてコンテンツ知らなかった！これは良さそう

リンク

テスト優先度をあげたくなる実話 - フロントエンド版 -

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

d4-1977 2021/10/17

どんなメリットがあるのかハッキリしてくるとコストと見合うか？を判断できるのでいい！

リンク

プログラムによるレイアウト制御のための CSS Grid を考える

この記事は、既存の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:

d4-1977 2021/10/16

Grid をもっと上手くやりたい… サンプルを何回か作ったらいいのかなあ

CSS

リンク

『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja

友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍﹃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

d4-1977 2021/10/16

数年、なんだかんだとマークアップの仕事を多かれ少なかれやっているので、好きなんだろうなあって思います。なので、読んでみたい一冊です

リンク

ツクリンクのCSS設計と書き方

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

d4-1977 2021/09/26

そうですね。あとは、&__は辞めたい。検索しにくいから。jsのみのクラスは、data属性で指定するとか、WAI-ARIAで状態管理したりしてます。 ●CSS ●運用

リンク

Recruit Tech Blog | 株式会社リクルート

"素うどん方式"を活用したら爆速でサービス構築できた件 2024.04.26 PdM コーポレートシステム構築社内ICT 素うどん開発方針

d4-1977 2021/09/18

命名の難しさからは、逃げられないのかあ。認識合わせが必要なのを感じやすいので、運用には組織によるところも感じました

CSS

リンク

ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG

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

d4-1977 2021/08/22

リンク

これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック

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

d4-1977 2021/08/22

リンク

実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック

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

d4-1977 2021/08/22

あとで試してみたい。よく見かけるけれど、なんだか複雑な実装を見かけていたけれど、色々考慮していることがあるのがわかる話

リンク

それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita

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

d4-1977 2021/06/13

こちらも。まだまだReact以降のCSS設計については決め手がない感じでもあるような印象

CSS

リンク

色々書き比べた結果Tailwind CSSにしたという話 - Qiita

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

d4-1977 2021/06/13

Code Gridの人の話だった。Tailwind CSSはともかく？Reactを使うか使わないかでCSSの設計が大きく変わるのは、デスヨネーって気持ちになりました。新卒研修するならReactあり無しで研修内容が異なるよね

リンク

CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる

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

d4-1977 2021/06/12

まだまだ先の機能だけれど、気になる

リンク

CSS コンテナクエリ（@container）の便利な使い方を解説

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

d4-1977 2021/05/16

実装されるブラウザが増えてきたらいいな

リンク

Scoped CSSにおけるCSS設計手法 - ICS MEDIA

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、

d4-1977 2021/04/25

リンク

CSSアニメーションとtransform-origin

はじめに CSSアニメーション以外でのtransf orm-originの使い方ありますか？ transf orm-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: #

d4-1977 2021/04/25

リンク

ウェブデザインにおけるline-heightについて

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

d4-1977 2021/04/24

line-heighiは、視認性に関わる大切な値なので注意したいです。Figmaで単位が入っている時があるからコピペされないように変えたいけれど、viewer向けのプラグインないし、あの表示される箇所は変更出来ないらしい

リンク

ユーティリティーファーストとTailwind CSSのススメ - Qiita

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

d4-1977 2021/04/04

React触り始めて、悩ましいなあ、って思っていたのがCSS の設計のこと。大前提にきちんとコンポーネントを分ける、設計するってところ。以前のCSSの設計がコンポーネント設計になったのでは？と思う。あとは、文字数…

リンク

上marginか下marginか、どちらに統一すべきかの結論｜DESIGN REMARKS [デザインリマークス]

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

d4-1977 2021/04/03

隣接セレクタ使っちゃうでもなあ、隣接セレクタ知られていない、っていう課題もあります

CSS

リンク

はてなブックマーク

タグ

関連タグで絞り込む (172)

CSSに関するd4-1977のブックマーク (615)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス