覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト
サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</
dt,ddを横に並べるときの注意（俺用メモ） - Hato-Style - Note
dt,ddを横に並べるときの注意（俺用メモ） 定義リスト(dl要素)で、CSSを用いてdtとddを横に並べてレイアウトするときの話やけど。 一般的に使用されていて、最も分かりやすいがfloatとmarginを使った下記の手法。 dl dt{ width: 5em; float: left; } dl dd{ margin-left: 5em; } <dl> <dt>テストです</dt> <dd>テスト テスト テスト テスト テスト ...</dd> </dl> 組みもわかりやすくて良いんだけれどもWinIEで頭の文字が右に微妙にずれたりしてる。レイアウトによってはなかなか気づかなかったりするので要注目。 回避策として、ddにtext-indentプロパティを指定すると、美味く見える模様。でも要素や文字によりけりなので検証が必要かも。WinIEだけに適応させるの
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
dtとddを横並びにしたメニューのサンプル5個｜web bibo
会社概要のページ・個人のプロフィールページ・Q&Aなどにdl,dt,ddを用いた定義リストを良く使います。この定義リストは思うように横並びにならないんですよね。 そこで、試しにいくつかサンプルを作ってみましたので参考にしてみて下さい。個人的にはサンプル4・5がお薦めです。 サンプル1 （borderを使った縦ライン） dtのテキスト量が多い場合・・・縦ボーダーが途切れる。FireFoxだとddはdtの高さに合わせてくれない。 ddのテキスト量が多い場合・・・縦ボーダーが途切れる。dtはddの高さに合わせてくれる。 →サンプル 1 サンプル2 （backgroundを使った縦ライン） dtのテキスト量が多い場合・・・縦ボーダーは途切れないが、FireFoxだとddはdtの高さに合わせてくれない。 ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Lecture: 定義リストdlのdt dd の横並びの作り方
