質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

5036閲覧

文字数に関係なく、横並び要素の高さを揃えたい

zao8383

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/01/10 00:17

前提・実現したいこと

横並び要素の高さを揃えたいのですが、高さが揃いません。
親要素に「display: flex;」を指定することで、子要素の高さは自動的に揃うと認識していますが、カード下部にあるテキスト部分の文字数が違うため、各要素の高さにズレが生じています。

文字数が異なる場合でも、高さが自動で揃うようにしたいと考えています。

発生している問題・エラーメッセージ

services__cardsクラスに「display:flex;」を指定することで、
card__bodyクラスの子要素については高さが揃っています。
しかし、その子要素であるcard__descriptionクラスの要素について高さが揃わないため、
文字数が異なる場合、要素の高さが異なってしまいます。

該当のソースコード

★html

<body> <section class="section services"> <h2 class="section__title" id="services">SERVICEs</h2> <div class="services__inner"> <ul class="services__cards"> <li class="services__card card wow fadeIn"> <div class="card__head"> <img src="https://placehold.jp/300x200.png" alt=""> </div> <div class="card__body"> <div class="card__title">タイトル</div> <div class="card__description">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 </div> </li> <li class="services__card card wow fadeIn"> <div class="card__head"> <img src="https://placehold.jp/300x200.png" alt=""> </div> <div class="card__body"> <div class="card__title">タイトル</div> <div class="card__description">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> </div> </li> <li class="services__card card wow fadeIn"> <div class="card__head"> <img src="https://placehold.jp/300x200.png" alt=""> </div> <div class="card__body"> <div class="card__title">タイトル</div> <div class="card__description">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> </div> </li> </ul> </div> </section> </body>

★css
@charset "UTF-8";
*,
*::before,
*::after {
box-sizing: border-box;
}

body {
font-size: 10px;
font-size: 0.625rem;
letter-spacing: .5em;
color: #333333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Serif JP", sans-serif;
background-color: #ECECEC;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
border: 0;
margin: 0;
padding: 0;
}

img {
width: 100%;
vertical-align: bottom;
}

ul, li {
list-style-type: none;
}

.section {
margin-bottom: 60px;
}

.section__title {
font-size: 36px;
font-size: 2.25rem;
text-align: center;
margin-bottom: 60px;
position: relative;
}

.section__inner {
margin: 0 auto;
padding: 0 4vw;
}

.services__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}

.services__cards {
display: block;
}

@media (min-width: 768px) {
.services__cards {
display: flex;
}
}

.services__card {
width: 100%;
}

@media (min-width: 768px) {
.services__card {
width: calc(100%/3 - 20px*2/3);
}
}

.services__card + .services__card {
margin: 40px 0 0 0;
}

@media (min-width: 768px) {
.services__card + .services__card {
margin: 0 0 0 20px;
}
}

.card__body {
background-color: rgba(255, 255, 255, 0.5);
padding: 15px;
}

.card__description {
margin-top: 10px;
}

試したこと

Google Chromeのデベロッパーツールで確認したところ、
card__bodyクラスの要素について高さは揃っているようなので、
card__descriptionクラスの要素部分に係るCSS指定に問題があるかと思います。

インターネットで検索したところ、
上記部分で「flex-grow: 1;」を指定するという解決策を発見しましたが、
この方法では改善しませんでした。

補足情報(FW/ツールのバージョンなど)

作業環境はVSCODEです。
閲覧環境はGoogle Chromeになります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

提示のコードで divの閉じタグ不足や、CSSセレクターがHTMLと合致していない部分がありますので、それを修正すれば servicescardクラスの高さは揃います。

ただしcardbodyクラスの高さまでは揃いません。flexが影響するのは子要素(servicescard)であって、孫要素(cardbody)までは影響しませんので。

背景色を.cardbodyクラスに設定するのではなく.servicescardに設定すればservicescardクラスの高さが揃っているのが確認できます。

CodePenサンプル


cardbodyクラスの高さも揃えたい(親要素の高さ一杯にする)のなら、下記のようなCSSを設定すればいいでしょう。

css

1.servicescard { 2 display: flex; 3 flex-direction: column; 4} 5.cardbody { 6 padding: 15px; 7 background-color: lightcyan; /* 確認のための背景色 */ 8 flex-grow: 1; 9}

投稿2021/01/10 03:22

編集2021/01/10 03:46
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zao8383

2021/01/10 07:25

ご回答いただきありがとうございます。 孫要素までflexが影響しないということで、子要素の背景色にcssを設定したところ、 希望通りの表示となりました。とても助かりました。
guest

0

flex-growだけでなくflex-basicも設定する必要があります。

`display:flex'の子要素のことを「Flexアイテム」と呼びます。

Flexアイテムにはflexというプロパティを設定出来ます。
このflexとはflex-grow,flex-shrink,flex-basicの3つのプロパティをセットで設定するショートハンドと呼ばれるプロパティです。(backgroundと同じ)

このflexプロパティの初期値(何も書かない場合に自動的に設定される値)が,flex: 0 1 auto;となっています。
このためflex-grow:1;だけを設定してもflex-basic:auto;になってしまっているので、Flexアイテムの中の要素に応じて幅が決まってしまいます。

ですので、flex-basicにauto以外の値を入れて、すべてのFlexアイテムの幅を設定してあげることで幅を揃えることができるようになります。

■上記コードによる実装例(一つdivの閉じタグがありませんでしたので、補完しています)
https://codepen.io/mattari-panda/pen/bGwjPGm

■Flexアイテムに関する参考サイト(私ではない方が書かれた記事です)
https://parashuto.com/rriver/development/how-flex-item-width-is-calculated

flex関連の理解はかなり難しいですが、がんばってみてください。

投稿2021/01/10 02:29

mattari_panda

総合スコア429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zao8383

2021/01/10 07:27

flexプロパティについては理解が不十分な点があります。 頂いた内容を確認して、理解を深めたいと思います。 ご回答頂き、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問