CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope

CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark

このたびエックスサーバー株式会社は、 分散型SNSのオープンソースソフトウェア(OSS) 「Misskey」の開発を支援することとなりました。 開発環境の提供や開発資金の援助を通じて、「Misskey」の開発・運営をサポートし、 弊社運営のVPSサービス『Xserver VPS』のインフラサービスとしての、利便性の向上へも取り組んでまいります。 ---------------------------------------------------------------------- ■開発支援の目的 エックスサーバー株式会社は、日本のインターネットの未来を支えることを理念に掲げ、 国内シェアNo.1（※1）のレンタルサーバーサービス『エックスサーバー』をはじめとした、 インターネットサービスを展開してまいりました。 「Misskey」は、「X（旧Twitter）」に替わるSNSとして昨今

本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説しています。 今回はMisskeyのWebクライアント（Misskey Web）におけるUIデザインの工夫や各種コンポーネントについて紹介します。 なお、「⁠デザイン」という語は設計という意味と、見た目・意匠という意味がありますが、この記事ではどちらも含みます。 Misskey Webの設計思想 Misskey Webの設計思想として、「⁠デスクトップでもモバイルデバイスでも同じように使えるようにする」というのがあります。 “同じように使える⁠”とは、機能や使い勝手といった面でもそうなのですが、コンポーネント（UIを構成する個々のパーツ）レベルの話も含んでいます。 現在はこのような設計思想で開発していますが、Misskey初期の頃は、デスクトップ版Webクライアントとモバイルデバイス

従来の決められたやり方から抜け出し、新しいことに挑戦し続ける。 まだ誰も経験したことのないスピードと柔軟性をもって、時代の変化・ユーザーニーズの変化に追従・先回りし、圧倒的に「便利で、オトクで、楽しい」社会を西日本から実現する先駆者-TRAILBLAZER-となる。 TRAILBLAZERについて知っていただくための会社紹介資料です。 わたしたちのビジョンや事業内容、JR西日本グループが有する個客接点やデータ、働く環境などを知っていただけます。 従来の決められたやり方から抜け出し、新しいことに挑戦し続ける。 まだ誰も経験したことのないスピードと柔軟性をもって、時代の変化・ユーザーニーズの変化に追従・先回りし、圧倒的に「便利で、オトクで、楽しい」社会を西日本から実現する先駆者-TRAILBLAZER-となる。

CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説

CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア

西芳寺は「調律と閃きの庭」。 苔寺と称される境内には悠然と時が流れ、 心を鎮めて自分自身と向き合ううちに、 心身が穏やかに調い、前へと踏み出す力が 湧き立つのを感じられるはずです。 開山１３００年の節目を迎える西芳寺は、 人とお寺の新しい関係を探求しながら、 あらゆる人々にとっての、 心のよりどころとなることを目指してまいります。

平均賃金に男女で37.5%の差があるということは、女性社員の収入は男性の約6割ということだ。 その要因の｢一例｣としてメルカリCHROの木下達夫氏は、給与水準が高いエンジニア職に男性が多いこと、また、女性が多い職種であるカスタマーサービスは福岡県など地方に拠点があり、東京基準ではなく現地で競争力がある報酬水準に設定しているためだと説明した。 メルカリの女性管理職比率は20.4%だが、管理職手当を出していないため女性管理職の少なさは平均賃金の差には関係ないとする一方で、｢高いグレード（等級）に女性が少なく、課題に思っている｣（木下さん）と話す。 国が定める男女の賃金格差の開示義務は、｢男性労働者の平均賃金に対する、女性労働者の平均賃金を割合（パーセント）で示す｣こと、｢全労働者・正規雇用労働者・非正規雇用労働者の区分で公表すること｣の2点だが、 ｢この算出法（平均値）では職種や等級による報酬

毎年夏コミに全日程で参戦し、炎天下に晒され続けた取材班が行きついた、究極の対夏コミ用装備 江川資具 2023年8月11日 いよいよ週末に迫った「コミックマーケット102」。現状では台風が直撃して暴風雨に見舞われるか、台風がそれて猛暑に見舞われるかという地獄みたいな2択。 ほど良く曇って、ミストシャワー程度に小雨が降って、風も吹いて、いい感じに涼しい……みたいなことになってくれねぇかなぁと思うが、たぶんそうはならないのだろう。 暴風雨コースはどうしようもないが、猛暑コースは対策で耐えられる。そこで、毎年10キロ超えの機材を背負って全日程に参加し、開会から閉会まで直射日光に晒されてなお、元気に生還し続けている当サイトのコミケ取材班が行きついた、ガチな夏コミ用装備を紹介しようと思う。 ・総勢1名 ちなみに取材班とは名ばかりで、総勢1名！　私だけだ。C94までは別の誰かが取材していたが、C95以降

Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン

レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。

まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ

TOPインタビュー【Misskey開発者syuilo氏】「楽しんでほしい」ピュアな思いがMisskeyを生んだ。異様な熱狂を放つSNSの今までとこれから 【Misskey開発者syuilo氏】「楽しんでほしい」ピュアな思いがMisskeyを生んだ。異様な熱狂を放つSNSの今までとこれから 2023年7月10日 2023年、Twitterからの移行先として一躍話題となった分散型マイクロブログプラットフォームサービス「Misskey」。その特徴は、楽しみ方の自由度の高さとユーザーの熱狂にあります。なかでも最大のユーザー数を誇るサーバー「Misskey.io」は登録者25万人以上（2023年7月9日時点）を抱えており、日々新しいネットミームが生まれるなど早くもひとつの文化を確立しています。 独特なユーザーが集まり異様な熱狂を巻き起こしているMisskeyとは何なのか？　開発者は何をつくりたくて、