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

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

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

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

Q&A

解決済

1回答

5559閲覧

dlに罫線を引くにはどうしたらいいでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

0グッド

0クリップ

投稿2018/11/28 01:10

編集2018/11/28 02:04

ホームページのお知らせ部分の作成

これが完成イメージです。

お知らせごとに罫線を引きたいのですが、私の書いたコードだと、写真の下だけに線が入ります。
dlに線を引けば良いかと考えたのですが、dlだと文章の上に2本線が入るだけです。

以下が私の書いたコードです。

html

1コード<div class="news clearfix"> 2 <h2>NEWS お知らせ</h2> 3 <dl> 4 <dt><img src="image/#" width="89" alt=""></dt> 5 <dd><a href="#">お知らせ文</a></dd> 6 <dd class="day">2018年10月25日</dd> 7 </dl> 8 <dl> 9 <dt><img src="image/#" width="89" alt=""></dt> 10 <dd><a href="#">お知らせ文</a></dd> 11 <dd class="day">2018年5月18日</dd> 12 </dl> 13 <dl> 14 <dt><img src="image/#" width="89" alt=""></dt> 15 <dd><a href="#">お知らせ文</a></dd> 16 <dd class="day">2018年5月7日</dd> 17 </dl> 18 </div>

css

1コード 2.news { 3 4 margin-top: 80px; 5} 6 7.news h2 { 8 font-size: 24px; 9 color: #333; 10 font-weight: normal; 11 background-color: #f5f5f5; 12 border-top: solid 2px black; 13 height: 65px; 14 line-height: 3; 15 padding-left: 15px; 16 17} 18.day { 19 color: #d44950; 20 font-size: 14px; 21} 22.news a { 23 font-size: 14px; 24 color: #464646; 25 26} 27dl { 28 width: 1136px; 29 30 31 32 33} 34dt { 35 float: left; 36 width: 78px; 37 clear:left; 38 margin-bottom: 10px; 39 border-bottom: dotted 1px gray; 40 41 42} 43dd { 44 float: left; 45 width: 1000px; 46 47 48} 49a { 50 text-decoration: none; 51} 52a:hover { 53 text-decoration: underline; 54 55} 56

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

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

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

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

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

m.ts10806

2018/11/28 01:31

何が「基本的なこと」なのでしょうか。あまり自身を卑下するような表現は避けた方が良いです。そのぶん質問内容の充実だったり技術調査や検証にあててください。
退会済みユーザー

退会済みユーザー

2018/11/28 01:41

ごめんなさい。他の方の質問を見ていると、自分の質問が申し訳なく感じてしまったので。
m.ts10806

2018/11/28 01:43

なるほど。でもあなたと他の質問者は同じではないですし、あなたはあなたの問題解決だけに集中してください。他の質問や回答を自分のために参考にすることはあってもノイズにする必要はないですよ。
退会済みユーザー

退会済みユーザー

2018/11/28 01:46

そうですね。ありがとうございます。
guest

回答1

0

ベストアンサー

dtは画像のみを含んでいるので、dtborder-bottomを入れても画像の下にしか線はつきません。
dlタグにheightを付与した上でborder-bottomを入れればどうでしょう?

投稿2018/11/28 02:10

編集2018/11/28 02:11
dice142

総合スコア5158

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

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

退会済みユーザー

退会済みユーザー

2018/11/28 02:37

出来ました。 高さがなかったために、文章の上に線が3本あっただけなのですね。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問