CSSで<figcaption>を上揃えにする方法：caption-side: bottom;を使いつつレイアウトを調整

HTMLで横並びの画像に注釈（

）を付ける際、注釈の配置を上揃えにする方法について解説します。特に、`caption-side: bottom;`を使った場合でも、注釈が適切に上揃えされる方法を紹介します。

1. caption-side: bottom; での問題点

`caption-side: bottom;`を使うと、画像下に注釈を配置することができますが、長さの異なる注釈があると、短い注釈に余白が大量にできてしまう問題があります。このような場合、上揃えを維持することが難しくなります。

そこで、`caption-side: bottom;`を使いつつ、上揃えにする方法を考えます。

注釈文字を上揃えにするためには、CSSの`vertical-align`プロパティを活用します。`vertical-align: top;`を使うことで、文字を上揃えにすることができます。

以下のように、`figcaption`に`vertical-align: top;`を指定することで、注釈の開始位置を画像の上部に揃えることが可能です。

figcaption {
  vertical-align: top;
}

質問者が求める「displayを指定しない方法で」という制約に関して、`display`を変更せずに上揃えを実現する方法があります。`figcaption`の`vertical-align: top;`を使用することによって、`display`を変更することなく上揃えを実現できます。

この方法では、`figure`の`display`や`figcaption`の`display`を変更せずに、注釈が画像の上部に揃うように調整できます。

横並びの画像とその注釈を配置するためには、`figure`要素全体に`display: flex;`を適用し、`justify-content: space-between;`を使って画像と注釈を均等に配置する方法が有効です。

これにより、画像それぞれに対して注釈を下に配置しつつ、`vertical-align: top;`で注釈文字の位置を揃えることができます。

figure {
  display: flex;
  justify-content: space-between;
}
figcaption {
  vertical-align: top;
}

CSSで`caption-side: bottom;`を使いつつ、`

`の注釈を上揃えにする方法として、`vertical-align: top;`を適用する方法が効果的です。これにより、`display`を変更せずに、画像下部に注釈を配置しつつ、注釈の文字を上部に揃えることができます。横並び画像のレイアウト調整や、`flexbox`を利用した配置方法も役立ちます。