Reactで余白をどうスタイリングするか
最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切な padding を指定する 複数の同一のマージンには Stack、それ以外には Spacer コンポーネント 前提: 子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない まず前提として「子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない」です。 (太古に書いた記事から具体例を引用) 例えば、こんな感じのアイコンが複数並べたコンポーネントが存在するとします。 アイコンの間にはmarginが等間隔でありますね。 このmarginをアイコンコンポーネント内で定義していたとしましょう。 さて、他のページでこ
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
Demystifying styled-components
When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood. Knowing how it w
Understanding the CSS Specifications
You don't need to be a programmer or a CS major to understand the CSS specifications. You don't need to be over 18 or have a Bachelor's degree. You just need to be very pedantic, very persistent, and very thorough. A specification is not a manual. There is no excuse for badly written prose and please complain if you find some. But specs do target a specific audience. Starting from Zero J. David Ei
Mozilla Specification Positions
This page tracks Mozilla's positions on open Web and Web-related specifications submitted to standards bodies like the IETF, W3C, and Ecma TC39. Please remember, this isn't a commitment to implement or participate; it's just what we think right now. See dev-platform to find out what we're implementing. Want Mozilla's position on a specification? Find out more. legend The possible positions are: po
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
CSSにおけるマージンの相殺を徹底解説
CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。 この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 垂直マージンのみが相殺される 隣接する要素のみが相殺される より大きなマージンが勝つ 入れ子は
SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
Next.jsにおけるCSSの取り扱い方法 2020年9月版
はじめに CSSとしたがNext.jsにおけるスタイルの取り扱い方について。 公式ドキュメント見れば基本的なことはわかるのだがIssuesやDiscussionsを追わないと分かりにくいことも多いのでまとめる。 2020年9月版としたのはすぐにでも動きがありそうなため。将来的なこともなるべく記載する。 追記 2020/12/01 時点で特に情報が古くなっていないことを確認しています。 2020/12/10 Tailwind Support について記載しました。 Build-in CSS Support Basic Features: Built-in CSS Support | Next.js デフォルトでCSSのサポートがされている。かつては @zeit/next-css を導入する必要があったが今は必要ない。 Sassについても Before you can use Next.js'
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
Relearn CSS layout
Already purchased Every Layout, but lost your access? No worries. Add the email address that you used to purchase Every Layout and we’ll re-send your access link. Every Layout has helped thousands of developers and companies simplify CSS layout in their projects Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-indepen
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
元Webデザイナーのセキュリティエンジニアが警告する、CSSインジェクションの脅威 | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
※この座談会は緊急事態宣言以前に実施しました。 イエラエセキュリティの顧問を務める川口洋が、イエラエセキュリティを支える多彩なメンバーと共に、サイバーセキュリティやサイバーリスクの今を語り合う座談会シリーズ、第11回をお送りします。 川口洋氏は、株式会社川口設計 代表取締役として、情報セキュリティEXPO、Interop、各都道府県警のサイバーテロ対策協議会などで講演、安全なITネットワークの実現を目指してセキュリティ演習なども提供しています。 イエラエ顧問として、「川口洋の座談会シリーズ」を2019年に開始。サイバーセキュリティを巡る様々な話題を、社内外のゲスト達と共に論じ語ってきました（川口洋の座談会シリーズ)。 今回ゲストとして登場するのは、イエラエセキュリティのペネトレーション課に所属する馬場将次。Webデザイナーとしての経験から、Webに関するセキュリティへの鋭い視点を持つ馬場。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今どきのスムーズスクロール(2019年版) - to-R Media
Learn CSS | web.dev
How to debug CSS Grid with Chrome DevTools | Google for Developers
Flexbox Cheat Site
Icon Button CSS Styling Guide | Modern CSS Solutions