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

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

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

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1280閲覧

中に入る文字数に影響されずにカードの高さをそろえたい

mitrasi

総合スコア49

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/05/15 03:52

編集2021/05/15 10:51

初歩的な質問で申し訳ありません。

何卒ご教授頂けますと幸いです。

前提・実現したいこと

blogのカード型レイアウトの中のテキスト部分の文字数に影響されずに高さをそろえたいです。
但し、レスポンシブに対応しやすいようにがっつりwidth:heightをpx指定してしまうのは避けたいです。

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

文字列に影響されてそろわない

該当のソースコード

HTML

1<!-- blog --> 2<section class="section-wrapper bg-sky"> 3 <div class="inner-wrapper"> 4 <h2 class="title">ブログ</h2> 5 <h3 class="en-title">BLOG</h3> 6 <ul class="blog-list flex-box"> 7 <li class="blog-card"> 8 <img src="img/austin-distel-wawEfYdpkag-unsplash.png" alt="" class="blog-img"> 9 <div class="text-wrapper"> 10 <h4 class="blog-title">サイトをリニューアルオープンしました。</h4> 11 <time>2020.01.23</time> 12 </div> 13 14 </li> 15 <li class="blog-card"> 16 <img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt="" class="blog-img"> 17 18 <div class="text-wrapper"> 19 <h4 class="blog-title">WebサイトでSEO内部施策に適したコー ディングでどれぐらいサイトが早くなるの か検証してみました</h4> 20 <time>2020.01.24</time> 21 </div> 22 23 </li> 24 <li class="blog-card"> 25 <img src=" img/brooke-cagle-g1Kr4Ozfoac-unsplash.png" alt="" class="blog-img"> 26 27 <div class="text-wrapper"> 28 <h4 class="blog-title">ユアコーディングではデザイナーの方を 広く募集しています。</h4> 29 <time>2020.01.25</time> 30 </div> 31 32 </li> 33 </ul> 34 </div> 35</section>

該当のソースコード

CSS

1 2html body .inner-wrapper { 3 padding: 17.2vw 21.4vw; 4 margin: 0 auto; 5 text-align: center; 6 padding: 8%; 7} 8html body .flex-box { 9 display: -webkit-box; 10 display: -ms-flexbox; 11 display: flex; 12 -webkit-box-pack: justify; 13 -ms-flex-pack: justify; 14 justify-content: space-between; 15 -webkit-box-align: center; 16 -ms-flex-align: center; 17 align-items: center; 18} 19 20html body .bg-sky { 21 background-color: #EEFBFB; 22} 23html body .blog-card { 24 background-color: #FFFFFF; 25 width: 28vw; 26 display: -webkit-box; 27 display: -ms-flexbox; 28 display: flex; 29 -webkit-box-orient: vertical; 30 -webkit-box-direction: normal; 31 -ms-flex-direction: column; 32 flex-direction: column; 33 -webkit-box-flex: 5; 34 -ms-flex-positive: 5; 35 flex-grow: 5; 36} 37 38html body .blog-img { 39 height: 260px; 40} 41 42html body .text-wrapper { 43 padding: 1.4vw; 44 text-align: right; 45 font-weight: bold; 46} 47 48html body .blog-title { 49 text-align: left; 50} 51

試したこと

■flex:glowで整える
https://teratail.com/questions/315035

■とりあえず一旦力業のpx
→なぜかきかなかった

■positionでの絶対位置
https://komari.co.jp/blog/5203/
→なんかよくわからないことになって上手く使えなかった

■display:flex → フレックスディレクション:カラム → justify-content:space-between
→カラムにすると縦軸がjustify-contentになるからいい感じにいっぱいに広がるかと思ったがそうでもなかった

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム
↓現状が以下の通りなので、真ん中と同じように高さをそろ得たいです。
イメージ説明

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

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

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

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

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

itagagaki

2021/05/15 03:54

テキストが表示しきれない場合はどうしたいのですか?
Lhankor_Mhy

2021/05/15 05:49

ご提示のコードを試してみましたが、カードが横並びになりませんでした。 ご提示いただいていない部分があるように思います。
mitrasi

2021/05/15 10:54

itagagaki様 ご質問ありがとうございます。 そうですね、想定していなかったですが可能なら「…」といった短縮表示などにしたいです Lhankor_Mhy様 ご質問ありがとうございます。 大変失礼致しました。足りないコード追記致しました。 こちらでは動作確認済みですが、念のためご確認お願いします。
guest

回答2

0

ベストアンサー

.flex-boxalign-items: center;により縦方向が中央寄せになっているようなのでalign-items: start;に変えると良いと思います。

投稿2021/05/15 11:12

itagagaki

総合スコア8402

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

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

mitrasi

2021/05/15 11:19

itagagaki様 ご回答ありがとうございます!! 確かに治りました!!共通で使いまわしている部分に原因があるのは視野から外れがちなので気を付けます。ありがとうございました。
guest

0

とりあえず下記を追加すれば、blog-cardが横並びになって高さも揃います。

css

1.blog-list { 2 display: flex; 3}

投稿2021/05/15 06:50

hatena19

総合スコア33620

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

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

mitrasi

2021/05/15 10:54

hatena19様 ご回答ありがとうございます。 しかしながら私の方では治らなかったようです???? 申し訳ございません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問