社内勉強会用 またしても破綻しがちな z-index の設計を考える。 --- 【質問への解答】 Q. Sassのmapでの管理はどうですか？ 使用しなくて良いと思います。 理由としては、z-index を map で定義したとしても @each するわけでもなく旨味が無…
font-size-rem.md font-size には rem を使うべきかどうかについての見解 結論 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。 ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。 結論に至った背景 「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。 font-size だけ rem を指定すればいいという訳ではなく、文字拡大に伴ったレイアウトの変更に耐えうる設計とする必要がある。つまり、font-size だけでなく文字の拡大に依存する余白やサイズなどもフォントサイズを基準とした相対値（remやemなど）で指定する必
Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。 これらを使用すると、これまでJavaScriptなしでは実装できなかったカルーセルをCSSだけで実装できるようになります。その実装方法、CSSで実装したさまざまなカルーセルを紹介します。 Carousels with CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ::scroll-button()と::scroll-marker()の新しい疑似
2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。 たとえば、次のCSSでテキスト上下の余白を調整できます。 .selector { text-box: trim-both cap alphabetic; } ※ただし、フォントによります。 本記事では、上記で指定した各プロパティの使用方法と具体的にどのようなデザインの実装に役立つのか、日本語フォントの場合を中心に紹介します。 テキストの上下のスペースとは？ 今回調整ができるようになったテキストの上下のスペースとは何でしょうか？ このスペースはテキストにline-heightプロパティを設定した際
CSSの関数って、便利なものが多いですよね。calc()が登場したときも衝撃でしたが、最近ではattr()関数がパワーアップしたり、レスポンシブ対応に必須のmin(), max(), clamp()関数、ライトテーマとダークテーマのlight-dark()関数、ほかにも:is()や:where()といった疑似クラス関数、sin(), cos(), tan()などの三角関数もCSSで使えます。 そして2025年、これまでとは全く違う新しい関数がCSSで使えるよう開発が進んでいます。新しい関数はカスタム関数で、自分オリジナルの関数をCSSで定義して使用できます。 CSS Custom Functions are coming by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのカスタム関数とは C
scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。 scroll-state() はコンテナクエリの一種であり、コンテナ要素のスクロール状態に応じてスタイルを変更できます。 よくある使い方としては、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。従来は要素が sticky によりスナップされているかどうかを JavaScript を使って判定する必要がありましたが、scroll-state() を使うことで CSS だけで実現できます。 スクロールがスタックされている状態 はじめに con
ポップオーバーのネスト 複数のポップオーバーが同時に表示されることはないルールには例外があります。ポップオーバーがネストされている場合です。 <button popovertarget="popover1">Show Parent</button> <div id="popover1" popover> <p>This is Parent</p> <button popovertarget="popover2">Show Child</button> <div id="popover2" popover> <p>This is Child</p> </div> </div> 子のポップオーバーは親のポップオーバーの子孫要素として存在しているため、子のポップオーバーが表示されている間に親のポップオーバーを閉じることはありません。 ポップオーバーのネストは popover=hint 属性を使用
貼り付く見出し 貼り付く見出し スクロールしてこの見出しが画面上部に貼り付いたときだけ、見出しの下に境界線を出したい。 技として、境界線用の要素をいっこ用意して、それを見出しの裏に忍ばせておく方法がある。見出しが画面上部に貼り付いたときに、下に境界線が出てくる。 画面上部に貼り付いたときに境界線が下に出る 貼り付く見出し 貼り付く見出し どうなってるかというと、背景色を透明にするとこう。 見出しの要素に margin-top: -1px; をつけることで、境界線の要素を覆い隠して見えなくしておく sticky の top の値を、見出しの縦幅 + 1px 分にして、 1px 下に貼り付くようにする 境界線が躍り出る空間を得るために、外側の包む要素の縦幅は、見出しの縦幅 + 1px 分にしておく むずいけど、これで、見出しが貼り付いたときに、境界線がちょうど背景色のすぐ下に躍り出る。 こうい
今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のApache License 2.0に基づいて翻訳しています。 はじめに コンポーネント: field-sizingプロパティ コンポーネント: interpolate-sizeプロパティ コンポーネント: details要素 コンポーネント: details要素のスタイル コンポーネント: Anchor positioning インタラクション: スクロールバーのスタイル インタラクション: @v
Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。 Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで tailwind.config.js で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。 例えば以下のような tailwind.config.js があるとします。 module.exports = { theme: { extend: { colors: { primary: "#ff0000", }, }, }, }; これを新しく、CSS の変数として定義で
幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ
CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？ たとえば、下記のようにテキストの量によってサイズが異なるボタンです。 これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。 Animate to height: auto; in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに autoなどのキーワードをアニメーションさせる方法
美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Generator – CSS & SVG Export ツールを紹介する前に、なぜグラデーションがくすんでしまうのか。 PhotoshopやFigmaなどで幅広い色相のグラデーションを作ろうとすると、グラデーションの中央にグレーのデッドゾーンができてしまうことがよくあります。 左: グレーがあるグラデーション、右: グレーを回避したグラデーション このグレーのデッドゾーンを避けるには、グラデーションに使用するカラーは大きなカーブ（直線はダメ）を描いて補間する必要があります。 そしてここで紹
CSSの実装に便利なVS Code用の機能拡張がリリースされました！ レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。 Clamp It! -GitHub Clamp It! -Visual Studio Marketplace レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 Clamp It!の使い方 Clamp It!のインストール レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 レスポンシブ用のフォントサイズを設定するには、CSSのclamp()関数が便利です。たとえば、ルート要素が16pxで、スクリーンのサイズごとにフォントサイズを変えるとします。 480pxのスクリーン: 1.rem 16.8px 800pxのスクリーン: 1.25rem 20px 100
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発者は <s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
