先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。 このスクロール駆動のダイナミックアイランドをCSSで実装するテクニックを紹介します。下記のアニメーションは少しゆっくりめにしています。 ダイナミックアイランド（Dynamic Island）とは、iPhone 14 Proで実装された機能で、カメラのパンチホール部分のスペースを利用して実行しているアプリのアクティビティを表示します。サイズはアプリごとに最適化されます。 参考: iPhone 14 ProのDynamic Islandの使い方 | Appleサポート で、今回のiPhone 15 Proのページにスクロール駆動のダイナミックアイランドが多数実装されています。コ

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

はじめに みなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？ 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、displayプロパティに2つの値を入れることができるようになることがわかりました。 ※ まだ、Firefox 70以上・Safari 15以上でのみ再現できます。(2022年１月20日) そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。 背景 まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。 最近displayプロパティに

Defensive CSS Practical CSS and design tips that helps in building future-proof user interfaces. @DefensiveCSS Introduction to Defensive CSS An explanation of the concept of defensive CSS, what it means, why it's useful and how it applies to different areas in the design process.

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ

Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi

CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/

iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと

いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます

by Scott Domes How Flexbox works — explained with big, colorful, animated gifsFlexbox promises to save us from the evils of plain CSS (like vertical alignment). Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging. So let’s take an animated look at how Flexbox works, so we can use it to build better layouts. Flexbox’s underlying principle is to make layout

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…

本書はデザインの手引書ではありません。――「はじめに」より 本書では、デザインに焦点を当てるのではなく、「いかに問題を解決するか」がコードで示されます。視覚効果、ページ構造、ユーザーエクスペリエンスといった8つのカテゴリーから47の項目を挙げ、日々直面する現実的な問題――同じことを繰り返さず（DRY）、保守性、柔軟性に富み、軽量かつ標準に準拠したCSSスタイル設計を実現する――をコーディングで解決していくテクニックを学ぶことができます。解決策を発見するまでのプロセスを理解することが課題解決までの近道であるという考えのもと、背景にある考え方までひもといて解説。すでにCSSを使っている中・上級のCSS開発者を対象とした本書は、CSSで実現できることを広げてくれる一冊です。 推薦の言葉 はじめに 謝辞 メイキング 本書について 1章　イントロダクション Web標準は敵か？ 味方か？ CSSコーデ

（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ

<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'"> と記述すると、PreloadでCSSを取得して、読み込みが終わったらstylesheetを適用させるみたいな感じになる。Preloadはレンダリングをブロックしないので、非同期にCSSを読み込みつつ、読み込み終わったら適用させるみたいなことができる。シンプルでいい。 これは Preload: What Is It Good For? の MARKUP-BASED ASYNC LOADERの箇所に書いてある話で、現在はChrome Canaryのみで対応されていて、問題なければ4月中頃にChromeで使えるようになるらしい。 Preloadについては、仕様には下記のように書いてある。 The preload keyword