概要

align-selfプロパティは、CSSでFlexboxやグリッドレイアウトのコンテナ内で、各アイテムごとに個別の配置を制御するためのプロパティです。このプロパティを使用することで、親要素のalign-items設定を上書きし、アイテムごとに異なる配置を簡単に設定できます。個々の要素の配置を調整することで、レイアウトの柔軟性を高め、ユーザー体験を向上させることができます。

align-selfプロパティの基本構文

align-selfプロパティの基本的な構文は以下の通りです。

align-self: auto | flex-start | flex-end | center | baseline | stretch;
  • auto 親要素のalign-itemsプロパティの値を継承します（デフォルト）。
  • flex-start コンテナの開始端（上）に配置します。
  • flex-end コンテナの終了端（下）に配置します。
  • center コンテナの中央に配置します。
  • baseline アイテムを文字のベースラインに揃えます。
  • stretch アイテムをコンテナ全体に伸ばします（デフォルトの高さや幅を持つ場合）。

使用例

基本的な使用例（Flexbox）

以下の例では、align-selfプロパティを使ってFlexbox内の各アイテムの配置を個別に制御しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>align-selfプロパティの例</title>
<style>
.flex-container {
display: flex;
align-items: center; /* デフォルトで中央に揃える */
height: 200px;
border: 1px solid #ccc;
gap: 10px;
}
.item1 {
background-color: #ff6347;
padding: 10px;
align-self: flex-start; /* 上端に配置 */
}
.item2 {
background-color: #4682b4;
padding: 10px;
align-self: flex-end; /* 下端に配置 */
}
.item3 {
background-color: #32cd32;
padding: 10px;
align-self: stretch; /* コンテナ全体に伸ばす */
}
</style>
</head>
<body>
<h2>align-selfを使ったFlexbox内の個別配置制御</h2>
<div class="flex-container">
<div class="item1">上端に配置</div>
<div class="item2">下端に配置</div>
<div class="item3">コンテナ全体に伸ばす</div>
</div>
</body>
</html>

この例では、Flexboxコンテナ内で各アイテムが異なる配置となっています。

  • .item1 align-self: flex-start;により上端に配置されています。
  • .item2 align-self: flex-end;により下端に配置されています。
  • .item3 align-self: stretch;によりコンテナ全体に伸びています。

グリッドレイアウトでの使用例

align-selfはグリッドレイアウト内でも使用可能で、各グリッドアイテムの配置を調整できます。

<div class="grid-container">
<div class="grid-item item1">Top</div>
<div class="grid-item item2">Bottom</div>
<div class="grid-item item3">Center</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
align-items: center; /* 全てのアイテムを中央に揃える */
gap: 10px;
}
.grid-item {
background-color: #4682b4;
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.item1 {
align-self: flex-start; /* 上端に配置 */
}
.item2 {
align-self: flex-end; /* 下端に配置 */
}
.item3 {
align-self: center; /* 中央に配置 */
}
</style>

この例では、グリッドコンテナ内で3つのアイテムが異なる配置になっています。align-selfを使って、グリッドアイテムを柔軟に配置できます。

align-selfプロパティの注意点

  • 親の設定を上書き
    align-selfは、親要素のalign-items設定を上書きするため、意図しない配置になる可能性があります。各アイテムの配置が意図通りになるように調整が必要です。
  • Flexboxとグリッドの違い
    align-selfはFlexboxやグリッドレイアウトで使用されますが、他のレイアウト（例：ブロックやインライン要素）には適用されません。Flexboxやグリッドレイアウト内で使用することを確認してください。
  • stretchの影響
    align-self: stretch;を指定すると、アイテムがコンテナ全体に伸びますが、幅や高さが指定されている場合、その指定が優先されます。スタイルを確認しながら調整することが重要です。

まとめ

align-selfプロパティは、Flexboxやグリッドレイアウトにおいて、個々のアイテムの配置を柔軟に制御するための非常に便利なCSSプロパティです。親要素の設定に左右されることなく、各アイテムを独自に配置できるため、細かなレイアウト調整が必要な場面で大いに役立ちます。align-selfを活用して、見栄えが良く、整ったデザインを実現してみましょう。

参照:

align-selfプロパティ（`CSS`） | MDN Web Docs