webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

dt

dl, dt, dd でグラフを作る

元ネタ [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 again&again

dl dt dd

「dl」にリセットをかけない状態、をきちんと再認識しておく。 dtとddがずれている状態。このずれはどこで解消していたのか? <style> dl, dt, dd{ } </style> 「dd」がずれているのだから、ddにリセットをかければよいはず。 <style> dd{ margin: 0; padding: 0; line-height:1.0;</style>…

dl, dt, dd again

dl dt dd

In Defence of the Definition List

dlで表組み その2(応用編)

こんな表組みを作ります 約束事の確認! <ul><ol>の中には<li>しか入れることができない。 <li>の中にはどんなタグでも入れることができる。 <li>の中にはどんなタグでも入れることができるのです。 <li>の入れ子はつかえます! 複雑なカンプを見たら、<li>の入れ子に答えがあることが多</li></li></li></li></li></ol></ul>…

dlで表組み その1(基本編)

<dl>のなかに<dt>が1つ、<dd>が2つ。 目的は、CSSで表組みにする。レスポンシブにも対応する。 罫線の付き方、paddingの付け方を確認したい。 約束事!の確認。 <dl>の中には、<dt>と<dd>しか入れられない。 <dt>の中には、インライン要素しか入れられない。逆に言うと<dt>の中には、インラ</dt></dt></dd></dt></dl></dd></dt></dl>…

dl を display:table で横並びにレイアウトする。

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;を追加する。 文字の横幅ぴった…