CSS 入門

CSS align-self 属性

前の章では、justify-content と align-items を使用して、フレックスコンテナ内のすべてのアイテムをどのように整列させるかを学びました。これらのプロパティは、コンテナ全体に対して一括でルールを適用するものです。

しかし、時にはグローバルな設定を無視して、特定のアイテムだけを個別に制御したい場面があります。そこで活躍するのが align-self プロパティです。これを使えば、コンテナ側の align-items の値を無視し、特定のアイテムだけを交差軸（Cross Axis）上で精密に配置することができます。

align-self をマスターすることは、微細な調整が必要な複雑で美しいレイアウトを作成するための鍵となります。

1. align-self の理解

CSSの align-self プロパティを使用すると、個別のフレックスアイテムに対して、親コンテナの align-items プロパティを上書きすることができます。

簡単に言えば、align-items は全子要素の「デフォルトの整列方法」を設定し、align-self は特定の要素だけに「特別なルール」を与えて、全く異なる整列方法を指定できるものです。特定の要素を際立たせたい場合や、他のアイテムとは異なる位置に配置したい場合に非常に便利です。

2. align-self の属性値

align-self は以下の値を受け入れます（これらは align-items と非常に似ていることに気づくでしょう）。

  • auto: デフォルト値です。アイテムは親コンテナの align-items の値を継承します。親コンテナがない場合は stretch として振る舞います。
  • stretch: アイテムを交差軸方向に引き伸ばし、利用可能なスペースを埋めます。min-height や max-height の制限がない限り、アイテムの高さ（または主軸が垂直なら幅）がコンテナと一致します。
  • center: アイテムを交差軸の中央に配置します。
  • flex-start: アイテムを交差軸の起点に整列させます。行（row）レイアウトでは上端、列（column）レイアウトでは左端に揃います。
  • flex-end: アイテムを交差軸の終点に整列させます。行（row）レイアウトでは下端、列（column）レイアウトでは右端に揃います。
  • baseline: アイテムをテキストのベースラインに基づいて整列させます。テキストを含むコンテンツを扱う場合に意味を持ちます。
  • start: 書き込みモードや方向を尊重しつつ、アイテムを交差軸の開始エッジに揃えます。
  • end: 書き込みモードや方向を尊重しつつ、アイテムを交差軸の終了エッジに揃えます。
  • self-start: アイテム自身の交差軸の開始エッジに揃えます。
  • self-end: アイテム自身の交差軸の終了エッジに揃えます。

それでは、コード例を通してこれらの値を直感的に理解していきましょう。

2.1 例1：グローバルの align-items: center を上書きする

ナビゲーションバーを想定してみましょう。ほとんどのリンクは垂直中央に配置されていますが、左側のサイトロゴだけは上端に固定したい場合です。

<div class="container">
  <div class="logo">サイトロゴ</div>
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>
.container {
  display: flex;
  align-items: center; /* 全局設定：すべてのアイテムを垂直中央揃え */
  height: 200px;
  background-color: #f0f0f0;
}

.logo {
  align-self: flex-start; /* 個別設定：ロゴの配置を上書きし、上端に揃える */
}

div {
  padding: 20px;
  border: 1px solid black;
}

この例では、.container に align-items: center が設定されているため、すべてのアイテムが垂直中央に配置されます。しかし、.logo クラスに align-self: flex-start を適用することで、デフォルトの挙動を上書きし、ロゴだけをコンテナの上端へ引っ張り上げています。

2.2 例2：align-self: stretch を使用した強制的な引き伸ばし

一列のボックスがあり、他のボックスの高さはコンテンツ量で決まる一方、特定のボックスだけはコンテナの高さいっぱいに広げたい場合です。

<div class="container">
  <div>アイテム 1</div>
  <div class="stretch">アイテム 2 (引き伸ばし)</div>
  <div>アイテム 3</div>
</div>
.container {
  display: flex;
  height: 150px;
  background-color: #f0f0f0;
}

.stretch {
  align-self: stretch; /* このアイテムだけを強制的に引き伸ばす */
}

div {
  padding: 20px;
  border: 1px solid black;
  margin: 5px;
}

ここでは、.stretch クラスを持つ要素が垂直方向に膨張し、コンテナで定義された 150px の高さを埋めます。他の2つのアイテムは、自身のコンテンツに基づいたデフォルトの高さのまま維持されます。

2.3 例3：カラムレイアウト (Column) における flex-end の使用

フレックスコンテナが flex-direction: column（垂直並び）を使用している場合、align-self が制御するのは水平方向の配置になります。

<div class="container">
  <div>アイテム 1</div>
  <div class="end">アイテム 2 (右寄せ)</div>
  <div>アイテム 3</div>
</div>
.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 300px;
  background-color: #f0f0f0;
  align-items: flex-start; /* 全局設定：デフォルトですべてのアイテムを左寄せ */
}

.end {
  align-self: flex-end; /* 個別設定：このアイテムだけを右寄せにする */
}

div {
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}

このケースでは、align-items: flex-start によってすべてのアイテムが左側に並びます。しかし、.end 要素に align-self: flex-end を追加することでルールを破り、特定のアイテムだけをコンテナの右側へ押し出しています。

2.4 例4：align-self: baseline によるベースライン整列

この例では、グローバルなベースライン整列と個別のオーバーライドを組み合わせています。baseline はテキストの底辺（基準線）に合わせて要素を整列させます。

<div class="container">
  <div class="item1">短い</div>
  <div class="item2">非常に高い<br>テキスト</div>
  <div class="item3">中くらい</div>
</div>
.container {
  display: flex;
  height: 100px;
  background-color: #f0f0f0;
  align-items: baseline; /* 全局設定：テキストのベースラインですべてを整列 */
}

.item2 {
  font-size: 2em; /* このアイテムの文字をあえて大きく、高く設定 */
}

div {
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}

このシナリオでは、すべてのアイテムがテキストの底辺を基準に並んでいます。「非常に高いテキスト」が大きなスペースを占めていても、その中のテキストのベースラインは他のアイテムと同一線上に保たれます。ここで .item2 に align-self: flex-start を加えると、ベースラインの列から即座に離脱し、コンテナの最上端に張り付きます。