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

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

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

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

HTML5

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

Q&A

解決済

2回答

957閲覧

フレックスボックス内、アイテムの合間にボーダーラインを挿入したい

AmanoEriko

総合スコア12

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2020/05/03 04:56

いつもお世話になっております。

HTML、CSSを用いて 表のデザインの練習中です。

フレックスボックスを用いて、
リストを横ならびにし、アイテムを中央に揃えるあたりまでは、
サクサク進んでいたのですが、

各.form dl にボーダーラインを挿入しようと試みた所、
うまく行きません。

.form dlはdisplay: flex;になっているので
間に<div>や擬似要素afterで挿入しようと試みた所、
当然ですが横並びになってしまい、 うまく間に入ってくれません。

この場合はどの様な手段が最適でしょうか?
よろしくお願いします。

私の作ったもの↓
イメージ説明

お手本↓
イメージ説明

HTML

1 2<form class="content-wrapper"> 3 <article class="form"> 4 <dl> 5 <dt>あなたのお名前</dt> 6 <dd><input type="text"></dd> 7 </dl> 8 <dl> 9 <dt>フリガナ</dt> 10 <dd><input type="text"></dd> 11 </dl> 12 <dl> 13 <dt>メールアドレス</dt> 14 <dd><input type="text"></dd> 15 </dl> 16 <dl> 17 <dt>電話番号</dt> 18 <dd><input type="text"></dd> 19 </dl> 20 <dl> 21 <dt>お問い合わせ内容</dt> 22 <dd><textarea></textarea></dd> 23 </dl> 24 <p>お客様の個人情報は慎重に取り扱い、ご意見なしに第三者に提供または開示する事はございません。</p> 25 26 <section class="form-button"> 27 <input id="first" type="button" value="個人情報保護方針についてはこちらをご覧ください"> 28 <input id="second" type="button" value="同意して確認画面へ"> 29 </section> 30 </form> 31 </article>

CSS

1 2 3.form dl { 4 display: flex; 5 justify-content: center; 6} 7 8.form dl dt{ 9 width: 15%; 10 font-weight: bold; 11} 12 13.form dl dd{ 14 width: 50%; 15} 16 17.form dl dd input{ 18 width: 100%; 19} 20 21.form dl dd textarea{ 22 width: 100%; 23 height: 100px; 24} 25

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

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

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

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

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

akkman

2020/05/03 05:17

dlに対してborderをあてれば解決できそうですが、どのようにうまくいってませんか?
guest

回答2

0

ベストアンサー

普通に border-bottom でできそうですが。

とりあえず画像になるべく合わせるなら、下記のような感じで。

css

1.form { 2 margin: 0 auto; 3 max-width: 800px; 4} 5 6.form dl { 7 display: flex; 8 justify-content: center; 9 border-bottom: 1px dotted gray; 10 padding-bottom: 1rem; 11 margin-bottom: 1rem; 12} 13 14.form dl dt{ 15 width: 25%; 16 font-weight: bold; 17} 18 19.form dl dd{ 20 width: 75%; 21} 22 23.form dl dd input{ 24 width: 100%; 25} 26 27.form dl dd textarea{ 28 width: 100%; 29 height: 100px; 30} 31 32.form p, .form-button { 33 text-align: center; 34}

投稿2020/05/03 05:53

hatena19

総合スコア34075

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

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

AmanoEriko

2020/05/03 06:49

まさにイメージ通りにする事ができました! boder-bottomで指定すると 長さが長くなってしまい、長さが指定できないな、、、とグルグル悩んでいましたが そうですよね、、、 親要素にmax-widthを指定する事で、OKでした。。。 そしてdtをddのwidthも合計100%になる様に指定する、という事ですよね。 本当に初歩的な質問になってしまい、申し訳ありませんでした。 質問を聞いていただく事、 ご回答をいただく事で、 確かな理解に近づけました。 ありがとうございました!
guest

0

擬似要素を使ってみてはいかがでしょうか?

CSS

1.form dl:after { 2 content:" "; 3 border-bottom:solid 1px #000; 4 width:100%; 5 position:absolute; 6} 7 8.form dl{ 9position:relative; 10}

みたいな感じで。

widthで長さを調整したり、topやleftを指定して位置を調整したりしてみてください。

投稿2020/05/03 05:09

okina

総合スコア471

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

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

AmanoEriko

2020/05/03 06:57

ありがとうございます! 出来ました! 擬似要素と聞くだけでなんだかハードルの高さを感じて 怯えてしまう超初心者なのですが(苦笑) 少し打ち解けられた気がします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問