幅いっぱいの要素から左右のマージンを引きたいときに、こういう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のサポートブラウザ

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

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ

テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala

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などを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画

スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ

TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」で発表したスライドです。 https://techfeed.io/events/techfeed-experts-night-26 Zennの記事でも詳しく解説しています。 →…

カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、

はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と思いましたが、全然違いました。h1要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。 下記のようにボーダーや背景をボックスからはみ出して配置できます。

3D in CSSPlanted: Jan 2023 Tended: Jul 2024 Status: sprout Tended: Jul 2024 Hits: 1108 Intended Audience: Front-end developers The perspective property enables a 3D-space for child elements. Its value determines the strength of a child's z-transform effect. Large perspective values cause small transformations, small values cause large transformations.

（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。

CSS設計って最近こういう感じだと思うんですけどどうですかという話です。BEM、CSS Modules、CSS in JS、Tailwind CSSとか色々ありますがどういうふうに捉えればよいのだろうという内容でした。 Youtubeアーカイブ https://youtu.be/8zZKdDIa…