dlとulのコードについて

dlについて

dlはいつ使う?

いくつかの項目名とその内容を載せる時。
dl・dt・ddを使うと、dtは太字になり、ddの左側には自動でスペースが空き、項目名と内容が【見やすく】表示できる。

dlの書き方

①最初は<dl>で始める。
②<dt>と</dt>の間に、項目名を入れる。
③<dd>と</dd>の間に、その項目の説明文を入れる。
④最後に</dl>で閉める。

dlの例

家族構成
<dl>
<dt>父</dt>
<dd>加藤太郎
65歳</dd>
<dt>母</dt>
<dd>加藤花子
65歳</dd>
<dt>長男</dt>
<dd>加藤一郎
35歳</dd>
<dt>長女</dt>
<dd>加藤花江
30歳</dd>
<dt>ペット</dt>
<dd>加藤ちゃっぴー
20歳</dd>
</dl>
と書くと、↓ ↓ ↓

加藤太郎(自動で左側にスペースが入る)
65歳(dd内なら改行しても自動で左側にスペースが入る)
加藤花子
65歳
長男
加藤一郎
35歳
長女
加藤花江
30歳
ペット
加藤ちゃっぴー
20歳

と表示される。

ulについて

ulはいつ使う?

いくつかのリストを箇条書きに載せる時。
ul・liを使うとliの左側に自動で点が付きスペースも空き【見やすく】表示できる。

ulの書き方

①最初は<ul>で始める。
②<li>と</li>の間に、リスト名を入れる。
③最後に</ul>で閉める。

ulの例

家族構成
<ul>
<li>加藤太郎
65歳</li>
<li>加藤花子
65歳</li>
<li>加藤一郎
35歳</li>
<li>加藤花江
30歳</li>
<li>加藤ちゃっぴー
20歳</li>
</ul>
と書くと、↓ ↓ ↓

  • 加藤太郎(liの一行目には左側に点が入る)
    65歳(li内なら改行しても自動で左側にスペースが入る)
  • 加藤花子
    65歳
  • 加藤一郎
    35歳
  • 加藤花江
    30歳
  • 加藤ちゃっぴー
    20歳

と表示される。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です