loader image

[2026年9月第2週] Web業界ウィークリー:Safari 27とcustomizable select・WordPress 7.1.1は9/17

当ページのリンクには広告が含まれています。
Web業界ウィークリー 2026年9月第2週

今週(9/7〜9/13)は、9月9日のAppleのイベントでiOS 27の公開日が9月14日(月)と発表され、Safari 27の一般公開が明日に迫りました。9月8日には予告どおりChrome 153が2週間サイクルの初回として公開され、WordPressは7.1.1のRC1が出ています。

読む章の目安です。フォームやUIを組むなら1章と2章、ブラウザの更新計画は3章、WordPress案件を持っているなら4章と5章です。年末までの更新予定は4章の図にまとめました。なおFigmaは今週、リリースノートの更新がありませんでした。

目次

Safari 27 が9月14日(月)に一般公開

9月9日のAppleのイベントで、iOS 27の配信開始が9月14日と発表されました。これに合わせてSafari 27が一般ユーザーに届きます。6月のWWDCでベータとして発表された内容で、新機能58、修正525、非推奨4という大きめの更新です。6月第3週号では修正件数を「1,100以上」と書いていましたが、WebKit公式の記載は525件でした。 訂正します。

出典: WebKit — News from WWDC26: WebKit in Safari 27 beta / 9to5Mac — Apple confirms iOS 27 release date: September 14

制作で効きそうなもの:

  • customizable select: appearance: base-select でネイティブの <select> を作り込める(2章で詳しく)
  • :heading 疑似クラス: h1, h2, h3, h4, h5, h6 と列挙していたセレクタを :heading 1つで書ける
  • stretch キーワード: 親に合わせて伸ばすサイズ指定。-webkit-fill-available で代用していた箇所を置き換えられる
  • スクロールアンカリング: 画像の読み込みや広告の挿入で上側の要素が増えても、読んでいる位置がずれない。overflow-anchor で制御できる

スクロールアンカリングは、記事中に広告を入れているメディアほど体感が変わるはずです。 読書中に画像の読み込みで本文がずれる現象が、iPhoneでも抑えられます。ただしSearch ConsoleなどのCLSの数値はChromeの利用者から集めたデータなので、Safari 27が出ても数字にはほぼ表れません。効果はiPhone実機で見て確かめるのが現実的です。

なお前号で「Safariは安定版未対応」と書いた attr() の拡張と alpha() は、6月のベータ発表記事では触れられていませんでした。 Technology Previewには入っているので、正式版に含まれるかは公開後のリリースノートで確認します。それまでは機能判定を挟む前提で使ってください。

💡 今すぐ試せる: 9/14以降に手元のiPhoneを1台iOS 27に上げ、広告や遅延読み込み画像が多い記事ページで本文のずれが減っているか見る。検証用にiOS 26の端末かシミュレータを1つ残しておくと、利用者の多い旧環境も確認し続けられる

customizable select が2つ目のエンジンへ — ネイティブの select を作り込む

customizable select は6月第3週号で、Chromeの新機能としてコード付きで紹介しました。当時Safari 27はベータでしたが、9月14日の正式版で、Chromium系に続きWebKitでも使えるようになります。 Firefoxは現時点でNightly版のフラグ付きで試作している段階です。ただしSafari 27が届くのはiOSを27に上げた人だけなので、利用者全体に行き渡るには時間がかかります。

See the Pen customizable select — ネイティブの select を CSS だけで作り込む by BaseKENT (@basekent) on CodePen.

出典: MDN — Customizable select elements / Chrome for Developers — The select element can now be customized with CSS

/* select 本体と、開いたリスト(::picker)の両方に指定する */
select,
::picker(select) {
  appearance: base-select;
}

select::picker-icon      { content: "▾"; }   /* 矢印 */
select:open::picker-icon { rotate: 180deg; }
option::checkmark        { content: "✓"; }   /* 選択中の印 */
<select>
  <button><selectedcontent></selectedcontent></button>
  <option>...</option>
</select>

option の中に色のドットや補足テキストを入れられ、<selectedcontent> を置くと、選ばれた option の中身がボタン側にそのまま映ります。

一番の利点は、未対応ブラウザで壊れないことです。 appearance: base-select を解釈できない環境では、ただの普通の select として表示されます。フォーム送信もキーボード操作もそのまま動くので、Firefox対応を待たずに入れても事故になりません。自作のドロップダウンを抱えている案件は、次の改修で置き換えを検討していい時期に入ったと思います。

ひとつ注意したいのが、option の中に入れたタグの扱いです。 従来のHTML解析では option 内のタグは取り除かれて文字だけが残るため、補足テキストを入れると「Webサイト制作新規・リニューアル」のように連結して見えます。デモでは括弧をspanで囲んで置き、対応ブラウザではCSSで隠す形にしました。

💡 今すぐ試せる: お問い合わせフォームの select に select, ::picker(select) { appearance: base-select; } を足し、Chromeで見た目が変わること、Firefoxで普通の select のまま選択肢の文字が崩れず読めることを確認する

Chrome 153 公開(9/8)— 2週間サイクルの初回

前号で予告したとおり、9月8日にChrome 153が公開されました。これが2週間リリースサイクルの初回で、次のChrome 154は9月22日(火)の予定です。エンタープライズ向けのExtended Stableは8週間サイクルのまま据え置かれます。

出典: Chrome 153 Release Notes / 9to5Google — Google Chrome starts two-week release cycle with version 153

開発者向けの主な変更:

  • 片方の軸だけのスクロールコンテナ: overflow: scroll clip のように、スクロールする値と clip を組み合わせられる。overflow は「横 縦」の順に書くので、この例は横だけスクロールさせ、縦ははみ出しを切るだけ、という指定になる。position: sticky も軸ごとに別の祖先を基準にできる
  • <camera> / <microphone> 要素: カメラやマイクの利用を、ブラウザ側が描画する専用のボタンで宣言的にリクエストする。8月第1週号で紹介した <usermedia> と同じく、許可の取得をHTML要素で扱う方向の機能
  • Iterator.zip() / Iterator.zipKeyed(): 複数のイテレータを揃えて進めるメソッド
  • XMLの解析処理をRustへ移行: DOMParser などでのメモリ安全性を高める内部変更

表組みや横長のコードブロックで、意図しない方向にスクロールバーが出て困った経験がある人には効く変更です。

💡 今すぐ試せる: 横スクロールさせている表やコードブロックに overflow: auto clip を指定し、意図しない縦スクロールが消えるかChrome 153で試す(常にバーを出す scroll より、必要なときだけ出す auto が実用的)

WordPress 7.1.1 は9月17日(木)予定 — マルチサイトは要注意

9月10日にWordPress 7.1.1のRC1が公開されました。正式版は9月17日(木)の予定で、7.1で入り込んだ不具合を直すメンテナンスリリースです。RC期間中に新たな問題が見つかれば日程がずれる可能性があります。

前号では「日程はまだ確定していない」と書きましたが、この日程は9月2日の時点で告知されていました。 見落としでした。訂正します。

出典: Make WordPress Core — WordPress 7.1.1 RC1 is now available / Make WordPress Core — WordPress 7.1.1 Release Schedule

2026年9月から年末までのブラウザとWordPressの更新カレンダー
これから年末までの更新カレンダー

実務で押さえておきたい修正:

  • マルチサイトでのユーザー削除(#66012): 削除時に投稿の引き継ぎ先を選ぶプルダウンが表示されず、コンテンツが黙って消える
  • WP_Hook::$callbacks のキーが整数になる(#65919): キーを文字列前提で扱っているコードが致命的エラーになる
  • インデックスカラーのPNGでサムネイルが元画像より大きくなる(#65922): 7.1で入ったブラウザ側の画像処理による不具合

マルチサイトを運用しているなら、7.1.1が出るまでユーザー削除は控えてください。 引き継ぎ先を選べないまま削除が進み、そのユーザーの投稿が失われます。黙って消えるので、気づいたときには手遅れというタイプの不具合です。

3つ目のPNGの件は、8月第4週号で「画像処理がブラウザ側に移ったのは共有サーバーのサイトほど効く」と書いた機能の副作用です。 利点はそのままですが、減色したPNGを多用しているサイトでは容量がかえって増える場合がある、という点は補足しておきます。7.1期間中にPNGを多くアップしたサイトは、7.1.1適用後にサムネイル再生成プラグインで作り直すと容量を戻せます。

なおRC1の修正一覧には、ACF Blocks V2などiframe化に関わる修正は見当たりませんでした。 互換プラグインで運用しているサイトは、7.1.1公開後の再確認を予定どおり行ってください。

💡 今すぐ試せる: 管理しているサイトの中にマルチサイト構成があるかを確認し、あれば9/17まではユーザー削除をしない運用ルールを共有しておく

WordPress 7.2 は12月予定 — InnerBlocksの書き方は今のうちに

9月10日のWordPress開発者ブログで、次のメジャーである7.2の日程が示されました。Beta 1が10月20〜22日、正式版が12月8〜10日の予定です。

出典: WordPress Developer Blog — What’s new for developers? (September 2026)

カスタムブロックを作っている人に関係するのが、InnerBlocksのテンプレート定義の移行です。これまでコンポーネントのpropsで渡していたテンプレートを、ブロックタイプの設定側で定義する形に移す流れで、7.2より前の対応が推奨されています。ほかにblock.jsonのスキーマへの autoRegister フラグ追加なども挙がっています。

12月上旬の正式版は、年末の駆け込み案件の公開時期とちょうど重なります。 Beta 1が出る10月下旬にステージングで一度触っておけば、12月に慌てずに済みます。

💡 今すぐ試せる: カスタムブロックのコードで InnerBlockstemplate をpropsで渡している箇所を検索し、7.2までに移行が必要な箇所を洗い出しておく

今週のひとこと

customizable selectのように、未対応ブラウザでも壊れない機能が増えてきました。対応が揃うのを待つより、普通に動くものから先に使う方が、2週間ごとに更新が来る今のペースに合っています。WordPressも7.1.1と7.2の日程が見えたので、年末までの更新計画を立てておきましょう。

A created this document

ベースケント合同会社(BASE KENT)代表 / Webデザイナー・Web制作者。

「空白をデザインする」をテーマに、Webコンテンツ制作とデジタルマーケティングを展開。
暮らしとWeb制作の実用情報メディア「Ex-TORANOMAKI」、雑学メディア「どうせヒマなら」を運営しています。

目次