ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール 2025.02.22 Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。 ブラウザによる CSS のサポート状況の差異は、Web 開発者にとって頭痛の種です。新しい CSS プロパティや値を使用する際には、それがどのブラウザでサポートされているかを確認する必要があります。Baseline はそのような問題を解決するためのプロジェクトです。ブラウザで利用可能な JavaScript や CSS のブラウザのサポート状況を明確化することで、We
画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。 Get the screen width & height without JavaScript まず、元ネタは以下です。 Get the screen width & height without JavaScript CSSでウィンドウサイズの幅と高さを判別するには、CSSのカスタムプロパティ機能「@property」を使って「:root」の変数に入れる際に三角関数を使って取得します。 @property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>
scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す 2025.01.18 scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。
貼り付く見出し 貼り付く見出し スクロールしてこの見出しが画面上部に貼り付いたときだけ、見出しの下に境界線を出したい。 技として、境界線用の要素をいっこ用意して、それを見出しの裏に忍ばせておく方法がある。見出しが画面上部に貼り付いたときに、下に境界線が出てくる。 画面上部に貼り付いたときに境界線が下に出る 貼り付く見出し 貼り付く見出し どうなってるかというと、背景色を透明にするとこう。 見出しの要素に margin-top: -1px; をつけることで、境界線の要素を覆い隠して見えなくしておく sticky の top の値を、見出しの縦幅 + 1px 分にして、 1px 下に貼り付くようにする 境界線が躍り出る空間を得るために、外側の包む要素の縦幅は、見出しの縦幅 + 1px 分にしておく むずいけど、これで、見出しが貼り付いたときに、境界線がちょうど背景色のすぐ下に躍り出る。 こうい
ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Orbitの使い方 Orbitの特徴 Orbitは、サークル・放射状のラジアルUIを実装するために設計された初の汎用CSSフレームワークです。CSSの機能（cos(), sin()など）を使用してサークル・放射状のレイアウトを簡単に実装できます。 ランディングページをはじめ、ナビゲーションに使用したり、ダッシュボードや円形データなどで、ユニークで視覚的に魅力的で直感的なレイアウトを作成できます。 .orbit CSS class CSSの三角関数（sin()
CSSで特定の形に切り抜く（マスキングする）にはmask-imageプロパティが便利です。マスク用の画像をmask-imageプロパティを使って要素に適用すれば、その画像の不透過部分のみにマスキングできます。mask-imageプロパティに関連して2024年から使用可能になったmask-compositeプロパティを使うと、マスクの合成方法を指定でき、より幅広いマスク表現ができるようになりました。この記事ではmask-compositeプロパティについて解説します。 サンプルを別ウインドウで開く コードを確認する mask-compositeプロパティの値とそのマスク結果の違い mask-compositeプロパティは、複数のマスク画像をどのように合成するかの方法を指定するためのプロパティです。実はmask-imageプロパティは複数画像の指定にも対応しています。複数画像からマスク領域を生
Yu Gothic UIに text-spacing-trim を適用するとバグる を読んでいて、気になってしまったので、実際にYu Gothic UIのファイルの中身を開いて調べてみました。 発生している問題 回避策 原因 Yu Gothic UI 特有の問題？ まとめ 発生している問題 Yu Gothic UIは、Windows 10からプリインストールされているUI表示用フォントです。 手元の環境で確認したところ、Windows 11 23H2 (ビルド 22631.4317) 時点では、「Yu Gothic UI Version 1.93」がインストールされていました。 このフォントをChrome系ブラウザで利用すると、鍵括弧表示が崩れる場合があります。具体的には、 「abc」「abc」 のように、閉じ括弧・開き括弧が隣接するケースです。 」「 の部分ですね。この際に、閉じ括弧と開
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか？ 有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。 zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。 標準化されたzoomがNewly Availableに！ そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏 まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。 zoomに使い道がありそうな予感 CSSで要素を拡大する手段としてはtransform: scale
box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない 2024.08.11 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングはキーボード操作をしているユーザーにとって現在のフォーカス位置を把握するための重要な要素です。このことは WCAG 2.2 の 2.4.7 項目で要求されています。 (レベル AA) キーボード操
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。
ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>
CSSのdisplay: noneやvisibility: hiddenによって不可視状態になっている要素を、表示して即座にフォーカスしたいということがある。たとえば、初期状態では非表示になっている検索ボックスを、ユーザーのインタラクションに応じて表示するような場合。そうしたとき、通常では、スタイルを切り替えてすぐにfocusメソッドを呼び出すだけで良い。 <input type="search" /> input[type='search'] { display: none; &.open { display: revert; } } const searchBoxElement = document.querySelector('input[type="search"]'); function open() { searchBoxElement.classList.add('open'
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
