dl
元ネタ [CSS]dl要素を美しくデザインするスタイルシートのまとめ | コリス 完成形 <style> dl, dt, dd { margin: 0; padding: 0; line-height: 1.0; } .container { width: 600px; margin: 0 auto; } dt { width: 100%; background: #cccccc; padding: 0.5em; margi…
「dl」にリセットをかけない状態、をきちんと再認識しておく。 dtとddがずれている状態。このずれはどこで解消していたのか？ <style> dl, dt, dd{ } </style> 「dd」がずれているのだから、ddにリセットをかければよいはず。 <style> dd{ margin: 0; padding: 0; line-height:1.0;</style>…
In Defence of the Definition List
こんな表組みを作ります 約束事の確認！ <ul><ol>の中には<li>しか入れることができない。 <li>の中にはどんなタグでも入れることができる。 <li>の中にはどんなタグでも入れることができるのです。 <li>の入れ子はつかえます！ 複雑なカンプを見たら、<li>の入れ子に答えがあることが多</li></li></li></li></li></ol></ul>…
<dl>のなかに<dt>が１つ、<dd>が２つ。 目的は、CSSで表組みにする。レスポンシブにも対応する。 罫線の付き方、paddingの付け方を確認したい。 約束事！の確認。 <dl>の中には、<dt>と<dd>しか入れられない。 <dt>の中には、インライン要素しか入れられない。逆に言うと<dt>の中には、インラ</dt></dt></dd></dt></dl></dd></dt></dl>…
復習・確認事項 dl, dt, ddのdisplay: table; vertical-align; middle letter-spacing あまり使うものではない。のかもしれないがいざ、というときに誤魔化しがきく。 「-0.5em」のように狭くする分量を「em」で指定するのがいいのかな？ <li>の余白は上につける</li>…
dlをdisplay:tableで横並びにレイアウトする。 <title>dl_table</title><style>html, body, dl, dt, dd{ margin: 0; padding: 0; line-height: 1.0;}dl{}dt{background: #e20613;}dd{background: #aaaa8a;}</style></head> <body><dl><dt>学籍番号</dt><dd>氏名/ふりがな</dd></dl></body> dlにdisplay:table;を追加する。 文字の横幅ぴった…
そのままの状態 <html lang="jp"><head><meta charset="utf-8"><title>dl, dt, dd</title><style></style></head> <body><dl><dt>８月１５日</dt><dd>今日は終戦の日です</dd><dt>８月６日</dt><dd>広島に原爆が落ちた日</dd><dt>７月２１日</dt><dd>今日は海の日です</dd><dt>５月５日</dt><dd>端午の節句になりました</dd><dt>３月２２日</dt><dd>春分の日</dd></dl></body></html> …
