Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib

Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階　「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで

line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完

CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 Intrinsic Sizing In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSでのサイズ指定方法とは 外因性サイジング 内因性サイジング: min-content 内因性サイジング: max-content 内因性サイジング: fit-content ブラウザのサポート状況 実際の使用例 終わりに CSSでのサイズ指定方法とは CSSには、内因性と外因性の2つのサイズ指定方法

これを読むあなたはCSSを書く方だと思いますので、お尋ねします。 あなたは普段、幅と高さを持つ、クラシカルなスクロールバーを表示していますか？ していないのだとしら、それはどうしてなのでしょう。 OSの初期設定から変えていないだけかもしれません。スクロールバーを醜いものだと考えていて、スクロールするときだけに出現する控えめなスクロールバーを好んでいるからかもしれません。 あなたがどう考えていようと、現実にはそのような、ユーザーの操作に応じてオーバーレイで表示されるスクロールバーが選択できない環境も存在します。 そういった環境では、スクロールバーはウェブページ上で幅と高さを持ち、レイアウトに影響を与えます。 それを忘れて書かれたCSSは、オーバーレイ・スクロールバー前提のレイアウトであったり、不必要なスクロールバーの存在を生み出してしまうことがあります。 スクロールバーを表示、つまり、ウェブ

ニューモーフィズム（Neuomorphism）が去年の暮れあたりから新しいスキューモーフィズムとして注目されています。その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。 このニューモーフィズムをCSSで実装したフォームのデモが公開されていたので、紹介します。 Neomorphic Form ニューモーフィズムとは ニューモーフィズムの繊細なデザインでつくられたフォーム ニューモーフィズムのデモ ニューモーフィズムとは ニューモーフィズム（Neuomorphism）という言葉は、UIのトレンドで「新しいスキューモーフィズム」としてJason Kelleyがコメントした「Neuomorphism?」がその起源です。 その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。ニューモーフィズム

CSS Advent Calendar 201918日目に空きがあったので埋めます。 最終日も私です。 QiitaやGoogleでremと検索すると、間違った使い方をしている記事がたくさん出てきます。 remはroot emの略！ って分かってるならRootを潰すな！ rootはユーザー設定により変動するかもしれないものです。 ユーザビリティを考えるなら、きちんとユーザーの設定に対応出来るようにしましょう。 よく見る間違った使い方 間違った使い方の言い分 モダンブラウザの初期値は16pxです。 だからrootを62.5%（10px）にすれば1rem = 10pxで分かりやすいです。 15pxは1.5remと書きましょう！ [疑問] 全部pxじゃだめなの？ 1rem = 10pxより全部pxで書くほう分かりやすい。 15pxと書いたほうが楽だし。 なぜこんな変な書き方が流行ったのでしょうか？

はじめに 業務でCSSを書くようになってから、いくつかの月日が流れました。 CSSを学び始めた当初は、要素をキレイに横並びにすることすら手こずっていましたが、最近は随分スムーズにデザイン通りのスタイルを書くことができるようになりました。 今日に至るまで、過去の自分が書いたCSSへの後悔の念で眠れない日々や、原因のよくわからない表示崩れの悪夢にうなされる夜もありました。1 これからCSSを学ぶ人、CSSにはあまり詳しくないけどたまに書くよという人にそんな思いをして欲しくない。できたらCSSのことを好きになって欲しい。 そんな思いで自分がスタイルを書く時・レビューをする時に気をつけていることを（自戒も込めて）まとめまてみました。 🤔 良いスタイルってなんだろう？ スタイルを書く時に大切だと考えていることは3点あります。 開発効率 デザイン再現性 パフォーマンス 開発効率 色々な記事や本でも引

DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。 私が業務で携わるのはおもに、メディアサイトやコーポレートサイトのようなページ数がたくさんあるサイトの制作です。そのようなサイトでは特に、ページのテンプレートやコンポーネントをいかに堅牢な設計にできるかが重要だと感じます。 連想されるトピックとしては「CSS設計」がありますが、私見としては、CSS設計はセレクタの書き方やコンポーネントの整理の方法について述べたものであって、いかにしてレイアウトを組み立てるかという議論にはあまり踏み込んでいません。 具体的には、どのように宣言を組み合わせるか、どのようにレスポンシブにするかのような曖昧な領域については、実装において必ず意識される部分であるにも関わらず言及される場面は少ないのではない

Open standards for building event-driven applications in the cloud

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull in third-party packages, and split your Sass into manageable “partials,” it has a few limitations: @import is also a CSS feature, and the differences can be confusing If you @i

I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version. I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want! To be super clear, this is a reset th

デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する

A Free Gallery of Fantastic and Unique CSS Gradients.

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。 CSS Gridの使い方ガイド、チートシート、ゲームまとめ Grid Garden CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。 Bonus – CSS Dine

前置き CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、 回答内容を記事として残します。 昔、会社のOJTで学んだことの共有となります。 1. 基本的にmargin-topを使う 理由としては、そちらの方が後々調節しやすいからです。 また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。 2. どうしても無理な場合にbottomを使う margin-bottomは他の方法ではどうしても設定が無理なケースのみ使いましょう。 3. 隣接セレクタをうまく使うとトルツメしやすい 特定の要素同士が並んだ時だけマージンを取る＝余白の打ち消し設定が不要になります。 設定の優先度 要素がいくらネストしても下記の優先度は変わりません。 この優先度で余白を設定していけば、margin-bottomの出番