アイコンの置き場所が次期WordPressで一本化される

つくば市のホームページ制作会社

サイトにアイコンを一つ足すだけの作業が、案外ややこしい。テーマのフォルダにSVGを直接置く方法、プラグインが独自に読み込む方法、外部のアイコンフォントを呼ぶ方法が、同じサイトの中に混在していることは珍しくない。担当者が代わったあとで「この矢印はどこから来ているのか」を追いかけた経験のある人は多いはずだ。

8月19日に公開が予定されている次期WordPressで、この部分に手が入る。アイコンを本体側に登録しておき、編集画面からもテンプレートのPHPからも、さらにREST API経由でも同じ名前で取り出せる仕組みが、正式な関数として公開される。

これまでは各自で抱え込むしかなかった

アイコンを置くためのブロックは、ひとつ前のバージョンで本体に入っている。ただし、そこへ自社のロゴマークや業種特有の記号を足したい場合に、公開された入り口が用意されていなかった。開発者向けの告知によると、内部向けのクラスを無理に呼び出すか、プラグイン側で独自の一覧を持ち回るか、どちらかを選ぶしかない状態だったとされている。

結果として、ひとつのサイトの中に似たような管理方法がいくつも並ぶ。テーマの中にはあるのに編集画面の一覧には出てこない、といったずれも起きる。小さな話に見えて、更新や引き継ぎのたびに時間を取られるのはこういうところだ。

アイコンを足したい場面自体は、規模の小さいサイトほどよくある。問い合わせ先に添える電話やメールの記号、事業内容を並べたときの業種ごとのピクトグラム、外部の会員サイトへ誘導するボタンの矢印。どれも凝ったものではないが、既定の一覧に入っていなければ自前で持ち込むしかなかった。

登録は一か所、呼び出しは三通り

新しく加わるのは、アイコンのまとまりを作る関数と、そこへ個々のアイコンを加える関数だ。wp_register_icon_collection() でグループを作り、wp_register_icon() でSVGの中身かファイルの場所を渡す。名前は「グループ名/アイコン名」の形で付ける決まりで、使えるのは小文字と数字、ハイフン、アンダースコアに限られる。不要になったものを外す関数も対で用意されている。

登録したアイコンは三つの場所から使える。編集画面のアイコン選択欄ではグループごとのタブに分かれて並び、名前やラベルでの絞り込みも効く。テンプレート側では wp_get_icon() で書き出せて、大きさやクラス名、読み上げ用のラベルを添えられる。加えて /wp/v2/icon-collections/wp/v2/icons といった読み取り専用のエンドポイントが用意され、記事を編集できる権限を持つユーザーであれば一覧を取得できる。

地味だが大きいのは、登録する場所がひとつに決まったことだと思う。テーマが持っていてもプラグインが持っていても、同じ棚に並ぶ。そのサイトで今どのアイコンが使えるのかを一覧で確認できる状態は、これまで意外と手に入らなかった。

読み込めるSVGはかなり絞られている

登録したSVGはそのまま出力されるわけではなく、本体のタグ整形処理を通る。許されるのは svgpathpolygon の三種類の要素と限られた属性だけで、それ以外の要素やインラインの装飾指定、スクリプト、イベント属性は落とされる。現時点では線の太さを指定する属性や、外側の要素に付けた塗りの指定も対象外とされている。

SVGは以前から、アップロードを許すと侵入の入り口になりやすい形式として扱われてきた。管理画面から自由に置けるようにしないほうがよい、という判断はここでも変わっていない。線で描いたアイコンを使いたい場合は、あらかじめ塗りの形に変換してから登録するといった準備が必要になる。窮屈ではあるが、安全側に倒した設計だと考えるとつじつまは合う。

効いてくるのは引き継ぎの場面

この変更は派手ではない。既存のサイトが速くなるわけでも、見た目が変わるわけでもない。効いてくるのは、作った人と日々更新する人が違うときだ。アイコンの出どころが一か所にまとまっていれば、あとから触る人はまずそこを見ればよい。制作会社が納品したあと社内で運用していく中小企業のサイトほど、この差は効いてくる。

もっとも、現時点での使いどころはアイコンを置くブロックとナビゲーション周りが中心で、既存のサイトを慌てて作り替えるような話ではない。新しくテーマやプラグインを組む段になって、アイコンをどこに持たせるか決めるときに、この方法があることを思い出せれば十分だろう。仕様の詳細は開発チームの告知にまとまっている。

毎年恒例のCSS調査から見える現場の使い分け

つくば市のホームページ制作会社

CSSの使われ方を毎年たずねている調査「State of CSS」の最新の結果が公開された。回答を集めたのは今年の5月中旬から6月末にかけてで、世界の制作者4,902人が答えている。新機能の発表そのものではないが、現場で何が実際に使われていて、何がまだ様子見なのかが数字で並ぶので、自分たちの手札を確かめる材料になる。

使用率の上位は、条件に合う子要素を持つ親側を指定できる :has() が83.7%、縦横比を保つ aspect-ratio が81.3%、入れ子で書ける CSS Nesting が70.6%と続いた。少し前まで「便利そうだが対応状況が心配」と言われていた顔ぶれが、上から順に普通の道具として定着したことになる。逆に、この春から夏にかけて主要ブラウザに入ったばかりの指定は使用率が数%にとどまっており、ブラウザで使えるようになったことと、実案件で使われることの間には、やはり数年単位の距離があるとわかる。参考にしている情報源としては、MDN と Can I Use を挙げた人が多かった。新しい指定を試す前に対応状況を確かめる、という手順が広く共有されているということだろう。

気に入られている機能と、使われている機能

面白いのは、注目度と使用率が一致していない点だ。回答者が最も気に入った新機能として挙げたのは、要素を別の要素に紐づけて配置するアンカーポジショニング(anchor positioning)だった。ところが「対応状況が理由で使えていない機能」の筆頭にも、同じ名前が並ぶ。画面遷移をなめらかに見せる View Transition API や、条件分岐を書ける if() も似た位置にいる。触ってみたい気持ちと、納品するサイトに入れられるかどうかの線引きが、はっきり分かれている様子がうかがえる。

つまずきどころとして多く挙がったのは配置まわりで、次いで :has()、コンテナの幅で見た目を出し分ける @container が並んだ。どれも、うまくはまれば記述量がぐっと減る反面、思ったように効かないときの原因追いに時間を取られやすい種類の機能だ。それでも全体の満足度は5段階でおよそ4と、ここ数年ほぼ横ばいのままだった。書きやすくなった実感と、細かいところでの引っかかりが同居している、という受け止め方が続いていることになる。

中小企業のサイトを預かる立場からすると、この手の調査は流行を追うためというより、線引きの目安として使いやすい。使用率が高く枯れた機能は迷わず採用し、話題の新しい指定は、効かなかったときの見え方まで用意できる範囲で試す。企業サイトは公開してから何年も動き続けるものが多く、閲覧環境の幅も広い。上位に並ぶような定着した機能であれば、古い端末が混ざる相手でも心配は少ない。数字を眺めながらそのあたりの分け方を決め直すだけでも、調査に目を通す価値はある。詳しい内訳は調査結果のページで公開されている。

ログイン画面の不備を含むWordPressの臨時セキュリティ更新

つくば市のホームページ制作会社

WordPress本体のセキュリティ更新が公開されました。8月6日に出た臨時リリースで、修正された不具合は12件です。機能追加を伴わない、修正だけを目的とした更新になります。

この種の更新は定期的に出てきますが、今回は未ログインの状態から届く経路が含まれていた点で、優先度が一段高いものになっています。管理画面に入れる人だけが対象、という前提が成り立たない種類の不具合だからです。

ログイン画面から届く経路がふさがれた

今回いちばん重く扱われているのは、ログイン画面で見つかった反射型のクロスサイトスクリプティングです。CVE-2026-64638として登録され、深刻度は9に近い数値がつきました。公式のリリース情報によると、条件がそろうとPHPのコード実行につながる可能性があるとされています。

反射型というのは、送り込まれた内容がそのまま画面に跳ね返って動いてしまう型のことです。データベースに残らないぶん痕跡が追いにくく、あとから気づきにくい種類でもあります。今回変更されたファイルにはログイン画面の本体や出力の無害化を担う処理が含まれており、画面に出す直前のエスケープを補う形の修正が中心になっています。特殊な仕組みを足したわけではなく、基本の処理の抜けを埋めた、という内容です。

ただし、放っておけば勝手に乗っ取られるという話ではありません。攻撃者が用意したリンクを管理者が踏む、といった手順が要ります。とはいえ、細工したURLを開かせるだけで足がかりができるのは、アカウントを持たない相手にも入口があるということです。問い合わせフォーム経由で管理者宛にURLが送られてくる現場を思うと、まったくの他人事にはしにくいところです。

権限の低いユーザーがいるサイトほど確認したい

残りの修正も、後回しにしてよいものではありません。投稿者や寄稿者の権限で保存できてしまうスクリプトの混入、パスワード保護した記事のコメントが一覧に漏れる問題、マルチサイトで登録を開放している場合の権限昇格、URLの検証をすり抜けて内部向けのアドレスへ通信させられる不具合などが並びます。

WordPressの権限は、寄稿者は記事を書けても公開はできない、といった段階で線が引かれています。その前提のもとで運用を組んでいる現場からすると、寄稿者の権限でスクリプトを保存できてしまう状態は、引いていたはずの線が一段ゆるむことを意味します。外部に原稿を頼んでいる場合、相手を疑うかどうかという話ではなく、そのアカウントが乗っ取られたときの被害範囲が変わってくる、と考えたほうが実態に近いはずです。

共通しているのは、外部のライターや複数の担当者が出入りするサイトほど影響を受けやすい、という点です。編集部制で運用しているメディアや、支店ごとに更新担当を置いているサイトは、この機会に権限の割り当てもあわせて見直しておくと落ち着きます。使っていない寄稿者アカウントが残っているケースは、実際にかなり多いはずです。

古い版にもさかのぼって修正が配られた

今回目を引くのは、修正が現行版だけでなく、4.7系まで戻ってそれぞれの系統に配られたことです。7.0系は12件すべて、6系はおおむね8件から11件、5系や4系は7件から8件が該当し、系統ごとに対応版が出ています。4.6以前はすでに対象外です。

本体を大きく上げるのが難しい案件でも、同じ系統の中で当てられる修正が用意されている、という意味になります。古いから手の打ちようがない、ということはありません。ただし、正式にサポートされているのは最新版だけ、という原則自体は変わっていません。古い系統への配布はあくまで好意によるものだと明記されています。制作を引き継いだまま長く動いているサイトを抱えているなら、いまどの系統で止まっているのかを一度洗い出しておく価値があります。

自動更新が生きているかを見ておく

マイナー更新の自動適用が有効なら、公開から数時間のうちに当たっているはずです。問題になりやすいのは、過去の検証や不具合の切り分けで自動更新を止めたまま元に戻していない環境で、こうしたサイトは静かに取り残されます。契約しているサーバー会社の管理画面側で更新をまとめて制御している場合もあるので、どこで止まっているのかを切り分けておくと話が早くなります。

管理画面の更新ページでバージョンを確かめ、必要なら手動で当てる。あわせて、wp-config.phpやサーバー側の設定で自動更新を無効にしていないかも見ておくと、次の臨時リリースのときに慌てずに済みます。更新後にログイン画面と投稿の編集画面がふだんどおり開くかを確認しておけば、ひとまず十分でしょう。

修正が公開されてから実際に狙われはじめるまでの間隔は、年々短くなっているという報告が続いています。次の定例作業のときにまとめて、という進め方は、少なくとも本体のセキュリティリリースに関しては取りにくくなってきました。

WordPressの土台にあるReactの入れ替えが先送りになった

つくば市のホームページ制作会社

WordPressの管理画面、とくにブロックエディタの中身は、Reactというメニューや画面部品を組み立てるためのJavaScriptライブラリで動いています。そのReactを新しい世代に入れ替える作業がしばらく進められていたのですが、8月に予定されている次のWordPressには入らないことになりました。開発チームが7月下旬にMake WordPress Coreで経緯を公開しています。

いったんはGutenbergプラグインの側で新しい世代に切り替えてみたものの、想定していなかった不具合が続けて報告され、数日で元に戻されたとのことです。原因として挙げられているのは大きく二つ。ひとつは、プラグインがReactの部品をWordPress本体から借りずに自前で同梱していたケースで、この場合は古い世代と新しい世代が同じ画面の中で同時に動いてしまい、内部のデータの持ち方が食い違って壊れます。もうひとつは、新しい世代で廃止された古い書き方が、プラグイン側にそのまま残っていたケースです。文字列で書くref、関数コンポーネントへのdefaultProps、旧来のcontextの定義などが具体例として挙がっています。

本体は当面そのまま、試したい人には実験用のスイッチ

そのため、次のWordPressは従来どおりのReactを載せたまま出ます。切り替えを先に試しておきたい開発者向けには、Gutenbergプラグインの23.4以降に実験用のスイッチが用意されました。設定画面から有効にすると、本体が配っている部品だけが新しい世代に差し替わり、公開済みのプラグインが将来直面する状況をそのまま再現して確かめられます。あわせて、公式のPlugin Checkプラグインには、問題になりやすい書き方を自動で見つける検査を追加する作業が進められています。手作業で全部を洗い出さなくてよくなったのは、地味ですが助かる変更です。

サイトを運用している立場からすると、今回のニュースは特に何かをする話ではありません。ただ、独自のブロックや管理画面の拡張を自作している、あるいは制作会社に作ってもらっている場合は、事情が少し変わります。いずれ切り替えは来るので、その前に一度実験用のスイッチで動作を確かめ、ブラウザのコンソールにエラーが出ていないかを見ておくと、あとで慌てずに済みます。ブロックエディタまわりのカスタマイズは、こうした土台の入れ替えの影響をまっすぐ受ける場所です。

互換性の問題が見つかった時点で無理に押し通さず、二日で元に戻して検証期間を取り直したという判断は、更新のたびに現場が振り回されないという意味ではありがたい話でもあります。管理画面が急に開かなくなったときに困る度合いは、社内に専任の担当を置きにくい中小企業のサイトほど大きくなります。派手さのない先送りですが、その裏側を眺めておくと、次に来る更新への構え方も少し変わってきます。

アップロードした画像の変換がブラウザ側で行われるようになる

つくば市のホームページ制作会社

WordPressで写真をアップロードしたとき、裏側では何が起きているか。サーバー上のPHPが元画像を読み込み、縮小版を何種類か書き出し、必要なら形式を変換している。撮ったままの大きな写真を何十枚もまとめて投げ込むと、この処理が重くて途中で止まる。更新担当が自分で写真を載せている中小企業のサイトでは、よくある詰まりどころだ。

今月中旬に公開が予定されているWordPressの次の版では、この画像処理の担当がサーバーからブラウザに移る。開発チームの解説によると、圧縮、リサイズ、形式変換、回転、サムネイル生成までを、操作している人の手元のブラウザで済ませる仕組みだという。

画像処理のエンジンがブラウザの中で動く

使われているのはwasm-vipsと呼ばれるもので、画像処理ライブラリのlibvipsをWebAssemblyに変換し、ブラウザ上で動かせるようにしたものだ。処理はWeb Workerに逃がしてあるため、変換の最中でも編集画面の操作が固まりにくい。

副次的な効果として、書き出される画像そのものも変わる。libvipsが生成するJPEGは、これまで使われてきたGDやImagickによるものよりおよそ15パーセント小さくなるとされている。サーバーに入っている画像ライブラリの違いで書き出し結果が微妙に変わっていたのが、どの環境でも同じ出力に揃う点も見逃せない。共用サーバーを使う案件が多いほど、この均一さはありがたい。サーバーごとの環境差を吸収するために、書き出し品質の設定を案件別に調整していた人には、手間が一つ減る話でもある。

iPhoneの写真やアニメーションGIFの扱いも変わる

分かりやすいのはHEICへの対応だろう。iPhoneの標準的な写真形式だが、これまではサーバー側の対応状況次第でアップロードできないことがあった。新しい仕組みではブラウザ内でデコードしてJPEGに変換し、元のファイルは別途保持される。

AVIFは10ビットや12ビットといった高階調の元データまで通り、UltraHDRのJPEGはゲインマップを保ったまま各サイズが書き出される。透過のないアニメーションGIFはMP4やWebMの動画に変換され、エディタ側では自動再生とループが効く動画ブロックの派生として挿入される。見た目は元のGIFのままで、ファイルだけが軽くなる形だ。

条件を満たさない環境では今までどおりになる

気になるのは、対応していない環境で何が起きるかという点だが、ここは素直な作りになっている。条件を満たさない場合は従来どおりサーバー側で処理され、切り替えは自動で、画面上の見え方も変わらず、エラーも出ない。判定には端末のメモリ量やCPUのコア数、通信速度、CSPでblobが許可されているかどうかが使われる。

ブラウザ側の条件はやや厳しめだ。SharedArrayBufferを使う都合でDocument-Isolation-Policyに対応したChromium系のブラウザが必要で、FirefoxとSafariは当面サーバー側処理に回る。ただしHEICのデコードだけはSafariでも動く。サイト側で機能ごと止めたい場合はwp_client_side_media_processing_enabledフィルターをfalseにすればよく、big_image_size_thresholdjpeg_qualityといった既存のフィルターもそのまま効くとされている。

制作の現場から見て効いてくるところ

実務でありがたいのは、PHPのメモリ上限に起因するアップロード失敗が減ることだ。画像処理はメモリを食う工程で、共用サーバーの上限に当たって管理画面が真っ白になる相談は今でも珍しくない。その負荷がブラウザ側に移るなら、サーバーの構成を触らずに回避できる場面が増える。手元のパソコンは近年それなりに性能が上がっているので、重い工程を任せる先としては悪くない。

アップロードの粘り強さも上がっている。サイズ違いの書き出しごとにリクエストが分かれ、失敗すれば間隔を空けて自動で再試行する。回線が切れれば一時停止し、つながれば再開する。進捗も画面に出て、読み上げソフトにも伝わる作りだ。出先からスマートフォンで写真を上げる担当者がいるサイトほど、この差は体感しやすいだろう。

正式な公開は今月中旬の予定になっている。普段どおりの写真の投げ方を検証環境でひととおり試し、いつも使っている画像形式が想定どおりに変換されるかを見ておくと、切り替わったあとに慌てずに済む。

次のChromeで増えるCSSと入力欄まわりの指定

つくば市のホームページ制作会社

ウェブ制作の現場では、ブラウザの新しい版に何が入るかを追いかけるかどうかで、書けるコードの幅が少しずつ変わってきます。今回はChromeの次の安定版に向けたベータ版で公開された変更のうち、中小規模のサイト制作でも出番がありそうなものを並べてみます。

派手な目玉機能があるわけではありません。ただ、これまでJavaScriptを足して解決していた場面や、ブラウザ任せにするしかなかった挙動を、書き手の側で決められるようになる追加がいくつか含まれています。

再生中か一時停止かをCSSだけで見分ける

音声や動画の要素に対して、再生の状態に応じて当たる擬似クラスが加わります。再生中を表す:playing、一時停止の:pausedのほか、シーク中の:seeking、読み込み待ちの:buffering、止まってしまった状態の:stalled、消音中の:muted、音量が固定されている:volume-lockedの計7種類です。

これまでは再生ボタンの見た目を切り替えるだけでも、イベントを拾ってクラスを付け外しするコードが必要でした。状態がそのままセレクタになるなら、装飾はCSS側に寄せられます。動画を使った制作物が多い方は、書き方が変わってくるところだと思います。

元の色はそのままに透明度だけを変える

CSS Color 5で定義されているalpha()が使えるようになります。すでにある色の値を起点にして、透明度の部分だけを差し替えた色を作れる指定です。

色をカスタムプロパティで一括管理していると、同じ色の薄い版を用意するために別の変数を足したり、色の値を分解して書き直したりしがちでした。元の色を参照したまま透明度を変えられれば、配色の管理は素直になります。ブランドカラーを一箇所で定義して各所に展開する作りとは相性が良さそうです。

入力欄の自動修正を書き手が決められる

autocorrect属性が、どの要素にも書ける共通の属性として扱われるようになります。inputやtextarea、contenteditableを指定した箇所で、入力内容に自動修正をかけるかどうかを指定できます。

氏名や住所、型番のように、勝手に直されると困る値を扱うフォームは少なくありません。問い合わせフォームの取りこぼしは中小企業のサイトでは直接の機会損失になるので、こうした細かい制御が標準の属性で書けるのは実務寄りの改善です。

読み込み先を絞り込むヘッダー

レスポンスヘッダーで接続先の許可リストを指定し、そこに載っていない宛先への通信を接続の前段階で止める仕組みも入ります。想定していない外部への送信を、ページを配信する側の設定で断てるという考え方です。

コンテンツセキュリティポリシーと重なる部分もありますが、プラグインやタグを多く積んだサイトほど、外部との通信経路は把握しづらくなります。制作を引き継いだサイトの棚卸しに使える道具が増えた、という見方もできます。

デスクトップ向けの指定や端末性能の判定

このほか、インストール型のデスクトップアプリとして動かしたときにタイトルバーとして扱う領域を決めるwindow-dragプロパティや、端末のCPU性能の段階を取得できるAPIも追加されます。前者は従来のapp-regionを置き換えるもので、後者は重い処理を出し分ける用途が想定されています。

どちらも一般的なコーポレートサイトで今すぐ使う類のものではありません。ただ、ブラウザで動かすものの幅がどこまで広がっているかを知る目安にはなります。

ベータ版の内容は正式版までに変わることがあるので、この段階で本番に入れる話ではありません。Chromeの開発者向けブログに各項目の詳細が載っているので、気になるものがあれば一次情報を確認しておくと、正式に配信されたときに動きやすくなります。

並べた要素のすき間に罫線を引く指定がブラウザに入った

つくば市のホームページ制作会社

グリッドやフレックスで要素を並べたあと、そのすき間に細い線を入れたくなる場面は多い。カード一覧の区切り、料金表の縦線、記事リストの横罫。デザインとしてはごく普通の表現なのに、CSSで素直に書ける指定がなく、制作側が毎回それらしい形に組み立ててきた領域だった。ここへ来て、その部分がブラウザ側で片付きはじめている。

すき間に線を引くために、これまでやってきたこと

いちばん多かったのは、並べた要素そのものに枠線を付ける方法だろう。カードの右側にだけ線を引き、行末の要素は擬似クラスで線を消す。三列で組んだグリッドなら、三の倍数番目を狙って消していく。動くには動くが、列数がブレークポイントごとに変わると、消す対象も一緒に書き換えなければならない。

フレックスで折り返す並びだと事情はもっと厄介になる。何番目で折り返すかは中身の幅次第なので、要素の番号を狙う書き方が成り立たない。仕方なく擬似要素を絶対配置で置いたり、親に背景色を敷いてすき間だけ透かして線に見せたり、要素の背景色との差で線を演出したりしてきた。どれも見た目は作れるが、線の色を変えたいだけの依頼で三箇所直すことになる。

背景色を敷いて線に見せる手も、条件がそろえば見た目はきれいに決まる。ただし親の背景が写真やグラデーションだと途端に成立しないし、余白の値を変えると線の太さまで一緒に動く。ダークモードの切り替えを入れると、線の色ではなく背景色を二重に管理することになり、あとから読む人には何が線で何が下地なのか分かりにくい。

要するに、線を引くための仕掛けが、線とは関係のない場所に散らばっていた。すき間そのものを指定できる手段がなかったからで、これは書き手の工夫が足りないという話ではなかった。

もともと段組みだけのものだった指定が広がった

CSSには以前から column-rule という指定がある。ただしこれは段組みレイアウト専用で、グリッドやフレックスでは効かなかった。線を引く指定は存在するのに、いちばん使いたいレイアウトでは使えない状態が続いていたわけだ。

今回入ったのは、この column-rule をグリッドとフレックスにも広げ、さらに横方向のすき間に線を引く row-rule を新しく用意する、という変更になる。Chromeの開発者向けブログによると、ChromeとEdgeのバージョン149から既定で有効になった。段組み、グリッド、フレックスのいずれでも同じ書き方が通る。

書き味としては枠線の指定とほとんど同じで、太さと線種と色をまとめて渡すだけでいい。要素の何番目かを数える必要はなく、折り返しが増えても減っても、すき間があるところに線が入る。列数をブレークポイントで切り替えても、線の指定はそのままでいい。この一点だけでも、日々のCSSの見通しはかなり変わる。

交差やはみ出しをどこまで決められるか

実際にやってみると気になるのが、細部の扱いだ。縦線と横線が交わるところをどうするか、線をすき間いっぱいまで伸ばすのか少し余らせるのか、中身の入っていない列にまで線を出してしまわないか。この手の判断は、これまで擬似要素の位置調整でごまかしてきた部分でもある。

新しい仕様では、そこにもそれぞれ指定が用意されている。交差点の処理は column-rule-breakrow-rule-break、線をどこまで伸ばすかは column-rule-insetrow-rule-inset、空の行や列に線を出すかどうかは column-rule-visibility-itemsrow-rule-visibility-items が受け持つ。開発者向けの試用段階では伸縮の指定が別の名前だったが、仕様の側に合わせて整理された経緯がある。

加えて、線の太さや色、伸縮の量はアニメーションの対象になる。マウスを載せたときにだけ区切り線をうっすら出す、といった演出が、余計な要素を足さずに書けるということでもある。細かい話に見えるが、ここまで決められるかどうかで、回避策から本当に卒業できるかが分かれる。

使えるブラウザと、いまの構え方

現時点で対応しているのはChromiumを土台にしたブラウザで、SafariとFirefoxはまだ入っていない。ここは正直に見ておいたほうがいい。日本の中小企業サイトだとiOSのSafariの比率が高い案件も珍しくないので、いますぐ全面的に頼れる指定ではない。

ただ、この機能は使えなかったときの壊れ方が穏やかだ。対応していないブラウザでは、すき間に線が出ないだけで、レイアウトそのものは何も崩れない。区切り線が装飾として効いている程度の場面なら、対応済みのブラウザで少し丁寧に見える、という積み増しの使い方ができる。線がないと情報の区切りが読み取れない、という設計になっている場合だけ、従来の手法を残しておけばいい。

従来の手法を残す場合も、両方を無条件に書くと対応済みのブラウザで線が二重になる。対応しているかどうかで書き分ける @supports を挟んでおくと、この衝突は避けられる。新しい指定が使える環境では新しい書き方を、そうでない環境では今までの回避策を、という形にしておけば、数年後にSafariとFirefoxが追いついた時点で、古いほうのかたまりを削るだけで済む。移行の作業を先に用意しておく、という考え方に近い。

未対応のブラウザ向けのポリフィルも開発が進んでいるとされている。ただ、装飾のためにスクリプトを足すのは本末転倒になりやすいので、まずは飾りとして入れて様子を見る、という順番が現実的だと思う。

見た目の細部がCSS側に寄っていく流れ

この変更を単体で見ると、便利なプロパティが増えた、という話で終わる。ただ、ここ一年ほどのCSSの動きを並べると、同じ方向を向いた変更が続いていることに気づく。

たとえば、並んだ要素に少しずつ時間差を付けて動かす書き方は、長らく要素の番号を手で書き並べるか、スクリプト側で遅延を計算するしかなかった。それが、自分が何番目の兄弟かをCSSの中で数えられる関数として一部のブラウザに入りはじめている。枠線の形をもっと自由に扱うための border-shape のような提案も議論が進んでいて、CSS-Tricksあたりでは繰り返し取り上げられている。

共通しているのは、見た目のために増やしていたマークアップやスクリプトを減らす方向だということだ。区切り線のための空の div、時間差のための番号付きクラス、位置合わせのための擬似要素。こうしたものは、書いた本人以外には意図が読み取りにくく、引き継いだ制作者が触りにくい部分でもあった。指定として名前が付くと、少なくとも何をしたかったのかは残る。

受け継いだサイトを触る側から見ると

制作会社としてありがたいのは、新規で作るときの快適さより、あとから触るときの読みやすさのほうかもしれない。他社が作ったサイトを引き継いで直す仕事では、擬似要素で引かれた線の位置が微妙にずれている、といった相談がわりとよくある。中身を追うと、当時の列数を前提にした番号指定が残っていて、その後の改修で列数だけが変わっていた、という筋書きだ。

すき間に線を引く指定が一行で済むなら、こうした置き土産は減っていく。すぐに全部を書き換える必要はないし、動いているものを触るリスクのほうが大きい場面も多い。ただ、次にそのブロックへ手を入れるとき、回避策を継ぎ足すのではなく、素直な指定に置き換えられる選択肢ができたのは小さくない。

新しい指定が出るたびに全部追いかける必要はないと思う。それでも、長く回避策で埋めてきた場所が正面から解決されたときは、覚えておくと後で効いてくる。区切り線はまさにその手の場所だった。

読み込み直さない画面切り替えの速さをChromeが測れるようになった

つくば市のホームページ制作会社

サイトの表示速度を測る指標として、Core Web Vitalsはすっかり定着しました。ところが、この指標には長らく穴があると言われてきました。ページを読み込み直さずに中身だけを差し替える作りのサイトでは、最初の一回しか計測されないという問題です。Chromeの最新版で、この部分をブラウザ側で測る仕組みが正式に使えるようになりました。

Chromeの開発者向け資料によると、Soft Navigations APIと呼ばれるこの機能は、試験運用の期間を経て、2026年7月に公開された版から設定を切り替えずに利用できるようになりました。名前のとおり、ソフトナビゲーション、つまり読み込み直さない画面遷移を計測の対象にするものです。

これまで測れていなかった部分

従来のCore Web Vitalsは、ブラウザがURLを開いて新しい文書を読み込む、いわゆる通常の遷移を前提に設計されています。表示までの時間を示すLCP、レイアウトのずれを示すCLS、操作への反応を示すINPは、どれもそのページが開かれた時点を起点に集計されます。

JavaScriptで画面を組み立てる作りのサイトでは、二画面目以降はURLだけが書き換わり、文書の読み込みは起きません。ブラウザから見れば一枚のページがずっと開かれたままなので、二画面目の表示がどれだけ遅くても、最初の一枚の数字に埋もれてしまいます。逆に、最初の表示さえ速ければ全体が良好に見えてしまうこともありました。計測ツール側で独自に区切りを入れる回避策はありましたが、実装ごとに基準が違い、横に並べて比べられる数字にはなりにくい状態でした。

ブラウザはどこで区切りを判断するのか

新しい仕組みでは、ブラウザ自身が三つの条件をもとに画面の切り替わりを見分けます。利用者の操作がきっかけになっていること、利用者から見えるURLの変化を伴うこと、そしてその結果として実際に画面が描き直されること。この三つがそろったときに、ひとつの区切りとして扱われます。

あくまで推測にもとづく判定なので、公式の説明でも、サイトの作り方によっては拾いすぎたり拾いそこねたりすることがあると断っています。それでも、判定の基準がブラウザ側に統一されたこと自体に意味があります。計測ツールを乗り換えても、同じ考え方で区切られた数字が並ぶからです。

計測する側で増えたもの

開発者から見ると、パフォーマンス情報を受け取る仕組みに新しい種類の記録が追加された形になります。切り替わりそのものを表す記録と、切り替わったあとの主要な描画を表す記録が加わり、既存の各種タイミング情報にも何番目の遷移かを示す値が付くようになりました。これで、ひとつの記録がどの画面のものかを判別できます。

ただし、これらを直接扱うのはそれなりに骨が折れます。読み込み直さない遷移では最初の応答までの時間がゼロとして扱われるなど、通常の遷移とは数字の意味が変わる場面もあるためです。Googleが公開している計測用のライブラリweb-vitalsは、新しい版でこのあたりを内部で吸収するようになっており、URLの対応付けや数値のリセットを任せられます。自前で計測基盤を持っているところ以外は、ライブラリの更新に乗るほうが現実的でしょう。

今すぐ効いてくる話ではない

注意しておきたいのは、この計測結果が検索での評価にそのまま反映されるわけではない点です。実利用者のデータを集めたChrome User Experience Reportにも読み込み直さない遷移の分を加えることは目指されていますが、どのような形で反映されるかは未定とされています。対応もChromium系のブラウザに限られます。つまり現時点では、自分たちで測って改善に使うための道具という位置づけになります。

WordPressで作られた一般的な企業サイトのように、リンクを踏むたびにページを読み込み直す作りであれば、直接の影響はほとんどありません。関わってくるのは、予約や検索の絞り込み、会員向けの管理画面など、画面の一部だけを差し替える作りを取り入れている場合です。最近はView Transitionsのように、通常の遷移でもアプリらしい見せ方ができる手段が増えており、境目は少しずつ曖昧になっています。

数字が見えるようになると、これまで感覚で語られていた二画面目が重いという話を、根拠を持って共有できるようになります。制作側と運用側で改善の優先順位を決めるとき、この差は思ったより大きいはずです。

タブに添えた閉じるボタンを読み上げに伝えるARIAの新しい属性

つくば市のホームページ制作会社

Chromeの安定版151が7月28日に公開された。大型の目玉機能というより細かい追加が並ぶ回だったが、そのなかにaria-actionsという属性が入っていて、これは現場の作り方に素直に馴染みそうだと感じた。ある要素に付き添っている別の操作ボタンの存在を、スクリーンリーダーなどの支援技術に伝えるための指定である。Chromeのリリースノートによると、W3CのARIA仕様に沿った形で実装されたとされている。

想定されている典型例は、タブの見出しに小さく付いている閉じるボタンだ。マウスで操作していれば見えているので迷わないが、キーボードと読み上げでたどっている人には、そのタブに閉じる手段が添えられていること自体が伝わりにくい。メールの一覧行に並ぶアーカイブや削除のボタン、カード型のリストに乗った編集ボタンなども同じ構図になる。主となる要素と、その脇に置かれた操作との関係を機械が読み取る手がかりがなく、支援技術の側から見つけづらいことは、以前から課題として挙げられていた部分だ。近くにボタンが置いてあることは、画面上の距離では明らかでも、読み上げの順番のなかでは伝わらない。結果として、タブ移動を重ねて偶然行き当たるまで存在に気づけない、という状態が起きていた。

既存のマークアップを壊さずに足せる

使い方は他のARIA属性と似ていて、主となる要素から、関連するボタンのidを指すだけでよい。属性を足しても見た目やクリックの挙動は変わらず、対応していないブラウザは単に無視する。既存のコンポーネントに後から付け足す形で試せるので、導入の判断はしやすい。開発者ツール側でも、他のid参照型のARIA属性と同じように、参照先がどの要素を指しているかを確認できるようになっている。W3C側の仕様もほぼ固まっており、Firefoxはすでに対応済み、WebKitは試作の段階と伝えられている。ChromeはまずWindows、Mac、Linuxのデスクトップで有効になり、モバイル向けは後続になるとのことだ。

もっとも、属性を書けばすぐ読み上げが変わるという話ではない。支援技術の側がこの関係をどう利用者に案内するかは、各社の実装がこれから揃っていく段階にある。ただMicrosoftのUI部品群を手がけるチームが早い時期の取り込みに前向きだと伝えられており、部品ライブラリ経由で静かに広まっていく類の機能ではありそうだ。自前でタブやリストのUIを組んでいるなら、仕様の様子を眺めておく価値はある。

中小企業のサイトでも、同じ形はあちこちにある。予約フォームの入力欄に添えたクリアボタン、実績一覧のカードに置いた詳細ボタン、通知バーの右端にある閉じる印。どれも見えている人には自明で、見えていない人には気づきにくい。ARIAは足しすぎるとかえって読み上げを濁らせるので万能ではないが、これまで説明のしようがなかった関係を素直に書ける手段が増えたのは、地味ながらありがたい変化だと思う。

地域ごとの週の始まりや暦をブラウザ標準で引ける仕組み

つくば市のホームページ制作会社

日付まわりの表示は、サイトを作っていればどこかで必ず触ることになります。予約フォームのカレンダー、記事の投稿日、営業日の一覧。一見どれも単純ですが、対象の地域が変わると前提そのものが変わります。週の始まりは日曜なのか月曜なのか、週末はどの曜日にあたるのか、どの暦を併記するのか。こうした知識は、これまでブラウザの外から持ってくるしかありませんでした。

2026年7月、JavaScriptの国際化機能であるIntl.Localeに加わった一連のメソッドが、主要ブラウザすべてで使える状態になりました。web.devの月次まとめによると、Firefox 153が対応したことで、Baselineの「新しく利用可能」に入ったとされています。地味な機能ですが、カレンダー部品を自作したことがある人ほど、ありがたみが分かる種類の追加です。

これまでは辞書を自前で抱えていた

「この地域では週が月曜から始まる」といった知識は、CLDRという国際的なデータベースにまとめられています。ただ、ブラウザからその中身を直接引く手段が長らくなく、カレンダーの見た目を自分で組む場合は、データの一部を写し取ったライブラリを読み込むのが普通でした。週の初日を表す値ひとつのために、数十キロバイトの追加読み込みが発生することも珍しくありません。

Intl自体はかなり前からあり、Intl.DateTimeFormatを使えば日付を地域の書式に整えることはできました。ただしそれは整形済みの文字列が返ってくるだけで、UIを自分で組み立てるために必要な素の情報、たとえば曜日を並べる順番の起点までは取り出せません。今回埋まったのは、ちょうどこの隙間にあたる部分です。

Intl.Localeから引けるようになった情報

書き方は素直で、ロケールを表すオブジェクトを作ってメソッドを呼ぶだけです。new Intl.Locale("ja-JP").getWeekInfo() のように書くと、週の始まりの曜日、週末にあたる曜日、その年の最初の週とみなすための最小日数がまとめて返ってきます。曜日は1が月曜、7が日曜という決まりになっています。

同じ要領で、その地域で使われる暦の一覧を返す getCalendars()、時刻を12時間制と24時間制のどちらで扱うかを返す getHourCycles()、文字を左から右に並べるか右から左に並べるかを返す getTextInfo()、地域に結び付いたタイムゾーンの一覧を返す getTimeZones() が用意されています。ほかに数字の表記体系や並べ替えの規則を返すものもあり、いずれも MDNのIntl.Localeのページに一覧があります。

返ってくるのは配列や小さなオブジェクトなので、そのまま画面に出すというより、自分のUIの初期値として使う性格のものです。

日本語のサイトで効いてくる場面

日本のロケールで getCalendars() を呼ぶと、グレゴリオ暦と和暦の識別子が返ってきます。行政関連の書類を扱うサイトや、年号の併記が求められる申込フォームでは、この結果を起点にIntl.DateTimeFormatへ和暦を指定する、という流れが自然に組めます。和暦を出すかどうかを地域の慣習として扱えるので、判定を自前のif文で書き分けずに済みます。

週の始まりも実務的です。日本語圏では日曜始まり、英国では月曜始まりというように、カレンダーの見た目は地域で割れます。多言語対応のサイトで同じカレンダー部品を使い回すとき、対応表を自分で抱えなくてよくなるのは負担が減るところです。予約カレンダーや営業日の表示は、中小企業のサイトでも決して珍しい要素ではありません。

使う前に確認しておきたいところ

Baselineの「新しく利用可能」は、主要ブラウザの最新版で動くという意味であって、少し前の端末まで含めて安全という意味ではありません。企業サイトの訪問者には更新の止まった端末も混ざりますから、メソッドがあるかどうかを確かめて、無ければ従来どおりの既定値を使う、という組み方が現実的です。値が取れなくても表示が壊れないようにしておけば十分です。

もう一点、以前の実装ではメソッドではなくプロパティとして提供されていた時期があります。古い解説記事のコードをそのまま持ってくると動かないことがあるので、参照する情報の新しさには注意しておきたいところです。

外部ライブラリに頼っていた小さな機能が標準側に移ると、依存パッケージがひとつ減り、更新の手間もその分軽くなります。派手さはありませんが、次にカレンダーまわりを触る機会があれば、置き換えられる部分がないか見ておく価値はありそうです。