![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
はじめまして。
CSSで作成しているんですが、よく「dl」「dt」「dd」を使って一列に
日付 ○○○○○○
というのを見かけるんですが、やり方がわからず困っています。
どうすればいいのでしょうか?
また、「dl」を使うと「p」のように上下?に大きな空白が出来てしまうんですが、これを回避する方法はありますでしょうか?
といいますか、よく見かけるものでは空白などできておらず、むしろ行間に画像を入れて小さな空白を作っているように思うんですが・・・
こちらも合わせて教えていただけると幸いです。
どうかよろしくお願いいたします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_03.png?5a7ff87)
No.8ベストアンサー
- 回答日時:
#5、#6です。
お返事が遅くなりまして申し訳ありません。.box-aの中にあるmargin-top: 30px;と#rightの中にあるmargin-top: 10px;が
上部に○○px分の余白を取っていることになります。
<div class="box-a">
<div class="day">
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
</dl>
</div>
</div>
と書いてしまうと30px分の余白が出来てしまうのです。
「margin-top: 30px;」を取るとその余白は出来なくなると思いますよ。
> firefoxだと2行分までとはいかないまでも空白がありました。
.day dl{
margin: 0px;
padding: 0px;
width: 330px;/*幅(任意ですがdtとddのwidth+margin30pxの合計になるようにしてください)*/
}
.day dt{
clear: both;
float: left;
width: 80px;/*日付の幅(任意)*/
padding: 1px;/*文字周りの余白(表記しなくてもいいです)*/
}
.day dd{
width: 200px;/*テキストの幅(任意)*/
margin: 0 0 0 30px;/*日付とテキスト間の幅(30px分幅を取っています)*/
padding: 1px;/*文字周りの余白(表記しなくてもいいです)*/
}
と表記すると余白が少なく表示されると思います。
No.7
- 回答日時:
こんにちは。
横から失礼します。
こんなソースはいかがでしょう?
.box-a {
zoom: 100%;
}
.box-a:after {
content: " ";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.box-a dl {
margin: 0px;
padding: 0px;
}
.box-a dt {
float: left;
clear: left;
width: 100px;
}
.box-a dd {
margin-left: 130px;
}
<div class="box-a">
<dl>
<dt>タイトル</dt>
<dd>あいうえおあいうえお</dd>
<dt>タイトル</dt>
<dd>あいうえおあいうえお<br />あいうえおあいうえお<br />あいうえおあいうえお</dd>
<dt>タイトル</dt>
<dd>あいうえおあいうえお</dd>
</dl>
</div>
参考になれば幸いです。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_03.png?5a7ff87)
No.6
- 回答日時:
#5です。
<div class=box-a>はのCSS記述はどのようにされていますか?
(正しい指定は<div class="box-a">です。「"」を忘れないようにしてくださいね)
それを書いてくださると何故起きるのかわかるかもしれません。
<div class="box-a">を一度削除して#5で記述した通りにされてみてはどうでしょうか?
この回答への補足
何度もすみません。
たった今ブラウザで確認したところ、上の空白はなくなっていました!
ただ、firefoxとIEだと見え方か少し異なってくるんですね・・・
IEだと隙間なく表示されるんですが、firefoxだと2行分までとはいかないまでも空白がありました。
できれば間をとった距離が欲しいんですが(笑
本当難しいです・・・
深夜遅くの度重なる回答、本当にありがとうございます。
box-aについてですが
.box-a {
width: 550px;
height: 250px;
float: left;
margin-top: 30px;
background-image: url(img/info-bg.gif);
background-repeat: no-repeat;
}
としています。
試しにbox-aを消してみましたがやはり同じような現象が起きました。
ちなみにさらにdiv id="right"で囲んでいるんですがこちらは
#right {
width: 550px;
margin-left: 15px;
margin-top: 10px;
height: 280px;
background-repeat: no-repeat;
background-image: url(img/infomation.gif);
}
となっています。
ひょっとするとこちらが原因でしょうか?
難しいです・・・
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_03.png?5a7ff87)
No.5
- 回答日時:
試しに書いてみましたが…。
ご参考までにお願い致します。CSS部分例
.day dl{width: 330px;/*幅*/}
.day dt{clear: both;
float: left;
width: 80px;/*日付の幅*/
padding: 2px;/*文字周りの余白*/}
.day dd{width: 200px;/*テキストの幅*/
margin: 0 5px 0 30px;/*日付とテキスト間の幅(30px分幅を取っています)*/
padding: 2px;/*文字周りの余白*/}
html部分例
<div class="day">
<dl>
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
<dt>2007.11.12</dt>
<dd>○○○○○○○○</dd>
</dl>
</div>
> 「p」のように上下?に大きな空白が出来てしまうんですが
これは今回では「padding」で文字の周りに小さな余白を作っています。
ご参考になりましたら幸いです。
この回答への補足
早速やってみました!
一行にやるやり方は、おかげ様でばっちりできたんですが、空白についてやはりできませんでした・・・
ちなみに空白というのは「dl」タグの上の部分がどうしても改行2行分ほど空いてしまうのです。
<div class=box-a>
<div class=day>
<dl>・・・・・
としたんですがなぜか始まりの日付の部分がbox-aの改行2行分下から始まってしまいます。
padding30px分くらいあいて始まってしまいます。
ここの空白部分を調節したいんですが・・・
もしご存知でしたらどうかよろしくお願いいたします。
何度もすみません・・・
ありがとうございます!
これを見て何となくですが、クラスについて一歩前進したような気がします・・・
一度自分のファイルに移して返信しながら研究してみたいと思います、
本当にありがとうございました!
No.4
- 回答日時:
outbraveさんが全部答えを書いてくれたみたいですが、
「float:leftということは、「dt」「dd」をdivで囲って、やるということでしょうか」
と聞くあたりCSSについてあまり理解なされていませんね?
divを使う必要はありませんよ。一度リファレンスなどを購入なさってみてはいかがでしょうか。
セレクタやプロパティなど基本的なことを理解しておいた方が後々壁にぶつかることがなくなります。
ちなみにflortでもinlineでもどっちでも可能です。場合によって使い分けてください。
偉そうに書いてみましたが、私も勉強中の身です。
お互い頑張りましょう。
セレクタやプロパティ。。。
ほんと何も分かってないです(汗
ひとまずなんでもdivで囲って作っています。
一度ちゃんと勉強してみます!
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- Excel(エクセル) エクセルの表でダブりを解消する方法を、教えてください。 5 2023/04/12 12:11
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- Excel(エクセル) Excel あらかじめ予定表があり、その月毎のセルに、リストの連続データを入れたい 2 2022/04/07 14:20
- WordPress(ワードプレス) WordpressでYouTubeの埋め込みができない。 1 2022/10/26 01:08
- PowerPoint(パワーポイント) パワーポイントの見出しの線の引き方 2 2022/08/21 19:23
- Excel(エクセル) Excel 数行を1組とする300組ほどあるデータの項目を揃えたいです。 3 2023/01/26 19:38
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
footer を横幅いっぱいに広げる...
-
画像イメージの上下左右、欲し...
-
テーブルのセル間に余白が空い...
-
table周辺の隙間をなくしたい。
-
CSS:animation開始位置の設定
-
CSSでボックスのheightが0になる
-
定義リストに下線をつけたいと...
-
CSS検証サービス
-
CSS、width100%でもできる余白
-
heaerとfooterに背景画像が難し...
-
背景が下まで表示されないんです。
-
border-style:solidで文字がずれる
-
CSS3で角丸写真にシャドーを付...
-
form input テキストを上下中央...
-
ラジオボタンの大きさを変更し...
-
スタイルシートで<div>を使った...
-
css初心者 フレックスボックス...
-
定義リストで先頭にアイコン
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報