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

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

解決済

1回答

1344閲覧

子要素のボーダーの高さを揃えるにはどのようにすればよいでしょうか?

sauzi

総合スコア4

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クリップ

投稿2020/03/15 10:39

前提・実現したいこと

isaraの模写コーディングを行っているのですが、そのうえでボーダーの高さをそろえたいです。

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

添付画像1番目が自分がコーディングした画像であり、添付画像2番目が問題模写部分です。 見てわかるように、ボーダーの高さが異なっています。

イメージ説明
イメージ説明

該当のソースコード

HTML

1<!--teacher--> 2<div id="teacher" class="text-center"> 3 <h3 class="title-padding white">創業メンバー</h3> 4 <p class="font-bold white">実際にフリーランスとして活躍しているエンジニアが立ち上げました</p> 5 6 <div class="teacher-introduce"> 7 8 <div class="row teacher-content"> 9 10 11 <div class="col-md-6"> 12 <div class="teacher-item"> 13 <img src="images/shohey.png" class="circle"> 14 <div class="teacher-description"> 15 <p class="padding">フリーランス講師</p> 16 <p>大滝 昇平</p> 17 <p class="detail">月の半分は東京の会社にリモートで勤めつつ、フリーでも活動しているエンジニアです。Laravel・WordPressでのWeb制作がコアスキル。立ち上げメンバーとしてカリキュラム原案制作に参画し、現在は外部アドバイザーをしています!</p> 18 </div> 19 </div> 20 </div> 21 22 <div class="col-md-6"> 23 <div class="teacher-item"> 24 <img src="images/manabu.png" class="circle"> 25 <div class="teacher-description"> 26 <p class="padding">フリーランス講師</p> 27 <p>坂内 学</p> 28 <p class="sentence-padding-bottom detail">アドバイザーとして参画しました。新卒で海外就職して11ヶ月後に退職。今は日本にいたり海外にいたりでゆるくフリーランスをしています。</p> 29 <p class="detail">お仕事はWebマーケティングとプログラミングが専門領域です。</p> 30 </div> 31 </div> 32 </div> 33 34 </div><!--teacher content end--> 35 36 </div><!--teacher introduce end--> 37</div><!--teacher end--> 38 39 40

CSS

1#teacher{ 2 background-image: url(images/teacherbg.jpg); 3 background-size: cover; 4 height:1222px; 5} 6 7 8.circle{ 9 border-radius:50%; 10 width:50%; 11} 12 13 14.teacher-content{ 15 width:70%; 16 margin: 0 auto; 17 color: white; 18 display: flex; 19} 20 21.teacher-description{ 22 border: 2px solid white; 23 padding: 5%; 24 margin:-2rem 5% 5% 5%; 25} 26 27.detail{ 28 text-align: left; 29}

試したこと

調べたところflexboxを使用すればできるとのことだったのですが、flexboxを親要素であるteacher-contentに適用させても揃いませんでした。borderを適用させているのが講師紹介に当たるteacher-descriptionであるため、borderの高さは揃わないということまでは理解できたのですが、では実際にどのようにコーディングを行うべきなのかわからなくなってしまいました。
何卒ご教授くださいませ

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

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

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

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

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

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

guest

回答1

0

自己解決

ボーダーの中身にbrで改行を行うことで高さを揃えることができました。

また、cssが不完全なコードのまま投稿してしまい大変申し訳ありませんでした。

投稿2020/03/16 09:32

sauzi

総合スコア4

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

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

sauzi

2020/03/19 06:23

回答誠にありがとうございます。 なるほど、align-items: strechというものがあるのですね。その存在を知らなかったため、大変勉強になりました。 今後の参考にさせていただきます。 ありがとうございました。m(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問