画像とテキストを含む横並びのカードの高さを揃える方法
@wordpress横並びカードの文字数によって高さがばらつく
Webサイトやアプリケーションのデザインにおいて、画像とテキストを含むカードはよく使用されます。しかし、テキストの長さが異なる場合、カードの高さが揃わず、見栄えが悪くなることがあります。
この記事では、CSSのflexboxを使用して、画像とテキストを含む横並びのカードの高さを揃える方法を紹介します。
HTMLの構造
まずは、以下のようなHTMLの構造を持つカードを考えます。
<div class="card">
<img src="https://drive.google.com/uc?export=view&id=1gdxGXi95broodQYhVm56xS93haINfYjH" alt="画像">
<div class="card-content">
<h2>タイトル</h2>
<p class="card-text">テキスト。</p>
<p>カテゴリ</p>
</div>
</div>上記の例では、画像とテキストを含むカードを表すdiv要素に.cardクラスを付け、テキストを含む要素を表すdiv要素に.card-contentクラスを付けています。
CSSの設定
次に、カードの高さを揃えるために、以下のようなCSSの設定を行います。
上記の例では、.card-wrapperにdisplay: flex;を設定して、カードを包む親要素をフレックスコンテナに設定します。
.cardにdisplay: flex;を設定して、画像とテキストを含む要素をフレックスアイテムに設定します。
カードにflexを設定することでデフォルトのalign-items: stretch;が作用するので、これで高さを合わせることができます。
.card-contentにflex: 1 1 auto;を設定して、テキスト部分をフレックスアイテムとして設定します。
flex-direction: column;を設定して、テキストを縦並びに配置します。
.card-content下端の「カテゴリ」の表示位置を揃えたいため、.card-textにfrex-grow: 1;を設定して、テキストの余白を埋めて高さを揃えます。
完成したHTMLとCSS
最終的に、以下のようなHTMLとCSSになります。
<div class="card-wrapper">
<div class="card">
<img src="https://drive.google.com/uc?export=view&id=1gdxGXi95broodQYhVm56xS93haINfYjH" alt="画像">
<div class="card-content">
<h2>タイトル1</h2>
<p class="card-text">テキスト1</p>
<p>カテゴリ</p>
</div>
</div><!-- .card -->
<div class="card">
<img src="https://drive.google.com/uc?export=view&id=1gdxGXi95broodQYhVm56xS93haINfYjH" alt="画像">
<div class="card-content">
<h2>タイトル2</h2>
<p class="card-text">テキスト2です。長いテキストがあたっていても他のcardの高さは揃っています。</p>
<p>カテゴリ</p>
</div>
</div><!-- .card -->
</div><!-- .card-wrapper -->.card-wrapper {
width: 500px;
display: flex;
justify-content: space-between;
}
.card {
width: calc((100% - 1em) / 2);
display: flex;
flex-direction: column;
}
.card-content {
flex: 1 1 auto;
background: #e6e6e6;
display: flex;
flex-direction: column;
}
.card-text {
flex-grow: 1;
}
以上のように、CSSのflexboxを使用することで、画像とテキストを含む横並びのカードの高さを揃えることができます。
