2025/12/20 7:13

CSS Grid Lanes

RSS: https://news.ycombinator.com/rss

要約▶

Japanese Translation:

Safari Technology Preview 234 は CSS Grid Lanes を導入しました。これは、開発者が JavaScript なしで CSS 内で直接モザイク風グリッドを構築できる新しいレイアウトモードです。

開発者は
display: grid-lanes;
と標準の Grid 構文（
grid-template-columns
、
repeat(auto-fill, …)
など）を組み合わせて柔軟なレーンを作成します。アイテムは自動的に最も近い上部レーンに配置され、無限スクロールとタブフレンドリーなナビゲーションが可能になります。

高度な機能 には、レーンサイズの変更（
minmax(8rem, 1fr) minmax(16rem, 2fr)
）、アイテムの跨ぎ（
grid-column: span N
）、明示的配置（
grid-column: -3 / -1
）および新しい
item-tolerance
プロパティ（デフォルトは
1em
）が含まれます。これは、サイズ差に基づいてアイテムがレーンをどれだけ積極的にシフトするかを制御します。レーンは列方向（「ウォーターフォール」）または行方向（「レンガレイアウト」）で向きを設定でき、デフォルトの流れは通常です。

実装は 2022 年中頃に開始され、Safari TP 234 で利用可能です。ライブデモは https://webkit.org/demos/grid3（写真ギャラリー、ニュースレイアウト、博物館サイト、メガメニューフッター）でホストされています。CSS Working Group はまだプロパティ名と向きの構文（
grid-lanes-direction
か
grid-auto-flow
の再利用）を最終化中です。その決定が下り次第、この機能は本番環境で使用できるようになります。

開発者にとって、これは追加の JavaScript を必要とせず、より高速でパフォーマンスの高いレスポンシブレイアウトを実現することを意味し、ブラウザベンダーは同様の機能を採用する可能性があり、将来のウェブデザイン標準に影響を与えるでしょう。

本文

ウェブ上のモザイクレイアウトの未来がやってきました！
Mozilla が基礎を作り、Apple の WebKit チームが数年間努力し、すべてのブラウザと CSS ワーキンググループで何度も議論した結果、動作原理が明らかになりました。

CSS Grid Lanes とは

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Safari Technology Preview 234 で今日からお試しください。

Grid Lanes の仕組み

このクラシックレイアウトを作る手順を詳細に解説します。
まずは HTML:

<main class="container">
  <figure><img src="photo-1.jpg"></figure>
  <figure><img src="photo-2.jpg"></figure>
  <figure><img src="photo-3.jpg"></figure>
  <!-- etc -->
</main>

display: grid-lanes

を

<main>

要素に適用すると Grid コンテナが生成されます。

grid-template-columns

で CSS Grid の力を使って「レーン」を作ります:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;   /* レーンとアイテム間の隙間 */
}

これだけです！メディアクエリやコンテナクエリを使わず、3 行の CSS ですべての画面サイズに対応する柔軟なレイアウトが完成します。

Grid のパワー

レーン幅の変更

狭い列と広い列を交互に作る例:

.container {
  display: grid-lanes;
  grid-template-columns:
    repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr))
    minmax(8rem, 1fr);
}

アイテムの跨ぎ

必要に応じてレーンを跨ぐ:

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
  gap: 2lh;
}
article { 
  grid-column: span 1; 
}

@media (1250px < width) {
  article:nth-child(1)   { grid-column: span 4; }
  article:nth-child(2-8) { grid-column: span 2; }
}

明示的配置

列数に関係なくヘッダーを最後の列に置く:

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
}
header {
  grid-column: -3 / -1;
}

配向の変更

水平方向レイアウト（ウォーターフォール）:

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

垂直方向レイアウト（レンガ型）:

container {
  display: grid-lanes;
  grid-template-rows: 1fr 1fr 1fr;
}

grid-auto-flow

の新しいデフォルト値 (normal) は、どちらのテンプレートを定義したかに応じてブラウザが列または行を作るか決めます。

配置感度

item‑tolerance はアイテム配置時にアルゴリズムがどれだけ厳密になるかを制御します。
デフォルト:

1em

。値を大きくすると並び替えが減り、低くすると配置が詰まります。

/* 例 */
.item {
  /* item-tolerance: 0.5em; */   /* 任意で上書き可 */
}

実際に試してみる

webkit.org/demos/grid3

のすべてのデモが新構文に更新され、画像、メガメニュー、フッターなどを網羅しています。

メガメニューフッター例:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}

今後の展望

CSS ワーキンググループはまだいくつか詳細を最終化中ですが、コア機能は準備完了です。
デモを作成し、バグや改善点を共有し、新しいユースケースをぜひ提案してください。

リンク・コメント・アイデアは Bluesky または Mastodon で Jen Simmons に DM してみてください。

私たちは 2022 年中頃からこの機能に取り組み、WebKit への実装と仕様策定を進めています。 CSS Grid Lanes を使って皆さんが作るものを見るのが待ちきれません！

同じ日のほかのニュース

一覧に戻る →

2025/12/19 0:01

Mistral OCR 3

## Japanese Translation: Mistral OCR 3 は、従来のエンタープライズツールと AI ネイティブ競合他社の両方を上回る高精度な OCR モデルです。フォーム、スキャン文書、複雑な表、および手書き文字に対して Mistral OCR 2 と比較し、全体で 74 % の勝率を達成します。このモデルは、1,000 ページあたり $2（50 % Batch‑API 割引適用で 1,000 ページあたり $1）と価格設定されており、シンプルな API または Mistral AI Studio のドラッグ＆ドロップ Document AI Playground を通じてアクセスできます。主な強みは次のとおりです： * **手書き文字サポート** – 連続体文字、混合内容、および印刷フォーム上の手書き文字。 * **フォーム処理** – 請求書、領収書、コンプライアンスフォーム、政府文書におけるボックス、ラベル、手書き入力、および密集レイアウトの検出を改善。 * **頑健性** – 圧縮アーティファクト、傾斜、歪み、低 DPI、背景ノイズ、複雑なレイアウトに対処。 * **表再構築** – ヘッダー、結合セル、多行ブロック、および列階層を完全にサポートし、colspan/rowspan を含む HTML テーブルタグ付きの拡張マークダウンを出力。初期採用者はすでに Mistral OCR 3 を高ボリュームのエンタープライズパイプラインに統合しています：請求書を構造化フィールドへ変換、会社アーカイブのデジタル化、技術レポートからクリーンテキストを抽出、および企業検索の強化。精度、コスト効果、柔軟な展開の組み合わせにより、大規模文書処理を業界横断で変革できる競争力ある代替手段として位置づけられています。

2025/12/20 8:59

PBS News Hour West to go dark after ASU discontinues contract

## Japanese Translation: ## Summary アリゾナ州立大学（ASU）のウォルター・クロンスキー報道学部は、PBS NewsHour Westとのパートナーシップを更新しないことを決定し、2019 年から ASU のダウンタウンフェニックスキャンパスで運営されていた事務所を実質的に閉鎖しました。この動きは「ASUの優先事項の変更」に起因すると、News Hour Productions の GM 兼 WETA EVP/CCO のマイケル・ランチリオが述べました。PBS およびアリゾナ PBS は追加説明を行わず、ASU に感謝し、地域ニュースへの継続的な取り組みを約束しました。閉鎖により、西海岸で 20 % 以上の視聴者に到達することを支援していた西部本部としての事務所の役割が終了します。また、ASU のジャーナリズム学生（例：AJ Ceglia 学長）に実地報道経験と就職機会を提供していたインターンシッププログラムも消滅します。現在のインターンは学術クレジットを受け取りますが、卒業要件を満たすために代替配置を探す必要があります。 PBS NewsHour West の最終全国放送は 12 月 19 日に行われます。クロンスキー建物は、事務所閉鎖前に学校のサポートを称える形で夜間放送に登場しました。この報道は *The State Press* のジュニアレポーター、エマ・ブラッドフォード（連絡先：elbradfo@asu.edu; X @emmalbradford）によって取り上げられました。彼女も ASU のジャーナリズム／メディアコミュニケーション学部の学生です。この決定は、西米国における地域ニュースの報道を減少させ、PBS の視聴者エンゲージメントを低下させ、新進気鋭のジャーナリストのプロフェッショナルパスウェイを制限する可能性があります

2025/12/20 0:40

Garage – An S3 object store so reliable you can run it outside datacenters

## Japanese Translation: ## Summary Garageは、すべてのLinuxディストリビューションで動作する単一の依存関係フリーなバイナリを提供し、システム管理者向けに高速かつオペレーターが扱いやすいデプロイメントを実現します。インターネット上で複数のデータセンター間で安全に動作するよう設計されており、専用バックボーンは不要で、ネットワーク・ディスク・管理者障害にも耐えます。最低限必要なハードウェア要件は控えめです：過去10年のx86_64 CPUまたはARMv7/ARMv8、少なくとも1 GBのRAM、≥16 GBのディスク容量、および≤200 msのレイテンシと≥50 Mbpsの帯域幅を持つネットワーク。異種の中古機器を組み合わせてクラスターを構築することも可能です。資金調達歴には、NGI POINTER（2021–22）で3名のフルタイム従業員を支援、NLnet/NGI0 Entrust（2023–24）で1名のフルタイム従業員を支援、NLnet/NGI0 Commons Fund（2025）で1.5名のフルタイム従業員を支援するほか、EU Horizon 2021 grant agreement N° 871528（NGI‑POINTER Project）や追加のNGI Zeroグラント—Entrust Fund（grant No 101069594）およびCommons Fund（grant No 101135429）が含まれます。これらの投資は継続的な開発を示しており、Garageはクラウドやエッジコンピューティングシナリオに対し、低コストでフォールトトレラントなインフラストラクチャを控えめなハードウェア上で提供する立場にあります。