FlexboxとGridの個別アイテム配置を可能にする`align-self`ユーティリティクラスの追加

2026年02月04日 02:09 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2010

Web Awesomeにalign-selfプロパティを制御する5つのユーティリティクラスが追加され、Flexbox・Grid内の個別アイテムをクロス軸上で独立して配置できるようになりました。これにより、コンテナ全体のalign-items設定を維持しながら、特定のアイテムだけを異なる位置に配置する設計が可能になります。

背景

この変更はディスカッション#1668で要望されていた機能です。既存のwa-align-items-*クラスはコンテナ全体のアイテム配置を制御できますが、個別のアイテムだけを異なる位置に配置する手段がありませんでした。

FlexboxやGridレイアウトでは、コンテナにalign-itemsを設定すると全てのアイテムが同じ配置になります。しかし実際のUI設計では、一部のアイテムだけを異なる位置に配置したいケースが頻繁に発生します。この要件を満たすために、CSSのalign-selfプロパティを操作するユーティリティクラスが必要とされていました。

技術的な変更

src/styles/utilities/align-items.css に5つのwa-align-self-*クラスが追加されました。これらは既存のwa-align-items-*クラスと同じファイル内に配置されています。

追加されたクラス:

.wa-align-self-start {
  align-self: flex-start;
}
.wa-align-self-end {
  align-self: flex-end;
}
.wa-align-self-center {
  align-self: center;
}
.wa-align-self-stretch {
  align-self: stretch;
}
.wa-align-self-baseline {
  align-self: baseline;
}

各クラスは対応するalign-selfの値を設定します。startとendはflex-start・flex-endにマッピングされ、Flexboxの方向性に応じた配置を実現します。

ドキュメント（docs/utilities/align-items.md）には新しい「Override with Align Self」セクションが追加され、各クラスの視覚的なプレビューとともに使用方法が説明されています。プレビューでは中央のアイテムにwa-align-self-*を適用し、周囲のアイテムをde-emphasizeクラスで視覚的に抑制することで、個別配置の効果を明確に示しています。

設計判断

align-selfクラスを既存のalign-items.cssに統合する方式が採用されました。

PR内のコメントでは、新しいクラスを既存のAlign Itemsドキュメントとスタイルファイルに含めることについて、発見可能性（discoverability）への影響が懸念されています。しかし、align-selfはalign-itemsのアイテム単位での上書きという明確な関係性があり、概念的に密接に関連しています。

別ファイルに分離する選択肢もありましたが、統合によって以下の利点が得られます：

関連するプロパティが1つのファイルで管理される
ドキュメント内でalign-itemsとalign-selfの関係性が明確になる
ユーザーがalign-itemsを調べている際にalign-selfを発見しやすい

クラス名のプレフィックス（wa-align-items-*とwa-align-self-*）が異なるため、両者の区別は保たれています。

まとめ

本PRは、CSSのalign-selfプロパティをユーティリティクラスとして提供することで、Web Awesomeのレイアウト制御機能を拡張しました。既存のalign-itemsユーティリティとの統合により、コンテナレベルとアイテムレベルの配置制御が1つのドキュメント内で完結する設計になっています。ユーザーはwa-clusterやwa-stackなどのレイアウトユーティリティと組み合わせることで、より柔軟なレイアウト構築が可能になります。