次期WordPressのベータに加わったタブや目次の新しいブロック

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

ウェブサイトの土台としてWordPressを使っている制作者や事業者にとって、次のバージョンで何が増えるかは気になるところです。2026年7月15日に、次期版となるWordPress 7.1のベータ1が公開されました。正式リリースは8月19日が予定されています。今回のバージョンはブロックの追加とデザイン調整の作り込みが目立ちます。今回は編集画面に加わる新しいブロックを中心に、実際の制作でどう役立ちそうかという視点で並べて紹介します。ベータは開発中の段階なので、ここで挙げた仕様は正式版までに変わる可能性がある点は念頭に置いてください。

タブ切り替えを標準ブロックで作れる

これまでタブ形式の表示は、プラグインや独自のJavaScriptに頼るのが一般的でした。7.1ではTabsブロックが標準で加わり、料金プランの比較や、よくある質問の分類などを、コードを書かずにタブでまとめられるようになります。標準機能として編集画面に組み込まれているため、表示のためだけに入れていたプラグインを一つ減らせる場面も出てきます。プラグインが増えるほど更新や不具合対応の手間もかさむので、保守を軽くしたい中小企業のサイトとは相性がよさそうです。

目次ブロックは7.1では見送られた

長い記事に目次を付けたいときも、これまでは専用プラグインが定番でした。7.1のロードマップにはTable of Contents(目次)ブロックも挙がっていましたが、正式版に入った新しいブロックはTabsとPlaylistで、目次ブロックは見送られました。標準ブロックで目次を組めるようになるのは、先の版を待つことになります。

音声をまとめて並べるプレイリスト

Playlist(プレイリスト)ブロックは、複数の音声ファイルを一覧として並べ、続けて再生できるようにするものです。ポッドキャストの配信ページや、社内向けの音声資料をまとめるページなどで使い道があります。あわせて、複数の画像を柔軟に扱えるギャラリーの新しい型も実験的に用意されており、メディアを見せる場面での表現の幅が広がりつつあります。動画や音声を扱うページはこれまで外部の埋め込みサービスに頼りがちでしたが、標準ブロックで完結できれば表示の速さや管理のしやすさの面でも扱いやすくなります。

画面幅ごとに見た目を細かく調整できる

ブロックそのものだけでなく、デザインを整える仕組みにも手が入っています。レスポンシブスタイリングによって、同じブロックでもパソコンとスマートフォンで余白や配置を分けて指定できるようになります。加えて、サイト全体のデザイン設定(グローバルスタイル)に文字の影が加わり、グリッドやフレックスで組んだ並びが意図せず縮んだり崩れたりしにくくする調整も入りました。これまでCSSを直接書いて対応していた細かな見た目の調整が、編集画面の操作だけで届く範囲に少しずつ近づいています。ブロックとブロックの内容を結びつけるブロックバインディングも箇条書きの項目まで扱えるようになり、繰り返しの多いページを組みやすくなっています。

ベータ版はそのまま本番サイトに入れるものではありませんが、正式リリースの前に検証環境で触っておくと、公開後の切り替えがスムーズになります。プラグインで補ってきた機能が標準側に取り込まれていく流れは、サイトの構成をできるだけシンプルに保つうえでも見逃せない動きです。詳しい仕様はWordPress開発者向けの公式ニュースで確認できます。

要素同士を結びつけて配置するCSSアンカーポジショニングが全ブラウザに揃う

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

ツールチップやドロップダウンメニュー、吹き出し。ボタンの近くに小さな要素をぴたりと寄り添わせる場面は、ウェブサイトのあちこちにあります。ところが、この「ある要素を別の要素のそばに置く」という一見単純な処理が、これまでのCSSでは驚くほど手間のかかる作業でした。その状況を根本から変えるアンカーポジショニング(anchor positioning)が、2026年に入って主要ブラウザすべてで使えるようになりました。単なる新プロパティの追加ではなく、位置決めという古くからの悩みに対する設計思想の転換なので、少し腰を据えて整理しておきたいと思います。

これまでの位置決めがなぜ面倒だったのか

従来のCSSで要素を任意の場所に置く手段は、position: absolute でした。ただしこれは「親要素を基準にした座標」でしか位置を決められません。ボタンの真下にメニューを出したいとき、ボタンそのものを基準にすることができず、共通の親を用意して相対位置を調整する、といった回りくどい組み立てが必要でした。

さらに厄介だったのが、画面のスクロールやウィンドウのリサイズです。ボタンが動けばメニューも追従させなければなりませんが、CSSだけではそれを追いかけられません。そこで多くの現場が JavaScript に頼りました。要素の座標を getBoundingClientRect で毎回計測し、スクロールやリサイズのたびに再計算して位置を書き換える。この処理を安定して動かすのは意外に難しく、Floating UI や Popper.js といった専用ライブラリが広く使われてきたのは、まさにこの面倒を肩代わりするためでした。

つまり「要素を別の要素のそばに置く」という日常的な要件のために、数十KBのライブラリを読み込み、イベント監視のコードを書く。この構図が長らく当たり前になっていたのです。位置ずれの不具合報告が絶えなかったり、スクロール中にメニューがわずかにガタつく、といった細かな粗さに悩まされた記憶のある制作者も多いのではないでしょうか。

アンカーポジショニングの基本的な考え方

アンカーポジショニングは、この関係を CSS だけで宣言的に記述できるようにします。仕組みは素直です。基準にしたい要素、つまり錨(いかり)となる要素に anchor-name というプロパティで名前を付けます。名前はカスタムプロパティと同じくハイフン二つで始まる文字列です。一方、寄り添わせたい側の要素には position-anchor でその名前を指定し、どの要素に結びつくかを宣言します。

あとは anchor() 関数を使って、錨のどの辺を基準に自分をどこへ置くかを書きます。たとえば錨の下端を自分の上端に合わせれば、ボタンの真下にメニューが並びます。座標を計算するのはブラウザの役目です。錨が動けば結びついた要素も自動で追従し、スクロールしてもリサイズしても関係は保たれます。JavaScript のイベント監視も、再計算のループも要りません。ひとつの錨に対して複数の要素を結びつけることもでき、たとえばボタンにツールチップと補助メニューの両方をぶら下げる、といった構成も素直に書けます。位置の面倒をブラウザに任せられると、制作者は見た目の設計そのものに集中できるようになります。

position-areaで方向をわかりやすく指定する

anchor() 関数は柔軟ですが、上下左右の細かな指定を辺ごとに書くのはやや冗長になりがちです。そこで用意されているのが position-area というプロパティです。これは錨の周囲を九つのマス目に見立て、そのどこに要素を置くかを言葉で指定できる仕組みです。「錨の上」「右下」といった感覚で配置を書けるため、コードの意図が読み取りやすくなります。

ちなみにこのプロパティは策定の途中で inset-area という名前から position-area へ改称された経緯があり、Chrome でも 129 で名称が揃いました。少し前の解説記事では古い名前で書かれている場合があるので、参照するときは注意しておくとよいでしょう。

はみ出しを自動で回避するフォールバック

位置決めで最も神経を使うのが、画面の端での挙動です。ボタンの下にメニューを出す設計でも、そのボタンが画面の下端近くにあれば、メニューが見切れてしまいます。従来はこの判定も JavaScript で書く必要がありました。空きスペースを測り、足りなければ上に開く、といった条件分岐です。

アンカーポジショニングには、この切り替えを CSS だけで完結させる仕組みが備わっています。position-try-fallbacks というプロパティに候補の配置を並べておくと、既定の位置ではみ出しが起きたときにブラウザが順番に候補を試し、収まる配置を自動で選びます。より込み入った代替案は @position-try という規則で定義できます。判定はレイアウトの過程で自動的に行われ、リサイズ監視のコードは一切必要ありません。下に空きがなければ上へ、横が詰まっていれば別の向きへ、といった気配りをブラウザが肩代わりしてくれるわけです。

Popover APIやdialogと組み合わせて真価を発揮する

アンカーポジショニングが特に力を発揮するのは、HTML の popover 属性や dialog 要素と組み合わせたときです。popover 属性は、追加のコードなしで開閉できる小さな重ね表示をブラウザ標準で実現する仕組みで、メニューやツールチップの土台に向いています。ただし popover 属性だけでは「どこに出すか」までは面倒を見てくれません。ここに位置決めを担うアンカーポジショニングを重ねることで、開閉と配置の両方を標準機能だけで組み立てられます。

しかもこの組み合わせにはアクセシビリティ上の利点もあります。popover 属性や dialog 要素と一緒にアンカーポジショニングを使うと、キーボード操作の順序、つまりフォーカスの移動をブラウザが適切に補正してくれます。錨となるボタンから開いた要素へ自然に焦点が移るため、支援技術を使う利用者にも扱いやすい構造になります。メニュー、サブメニュー、設定ダイアログといった部品を、ライブラリ抜きで組み立てられる土台が整ったことになります。

導入をどう見極めるか

気になる対応状況ですが、アンカーポジショニングは Chrome が 125 から、Safari が 18.2 から対応し、最後まで残っていた Firefox も 147 で既定有効となりました。これで主要なブラウザエンジンがすべて出そろい、2026年時点でおよそ9割の利用環境をカバーする水準に達しています。新しい制作案件であれば、実務で採用できる段階に入ったと言ってよいでしょう。

とはいえ、少し前のバージョンのブラウザを使う利用者が一定数残るサイトもあります。中小企業のサイトで慎重に進めるなら、アンカーポジショニングが効かない環境でも致命的に崩れない設計、たとえば従来の配置を素の状態として残し、対応ブラウザではより洗練された位置決めが効く、という重ね方が現実的です。位置が多少ずれても内容は読める、という状態を保っておけば安全に導入できます。

ツールチップ一つのために外部ライブラリを読み込む時代が、静かに区切りを迎えつつあります。読み込むコードが減れば表示は軽くなり、保守すべき依存も減ります。派手さはないものの、こうした基盤の更新こそ、日々サイトを預かる制作者にとって地味に効いてくる変化だと感じています。

gzipやBrotliに続く圧縮方式zstd、全ブラウザ対応が揃う

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

ウェブページやファイルをブラウザに届けるとき、多くのサーバーは中身を圧縮してから送っている。長年その主役はgzipで、近年はより縮むBrotliが加わってきた。ここに三つ目の選択肢として、zstd(Zstandard)という圧縮方式が本格的に使えるようになりつつある。ChromeやFirefoxはすでに対応済みで、遅れていたSafariも直近のアップデートで足並みをそろえた。主要ブラウザが一通り対応したことで、実務でも検討できる段になってきた。

そもそも転送時の圧縮とは何か

HTMLやCSS、JavaScriptといったテキストは、そのまま送るとサイズが大きい。そこでサーバーは送信前にデータを圧縮し、ブラウザが受け取って展開する。この仕組みが転送時の圧縮で、リクエストのAccept-Encodingヘッダーでブラウザが対応方式を伝え、サーバーがContent-Encodingヘッダーで実際に使った方式を返す。読者から見えないところで、日々のページ表示を支えている土台のような機能だ。

gzipは登場からかなり時間が経っているが、いまも事実上すべての環境で通じる共通語として残っている。Brotliはgzipよりよく縮む方式で、Googleがウェブのために設計した。同じファイルでもより小さくなるため、公開サイトの配信では定番になってきた。zstdはMetaが開発した比較的新しい方式で、IANAの圧縮方式一覧にも「zstd」という名前で正式に登録されている。

zstdはどのあたりに位置するのか

三つの方式は、縮む度合いと処理の速さのバランスが少しずつ違う。ざっくり言えば、圧縮率はBrotliがもっとも高く、gzipが控えめ、zstdはその中間あたりに収まる。一方で圧縮にかかる時間はzstdが速く、条件によってはBrotliの最高設定より数倍速く処理できるとされている。縮み具合と速さのどちらを取るかという、昔からある悩みに新しい落としどころを用意した方式だと言える。実測を比べた記事でも、zstdはgzipより一回り小さく縮めつつ、処理そのものは軽いという傾向が繰り返し報告されている。数字の細部は圧縮の強さの設定やファイルの中身で変わるため、自分のサイトで試してみて初めて分かる部分も多い。

この特性から、zstdはその場で圧縮して送る動的なコンテンツと相性がよい。ページを表示するたびに圧縮し直す場面では、少しでも速く処理できるほうが待ち時間の短縮につながるからだ。逆に、あらかじめ圧縮しておける静的なファイルなら、時間をかけてでも最小サイズを狙えるBrotliの最高設定が向く。一度圧縮すれば以後は使い回せるため、処理速度の差はほとんど問題にならない。用途によって使い分けるのが素直な考え方になる。

導入で押さえておきたい前提

実際に使うにはいくつか条件がある。まず、Chromeはzstdを安全な通信、つまりHTTPS接続のときだけ候補として提示する。暗号化されていない通常のHTTPではgzipやBrotliに戻る。常時HTTPS化が当たり前になった今ならほとんどのサイトが該当するが、頭の片隅には置いておきたい。ブラウザごとの対応状況はCan I useのような一覧で確認できる。

サーバーやCDN側の対応も欠かせない。CDN大手のCloudflareは以前からzstdを扱えるようにしており、配信基盤としての土台は整いつつある。自前のサーバーで有効にする場合は、使っているウェブサーバーソフトがzstdに対応しているかを確認することになる。ブラウザが受け取れても、送り出す側が方式を用意していなければ実際には使われない。両側がそろって初めて効いてくる点は、gzipやBrotliと同じ理屈だ。

中小規模のサイトでどう受け止めるか

では今すぐ全サイトがzstdに乗り換えるべきかというと、そこは冷静でよい。多くの中小企業サイトは、gzipやBrotliがすでに効いていれば体感できる速度は十分に出ている。zstdはあくまで選択肢が一つ増えたという話であり、乗り換えないと遅れるという性質のものではない。既存の圧縮が正しく効いているかをまず確かめるほうが、ずっと実益は大きい。

それでも、配信の速さを突き詰めたい場面や、動的に生成する部分が多いサイトでは、zstdが効いてくる余地がある。地方の制作現場でも、圧縮方式の違いと使い分けの勘どころを知っておけば、サーバーやCDNを選ぶときの判断材料が一つ増える。ブラウザ側の対応が一巡した今は、その知識を仕込んでおくのにちょうどよい頃合いだ。

WordPressの最新メンテナンス更新が直した不具合と自動更新の意味

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

WordPress本体に、公開済みのバージョンを細かく手入れする小さな更新が届いた。派手な新機能の発表ではないので見過ごされやすいが、日々サイトを預かる立場からすると案外大事な話なので、手短に共有したい。

WordPress.orgの告知によると、7.0.1が2026年7月9日に公開された。これは5月に登場したメジャー版7.0のあとに見つかった不具合を直すメンテナンスリリースで、ブロックエディター、管理画面、メディアまわりを中心に31件の修正が入っている。新しい機能を足すものではなく、すでにある動きを安定させるための更新という位置づけになる。

31件という数字だけ見ると多く感じるかもしれないが、メジャー版の直後に出る最初のメンテナンスリリースとしてはよくある規模だ。大勢が使い始めて初めて表面化する細かな不具合を、報告を受けて短い周期でまとめて直す。ブロックエディターや管理画面は制作者が毎日触れる場所なので、ここが少しずつ安定していくのは地味ながらありがたい。

マイナー更新は自動で当たることが多い

こうしたマイナー更新は、自動バックグラウンド更新が有効なサイトであれば、管理画面を開かなくても順に適用されていく。手動で運用している場合は、ダッシュボードの「更新」から今すぐ当てられる。特別な準備はいらず、作業としては数分で終わることがほとんどだ。

マイナー更新はメジャー版のように仕様が大きく変わるものではないため、更新でレイアウトやプラグインが急に動かなくなる心配は基本的に小さい。だからこそ自動更新に任せておける部分でもある。もちろん本番前にステージング環境がある案件なら、そこで一度確認してから本番へ、という手順を挟めばより安心できる。

WordPressは初期設定でマイナー更新だけを自動で当て、メジャー版は手動に委ねる作りになっている。つまり7.0.1のような更新は放っておいても順に届く一方、7.0から7.1へといった大きな移行は自分のタイミングで判断できる。運用を任されている側からすると、この線引きを理解しておくと、顧客に「どこまでが自動で、どこからが手動の判断か」を説明しやすくなる。トラブルを避けたいからと自動更新まで止めてしまうと、かえって細かな修正が当たらず古いままになりやすいので、少なくともマイナー更新は生かしておくのが無難だ。

現場では「問題なく動いているから触らない」という判断になりがちだが、メンテナンスリリースは表示の崩れやエディターの引っかかりといった、実際に手を止められる不具合を静かに潰している。安定性やセキュリティに関わる修正が含まれることも多いので、後回しにする理由はあまりない。中小企業のサイトや個人で回している案件ほど、更新通知に気づかず古いまま放置されやすいので、自動更新が効いているかを一度確認しておくとよい。

次のメジャー版7.1は、8月19日のWordCamp USに合わせて公開が予定されている。大きな変更点はそのとき改めて追うとして、まずは足元の7.0.1を当てて土台を整えておきたい。

フォームの入力欄が中身に合わせて伸縮するCSSの新プロパティ

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

問い合わせフォームやアンケートを作っていると、テキスト入力欄の高さで毎回悩みます。狭くすると長文が書きづらく、広くすると空白ばかりで間が抜けて見えます。落としどころを最初に決めても、実際に届く文章の長さは人によってばらばらで、どこかで無理が出ます。これまでは入力量に合わせて欄を伸ばすのに、文字数や高さを測って調整するJavaScriptを書くのが定番でした。入力のたびに走らせる地味な処理ですが、行数計算や初期化の順番でつまずくと、意外と手のかかる部分でもありました。

この処理をブラウザ側に任せられるCSSのプロパティが、主要ブラウザで使えるようになりました。field-sizingです。MDNによると、field-sizingは2026年に主要4ブラウザ(Chrome、Edge、Firefox、Safari)が出そろい、安心して使える段階を示すBaselineの「新規利用可能」に入りました。数行のCSSで、フォーム部品を中身に応じて伸び縮みさせられます。

fixedからcontentへ切り替えるだけ

field-sizingが取る値は2つだけです。初期値のfixedは、これまでどおり決まった大きさを保つ従来の挙動です。もう一方のcontentを指定すると、部品が中身の分だけの大きさに縮み、文字が増えるほど広がっていきます。使い方も、対象の要素にfield-sizingをcontentと書くだけで、特別な初期化やイベント登録はいりません。

textareaに指定した場合、まず横幅の許す範囲で広がり、幅の上限に達すると今度は行を増やして縦に伸びます。高さの上限まで来ると、そこで初めてスクロールバーが出ます。つまり、入力が短いうちは小さく、長くなるにつれて必要な分だけ育つという自然な動きになります。content指定時はrowsやcols属性は効かなくなり、大きさの決定はCSS側に移ります。

textareaだけでなく入力欄や選択肢にも効く

このプロパティが便利なのは、複数行のtextareaに限らない点です。一行のtextやsearchといった入力欄でも、中身の幅に合わせて欄が伸びます。placeholderを設定しておけば、その文言が収まる程度の幅で表示されます。ただし入力を始めた時点でいったん最小幅まで縮み、そこから中身に合わせて広がっていきます。ファイル選択の入力欄では、選んだファイル名の長さに合わせて幅が変わります。

selectのドロップダウンにも効きます。通常は一番長い選択肢に合わせた幅で固定されますが、content指定なら今選ばれている項目の幅にぴったり合わせて幅が変わります。並びが間延びしがちな選択式の項目を、すっきり見せられます。フォームを構成する部品のほとんどが、同じ一つのプロパティで足並みをそろえられるわけです。

暴走させないための上限指定

中身に合わせて自由に伸びるということは、極端に長い入力で欄がレイアウトを押し広げてしまう心配もあります。そこでmax-widthmax-heightで上限を、min-widthで下限を添えて、伸縮する範囲を枠にはめておくのが実務的です。上限まで来ればスクロールに切り替わるので、際限なく広がることはありません。逆に、widthやheightで固定寸法を決めてしまうと伸縮の余地がなくなるため、併用は避けます。文字数を制限したい欄では、maxlength属性が上限に達した時点で成長も止まります。

制作現場での使いどころ

中小企業サイトの多くは、問い合わせや資料請求といったフォームが成果につながる入口です。入力欄が窮屈だと、長めの相談内容を書く途中で書きづらさを感じて離脱されることもあります。入力に応じて欄が自然に広がるだけで、書き心地の印象は変わりますし、送信前に全文を見渡せる安心感にもつながります。

これまで数十行のスクリプトで実装していた自動リサイズが、一行のCSSで済むのも見逃せません。JavaScriptが減れば、その分だけ表示の負荷も保守の手間も軽くなります。Firefoxは対応が最後発だった経緯があるため、古い環境も想定する案件では、content指定を土台にしつつ、非対応のブラウザではこれまでどおりの固定サイズで問題なく使えるという前提で組んでおくと安心です。あってもなくても壊れない、あれば快適になるという足し方であれば、今日から少しずつ取り入れられます。ブラウザ標準の機能で書き心地を底上げできる場面は、着実に増えています。

画像と同じ書き方で動画や音声も遅延読み込みできるHTML属性

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

画像の遅延読み込みでおなじみの loading=”lazy” が、video要素と audio要素でも使えるようになった。要素にこの属性を書き足すだけで、ページを開いた瞬間ではなく、その要素が画面に近づいたタイミングまで読み込みを後回しにできる。Chrome 148 で標準の挙動として全プラットフォームに行き渡り、特別な準備なしにそのまま動くようになっている。

面白いのは、後回しになる対象が動画本体のデータだけではない点だ。ポスター画像やメタデータの取得、それに autoplay の再生開始まで、要素が表示領域に入る手前まで待つ。これまでも preload=”none” やメタデータのみの指定で動画データの通信量はある程度抑えられたが、ポスター画像の取得まで含めて遅らせられるのは新しい。書き方は img要素や iframe要素の loading=”lazy” とまったく同じで、WHATWG の仕様に沿った標準の動きとして扱われる。特別なライブラリを読み込む必要はなく、既存のマークアップに一語足すだけで完結する手軽さがある。

実務でうれしいのは、専用の JavaScript を用意しなくてよくなることだ。従来はページ下部に並ぶ動画を遅らせるために、IntersectionObserver で表示位置を監視する自前のコードを書くのが定番だった。その方法だと、スクリプトが動くタイミングとブラウザ内部の読み込みスケジュールが微妙にずれて、境目でのちらつきや二重の読み込みに気を配る必要がある。属性ひとつに任せれば、こうした細かな調整から解放される。preload 属性の指定自体はこれまでどおり効くが、その判断が要素の表示まで遅れる、と理解しておけばよい。

ひとつ気を配りたいのは、レイアウトのずれだ。メタデータの取得が後回しになると、動画の縦横比が分かるのも遅れるため、読み込みの瞬間に高さが変わって周囲がガタつくことがある。video要素に width と height を指定しておくか、CSS の aspect-ratio で先に場所を確保しておけば、この飛び跳ねは避けられる。遅延読み込みと表示の安定は、セットで考えると気持ちよく収まる。

使いどころも選びたい。ページを開いてすぐ目に入る主役の動画に付けると、かえって表示が一拍遅れて見えることがある。向いているのは、スクロールした先に置いた紹介動画や、複数の音声サンプルを並べたページなど、最初の画面には映らない要素だ。折り返しより下にあるものを選んで付ける、という素直な使い分けでよい。

対応はまず Chrome 系が先行し、ほかのブラウザは順次追随していく段階にある。とはいえ非対応のブラウザでは属性が無視されて従来どおり読み込まれるだけなので、progressive enhancement として今から書き足しておいて困ることはない。動画を多く載せる商品紹介ページやサービスサイトで、最初の表示を軽くするための一行として頭の隅に置いておきたい。細かな挙動はweb.devの解説にまとまっている。

CSSのurl()に改ざん検知やCORSの指定を書けるようになった新機能

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

ウェブサイトで外部の画像やフォントを読み込むとき、CSSでは長らくurl()にファイルの場所を書くだけでした。別ドメインからの取得方法や、ファイルが途中で差し替えられていないかの検証といった細かい挙動は、HTML側の属性やサーバー設定に任せるしかありませんでした。読み込みの見た目はCSSで書けるのに、読み込み方の安全面はCSSの外にある、という状態が続いていたわけです。Chrome 150(2026年6月30日公開)で、このurl()に読み込み方法そのものを書き足せる仕組みが正式に使えるようになりました。

url()の後ろに指定を書き足す

新しく加わったのは、url()の中でファイルのURLに続けて指定を書けるという書き方です。CORSの取得モードを決めるcross-origin()、ファイルの中身を検証するintegrity()、参照元の送り方を決めるreferrer-policy()の三つが用意されました。いずれもCSSの値に関する仕様で定められたもので、HTMLの属性でできていたことをスタイルシート側に持ち込む位置づけです。

たとえばbackground-image: url("photo.png" cross-origin(anonymous))と書けば、その画像はCORSの匿名モードで取得されます。これまでこうした制御はHTMLの<img><link>の属性でしか指定できず、CSSの中で完結させることはできませんでした。対象は画像だけでなく、フォント、SVGの参照、@importで読み込む別のスタイルシートにも同じ指定が使えます。装飾のためにCSSから直接読み込んでいたファイルほど、恩恵を受けやすい場所だと言えます。

ファイルの改ざんを検知する

三つの中でも制作の現場で注目したいのがintegrity()です。これはHTMLのSubresource Integrity(サブリソース完全性)と同じ考え方で、あらかじめ計算しておいたファイルのハッシュ値を書いておき、実際に取得したファイルのハッシュと一致するかを確認します。ハッシュはSHA-256やSHA-384といったアルゴリズムで求めた値を指定する形で、HTMLのintegrity属性と同じ書式です。一致しなければブラウザはそのファイルを読み込まず、表示にも使いません。

CDNに置いたフォントや、外部サービスから配信される装飾用ファイルが、配信元で差し替えられていないかを検証できるということです。Chromeはこのintegrity()を実際に照合しており、ハッシュが合わないファイルの描画をブロックします。共有のCDNを使う中小企業のサイトでも、想定していないファイルが紛れ込むリスクを一段下げられます。フォントを更新したときはハッシュも合わせて書き直す運用になるため、更新の手順に一つ手間が増える点だけは頭に入れておきたいところです。

CORSと参照元の指定

cross-origin()は別ドメインのファイルを取得するときのモードを指定します。フォントのように、そもそもCORSの許可がないと読み込めない種類のファイルもあり、これまではHTML側で気をつける必要がありました。referrer-policy()はファイルを取りに行くときに送る参照元情報の範囲を決めるもので、どのページから読み込んだかという情報を外部に渡しすぎないよう調整できます。いずれもこれまでHTMLの属性やHTTPヘッダーで設定していた項目を、スタイルシート側に寄せられるのが利点です。読み込みに関わる設定が一か所にまとまるぶん、後から見直すときの見通しもよくなります。

取り入れるときに見ておきたいところ

ブラウザ対応には差があります。Chrome 150は三つとも扱えますが、Safariはcross-origin()referrer-policy()を先行して実装した一方で、integrity()にはまだ対応していないとされています。改ざん検知を前提に組む場合は、対応していないブラウザではその検証が効かないことを踏まえて設計する必要があります。

この書き方は既存のCSSに追記する形で使えるため、対応ブラウザでは効き、非対応ブラウザでは従来どおり読み込まれるという形に収まります。まずは重要なフォントや外部の装飾ファイルなど、差し替えられると影響が大きい部分から試すのが現実的です。外部ファイルへの依存が多いサイトほど、少しずつ取り入れておく価値のある機能だと言えそうです。

パスワードの代わりになるパスキー、普及の実態と導入の見極めどころ

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

ログイン画面からパスワード入力欄が消えていく流れが、ここ数年で少しずつ現実味を帯びてきた。指紋や顔認証、あるいは端末の画面ロックだけでサインインできるパスキーという仕組みが、主要なブラウザとプラットフォームにひととおり行き渡ったからだ。ただ、身の回りの中小企業サイトを見渡すと、まだパスワード入力欄が主役のままという現場も多い。実際のところ、どこまで広がっているのか。制作者として知っておきたい現状と、導入をどう見極めるかを整理してみたい。

パスワードをやめる話が、ようやく形になってきた

パスキーは、FIDO Allianceとブラウザ標準のWebAuthnを土台にした認証方式だ。端末の中に秘密鍵を保管し、サーバーには公開鍵だけを預ける。ログイン時にはその鍵ペアで署名をやり取りするので、パスワードのように入力した文字列が盗まれたり、偽サイトに打ち込んでしまったりする余地がない。フィッシングに強いと言われるのはこのためだ。

振り返れば、パスワードの弱さを補う工夫はずっと続いてきた。SMSで送る確認コードや、認証アプリが表示する使い捨ての番号を組み合わせる二要素認証がその代表だ。ただ、これらは入力の手間が増えるうえ、SMSは横取りされる危険が指摘され、偽サイトに確認コードごと打ち込んでしまう事故も後を絶たなかった。パスキーは、そもそも打ち込む秘密を作らないという発想で、この積み重なった課題を根本から解こうとしている点が違う。

考え方そのものは2022年ごろから提唱されていたが、規格や運用の裏付けが整ってきたのはここ最近のことだ。米国のNIST(米国立標準技術研究所)は2025年7月に認証基準の改訂版であるSP 800-63-4を確定させ、パスキーを一定の保証レベルを満たす認証手段として正式に位置づけた。規制やガイドラインの側からも後押しが加わり、単なる新機能ではなく、標準的な選択肢のひとつとして扱われ始めている。

主要プラットフォームが出そろった

普及を支えているのは、利用者が特別な準備をしなくても使える環境が整った点だ。AppleのiCloudキーチェーン、GoogleのGoogleパスワードマネージャー、MicrosoftのEntra IDが、いずれも標準でパスキーに対応している。加えて1PasswordやBitwardenといったパスワード管理ソフトも受け皿になり、端末をまたいで鍵を同期できるようになった。

数年前までは、鍵を作った端末を失くしたらどうするのかという不安が導入の足かせだった。クラウド同期が当たり前になったことで、その懸念はかなり薄れている。利用者から見れば、スマートフォンの生体認証でそのままウェブサービスにログインできる感覚に近い。土台が広く共有されたことが、これまでとの大きな違いだ。

実際にどこまで広がっているのか

では、世の中のサイトはどれくらい採用しているのか。ここに興味深い調査がある。2026年のPAM(受動・能動測定)会議で発表された「State of Passkey Authentication in the Wild」という論文だ。研究チームはFidentikitという計測用のクローラーを作り、UI要素やDOM構造、WebAuthnの呼び出し、通信パターンなど43の判定基準を用意して、アクセス数上位10万サイトを一斉に調べた。

結果はどうだったか。調査対象のうち11.3%がパスキーに対応していたという。これは、人手でまとめた既存の対応サイト一覧と比べて62倍という数字で、実際の普及は想像以上に進んでいたことになる。ただし手放しでは喜べない。対応が確認できたのはアクセス数の多い人気サイトに偏っており、しかも自前で実装するのではなく、外部のIDプロバイダー経由で提供しているケースが目立った。裾野が広がったというより、大手が先行しているという構図が見えてくる。

この偏りは、制作の現場感覚とも重なる。大手のように専任の担当者や潤沢な予算があれば、外部のIDプロバイダーを組み込んだり、独自にWebAuthnを実装したりする余力がある。一方で、少人数で運用する会社サイトや小さな会員制サービスでは、既存のログイン機構に手を入れること自体が負担になりやすい。技術が広く使える状態になっても、実際に運用へ載せるかどうかは、体制や優先順位に左右される。数字の裏側には、こうした現場ごとの事情がにじんでいる。

普及を測りにくくしている「見えなさ」

この調査からもうひとつ読み取れるのは、パスキーが外から見えにくい形で埋め込まれているという事実だ。論文によれば、パスキー対応の82.3%は、JavaScriptを実行してAPIの動きを観測しないと検出できなかった。静的なHTMLを眺めるだけでは対応の有無すら判別できない、というわけだ。

実装の仕方もばらばらだ。「パスキーでサインイン」というボタンをはっきり見せるサイトもあれば、複数の手順の奥に隠しているサイト、入力欄に候補を出す条件付きの方式に頼るサイトもある。標準化された案内の入り口が存在しないため、利用者にとっても、どこでパスキーが使えるのか一目では分からない。制作の現場から見ると、この不統一さこそが、パスキーがまだ日常に溶け込みきっていない理由のひとつに思える。使える技術と、使いやすい体験は別物だということだ。

サーバーと端末のズレをそろえるSignal API

実装のつまずきどころとしてよく話題になるのが、サーバー側の登録情報と、端末やパスワード管理ソフトが覚えている鍵情報のズレだ。利用者が管理画面で鍵を削除しても、手元のパスワード管理ソフトには古い鍵が残り、ログイン画面で使えない候補が出てきてしまう。地味だが、迷わせる原因になる。

これを解消するために用意されたのがWebAuthn Signal APIだ。Chromeではバージョン132以降のデスクトップとAndroidで使える。サーバー側の状態を鍵の保管側に伝えるための仕組みで、大きく三つの手段がある。無効になった鍵を知らせるsignalUnknownCredential、有効な鍵の一覧をまとめて送るsignalAllAcceptedCredentials、そして利用者名や表示名の更新を伝えるsignalCurrentUserDetailsだ。これらを使えば、Googleパスワードマネージャーのような対応済みの保管側が、実体に合わせて古い候補を消したり整えたりできる。地味な機能だが、こうした細部の詰めが、実際の使い勝手を左右する。

中小企業サイトはどう構えるか

では、規模の大きくないサイトを預かる制作者はどう向き合えばよいか。まず、いますぐ全面移行を迫られる話ではない、というのが率直なところだ。調査が示すとおり、先行しているのは大手であり、一般的な会員サイトや小規模なサービスでは、パスワードと併用しながら段階的に取り入れる形が現実的だろう。

取り入れる場合のコツも見えてきている。既存のパスワードでログインした直後に「パスキーを作りませんか」と促す自動移行の流れを用意すると、利用者はほとんど手間を感じずに登録できる。導入例では、こうした案内がなめらかなサイトで、半年のうちに5割から7割の利用者が自発的にパスキーへ切り替えたという報告もある。押しつけずに、自然な導線として置くことが鍵になる。

RESONIXでもウェブ制作の現場で認証まわりの相談を受けることがあるが、パスキーはまだ「知っておくべき次の選択肢」という段階だと感じている。無理に急ぐ必要はない一方で、大手サービスで当たり前になれば、利用者の期待値も追いついてくる。仕組みの成り立ちと、いまの普及の偏り、そして実装の細かな落とし穴をおさえておけば、いざ必要になったときに落ち着いて向き合える。パスワードのない世界は、まだ地平線の向こうにあるが、確実に近づいてきている。

命名規則に頼らずCSSの適用範囲を限定できる@scopeが全ブラウザ対応

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

CSSを書いていて、あるコンポーネントに当てたはずのスタイルが思わぬ場所まで波及してしまった経験は、制作に携わる人なら一度はあるはずです。ページ全体に効くというCSSの性質は便利な反面、扱う要素が増えるほど管理を難しくします。この課題に正面から向き合う@scopeという仕組みが、Safari 26.4の対応で主要ブラウザに出そろい、Baselineの新しく使える機能に加わりました。

これまでのCSS管理が抱えていた悩み

ウェブサイトのスタイルは、原則としてページ全体に対して効きます。あるボタンの色を変えたつもりが、別の場所にある似た要素まで巻き込んでしまう。ページ数が少ないうちは目視で追えますが、扱う画面が増え、複数人で長く運用するようになると、どこに何が効いているのかを把握しきれなくなっていきます。

こうした事故を避けるため、制作現場では長らく命名規則という工夫が使われてきました。BEMのように、クラス名へ役割や階層を細かく書き込む方式です。名前が重複しなければスタイルも衝突しない、という考え方で、多くの現場を支えてきた実績があります。

ただ、この方法はクラス名が長くなりがちで、書き手によって命名の揺れも生まれます。CSSの設計を保つために、人間の側が規律を守り続ける必要がありました。過去にはShadow DOMのように構造ごと分離する手段もありましたが、導入のハードルは低くありません。@scopeは、この範囲を区切るという役割を、CSSの標準機能そのもので肩代わりしようという発想です。

@scopeが実際にどう書けるのか

基本の形はシンプルです。適用範囲の起点となる要素を指定し、その内側だけにスタイルを効かせます。たとえば@scope (.card) { img { border-radius: 8px; } }と書けば、.cardの内側にある画像だけに角丸が当たります。同じimgでも、カードの外にある画像には影響しません。セレクタを.card imgのように長く連ねなくても、範囲を宣言するだけで意図が伝わります。どの要素にどのスタイルが効くのかが宣言の形からそのまま読み取れるため、後から見返したときの分かりやすさにもつながります。

この範囲の起点を、スコープの上限と呼びます。範囲の中で使える:scopeという擬似クラスは、その起点そのものを指し示すものです。囲った領域全体の背景や余白をまとめて整えたいときなど、起点の要素自体にスタイルを当てたい場面で役立ちます。

下限を決めて入れ子の穴をつくる

@scopeのもう一つの特徴は、範囲の下限も指定できる点です。起点と終点の二つを書くと、その間にある要素だけが対象になります。@scope (.card) to (.card__body) { ... }のように書けば、.cardから.card__bodyの手前までが範囲になります。

カードの中にさらに別のコンポーネントが入れ子になっている場面を思い浮かべてください。外側のカード用のスタイルが、内側に置いた小さな部品まで無用に踏み込んでしまうと、見た目が崩れます。下限を切っておけば、その内側は範囲の外として扱われ、影響を受けません。中央に穴が空いたドーナツになぞらえて、ドーナツスコープと呼ばれることもあります。ニュース一覧の中に埋め込みカードが混ざるような、実際のサイトでよくある構造で効いてくる機能です。

制作現場で使うときに知っておきたいこと

便利な一方で、優先度の扱いには注意が必要です。@scopeで囲んでも、セレクタ自体の詳細度が下がるわけではありません。範囲を絞ったから既存のスタイルに必ず勝てる、とは限らない点は押さえておきたいところです。既存のCSSと併用するときは、どちらが優先されるかを確かめながら進めると安全です。

もう一つ、範囲内で複数の起点が競合したときは、DOM上でより近い起点のスタイルが優先されます。この近さによる判定は従来のCSSにない考え方なので、頭で覚えるより、小さなサンプルで実際に挙動を確かめておくほうが早く馴染めます。

命名規則や大掛かりな設計手法に頼らずに、必要な範囲だけへスタイルを届けられる。少人数で長く手を入れていく中小企業のサイトほど、この素直さは効いてきます。既存のCSSをいきなり書き換える必要はありません。まずは新しく作るコンポーネントの一部で、小さく試すところから始めてみてはいかがでしょうか。

文字を箱の幅にぴったり収めるCSSの新しいプロパティ

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

見出しやキャッチコピーの文字を、置いた箱の幅ぴったりに収めたい。制作の現場では誰もが一度は悩む場面だが、これまではJavaScriptで幅を測って調整したり、文字数を数えてフォントサイズを手で決めたりと、面倒な手当てが必要だった。専用の小さなライブラリを読み込んで文字を伸縮させたり、どうしても揃わない箇所はテキストを画像にして逃げたりと、割り切りを迫られることも多かった。この地味な悩みに、CSSだけで答える新しいプロパティが登場した。

Chromeの開発者向けドキュメントによると、2026年6月30日に安定版となったChrome 150で text-fit プロパティが使えるようになった。テキストノードのフォントサイズを、それを包む箱の幅に合わせて自動で拡大縮小してくれる仕組みだという。文字が短ければ大きく、長ければ小さく、箱の横幅を埋めるようにブラウザ側が調整する。開発者が文字数を数えて刻む必要も、スクリプトで幅を測る必要もなくなるというわけだ。

可変長のテキストで効いてくる

この機能が生きるのは、入る文字の長さが事前に読めない場面だ。CMSで運用しているサイトの見出し、商品名やキャンペーン名のように毎回長さが変わるテキスト、複数言語で文字量が大きく違うページ。こうした箇所でフォントサイズを一定に保つと、短い文字はスカスカに見え、長い文字ははみ出してしまう。text-fit を当てておけば、どんな文字数でも横幅が揃い、ページ全体の見た目が安定する。

似たことを狙う手段として、これまでは clamp() やビューポート単位でフォントサイズを画面幅に連動させる書き方が使われてきた。ただしそれらはあくまで画面の広さに比例させるもので、実際に入っている文字の量には反応しない。text-fit は箱に収まる文字そのものを見て縮尺を決める点が違い、狙いがより素直だ。中小企業のサイトでも、トップのヒーロー見出しやバナーのコピーは案件ごとに長さがまちまちで、運用の途中で文言が差し替わると崩れやすい。ブラウザが幅に合わせてくれるなら、こうした崩れの心配が減り、入稿の自由度も上がる。

ただし今のところ対応しているのはChromeが先行している段階で、ほかのブラウザはこれからだ。すぐに全環境で頼るのではなく、対応していないブラウザでは通常のフォントサイズで表示されるよう土台を整えたうえで、対応環境だけ恩恵を受ける形で足すのが現実的だろう。導入する際も、極端に長い文言を入れたときに文字が小さくなりすぎて読みにくくならないか、想定される最大の長さで一度確認しておくと安心だ。閲覧者の環境によって見え方が変わる機能なので、主要な組み合わせでざっと表示を見ておく手間はかけておきたい。長らくJavaScriptに任せていた処理が、また一つ標準機能に取り込まれていく流れの一つとして覚えておきたい。