はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

dt と dd を横に並べる CSS

2008/03/14 Fri [Edit]

今日は定義リスト(dl タグ)内の dtdd タグを CSS横に並べる方法です。

いつも dt と dd を CSS で並べようとした時に『さてさて・・・はて?』となり、CSS の専門書から同じページを開いているような気がしたのでメモ。

定義リストの要素 dt と dd を CSS で横に並べる方法は幾つかあるのですが、私が最も使用している方法を記述しておきます。

dt {
	float : left;
	width : 10em;
}

dd {
	margin-left : 10em;
}

まず dt を float させつつ width を指定。上のサンプルソースの様に em で指定するとユーザーにテキストサイズを変更されても追従します。

ちなみに 10em は font-size が 12px なら 120px となります。つまり font-size で指定されている大きさを 1 として計算されます。なのでユーザーにテキストサイズを変更されても追従する訳です。

次に dd の左にマージンを与え横並びにさせます。サンプルソースのい部分をご覧頂くと分かると思いますが、dt の width の値と dd の margin-left の値は同じ値にしておきます。

理由はテキストサイズをユーザーに変更された時にもレイアウトのバランスを保つ為です。異なる値だとテキストサイズの変更に比例しバランスも崩れて行きます。

上の方法は考え方も使用方法も簡単ですが float を使っているので、デザインによっては clear : left の必要性なども考慮しつつ使います。

もしも float なんか使いたくない!なんて気分の時は下のサンプルソースの様なネガティブマージンを使った方法もあります。

dl {
	line-height : 1.6em;
}

dt {
	width : 10em;
}

dd {
	margin-left : 10em;
	margin-top : -1.6em;
}

まず dl タグなど dt と dd に CSS の指定が継承されるセレクタで line-height を指定します。dt と dd に直接 line-height を指定しても良いですが、同じ値にします。

次に dt の width を指定し、先述した方法と同様に dd の左にマージンを与えます。左マージンの値は dt の width と同じ値です。

更に dt の横に並べる為に dd の上にネガティブマージン(マイナスの値を持ったマージン)を与えます。そのネガティブマージンの値は dt と dd に指定されている line-height の値と同じにします。

この方法も簡単なのですが、個人的に考え方が少々苦手なので、最近では float させる方法を良く使っています。でも、clear を考慮せず使える方法なので、この記事をご覧の方は気分でどうぞ。

Prev
FC2ブログカスタマイズ ~新着マーク~
Top
はじめてのブログデザイン
Next
コメントの本文に CSS の指定が反映されない

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。