忍者CODE

ログイン

9
dl,dt,ddをマスターしよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
コーポレートサイトを作成する際の「会社概要」欄などでよく見かけるdl,dt,ddについて学びましょう。

見本参考にしてください。
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <section>
  <dl>
    <dt>屋号</dt>
    <dd>忍者CODE</dd>

    <dt>住所</dt>
    <dd>滋賀県甲賀市甲賀の里</dd>

    <dt>資本金</dt>
    <dd>100円</dd>

    <dt>事業</dt>
    <dd>
      <ul>
        <li>手裏剣を使用して悪を討つ</li>
        <li>剣術の練習をして果物切る</li>
        <li>影分身の術を使用して2人分のバイト代を受給</li>
        <li>火遁の術でキャンプファイヤー</li>
      </ul>
    </dd>
  </dl>
</section>
¥HTML¥
          
            dt{
    float: left;
}
dd{
    width: 400px;
    margin: 0 0 16px 100px;
    border-bottom: 1px dotted;
}
ul,li {
  list-style: none;
  padding: 0;
}
li::before {
    content: "■";
}
¥CSS¥
          
答えのアイコン

解説

今回のようにdl,dt,ddを使用して横並びにする際は
dtに対して float: left;を使用します。

dtとddの間を開ける
上下の感覚を空けたい場合はddに対してstyleを当てます。borderも同じです。

また、dt,ddは複数行でも崩れることはありませんし忍者CODEがやっているようにul/liなど別のタグを入れることも可能です。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET