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

webかたつむり

ウェブデザインを勉強中

dl

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>…

intern firstWeek review

復習・確認事項 dl, dt, ddのdisplay: table; vertical-align; middle letter-spacing あまり使うものではない。のかもしれないがいざ、というときに誤魔化しがきく。 「-0.5em」のように狭くする分量を「em」で指定するのがいいのかな? <li>の余白は上につける</li>…

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

dl の dt, dd を横に並べる

そのままの状態 <html lang="jp"><head><meta charset="utf-8"><title>dl, dt, dd</title><style></style></head> <body><dl><dt>8月15日</dt><dd>今日は終戦の日です</dd><dt>8月6日</dt><dd>広島に原爆が落ちた日</dd><dt>7月21日</dt><dd>今日は海の日です</dd><dt>5月5日</dt><dd>端午の節句になりました</dd><dt>3月22日</dt><dd>春分の日</dd></dl></body></html> …