CSSで横並びで高さを揃える方法1(親要素・子要素・孫要素)

画像1

見出し見出し見出し見出し見出し見出し

ボタン
画像1

見出し見出し見出し見出し

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し

ボタン
画像1

見出し見出し

ボタン
画像1

見出し見出し見出し見出し見出し見出し

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し見出し見出し

ボタン

CSSで横並びで高さを揃える方法2(親要素・子要素・孫要素・ひ孫要素)

見出しとボタンの外側にタグを増やしています。

画像1

見出し見出し見出し見出し見出し見出し

ボタン
画像1

見出し見出し見出し見出し

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し

ボタン
画像1

見出し見出し

ボタン
画像1

見出し見出し見出し見出し見出し見出し

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し

ボタン

CSSで横並びで高さを厳密には揃えられない場合

以下のように見出し、テキストなど複数の要素が入る場合は基本的にできません。
gridのsubgridを使える時代がやってきた時に紹介したいと思います。

画像1

見出し見出し見出し見出し見出し見出し

テキストが入ります

ボタン
画像1

見出し見出し見出し見出し

テキストが入りますテキストが入ります

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

ボタン

JSで横並びで折り返すカラムの行に応じて高さを揃える方法

レスポンシブ対応しています。見出し、テキスト、ボタンの外側にタグを挿入しても使用可能です。今回は入れていません。

画像1

見出し見出し見出し見出し見出し見出し

テキストが入ります

ボタン
画像1

見出し見出し見出し見出し

テキストが入りますテキストが入ります

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

ボタン
画像1

見出し見出し見出し見出し見出し見出し

テキストが入りますテキストが入ります

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

ボタン
画像1

見出し見出し

テキストが入ります

ボタン

JSで横並びで折り返さないカラムで高さを揃える方法

スライダーやカルーセルの場合でも使えます。

画像1

見出し見出し見出し見出し見出し見出し

テキストが入ります

ボタン
画像1

見出し見出し見出し見出し

テキストが入りますテキストが入ります

ボタン
画像1

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

ボタン