はてなブックマーク

PCで表示する時は横並びで、スマホで表示する時は上下に変わる、レスポンシブな「dl dt dd」定義リストです。 新着情報を例にしたデモページです。 ブラウザの横幅を狭めてみてください。 デモページを見る ◆html <div class="topics"> <dl> <dt>20180101</dt> <dd>新着情報の内容が入ります。</dd> </dl> <dl> <dt>20180101</dt> <dd>新着情報の内容が入ります。</dd> </dl> <dl> <dt>20180101</dt> <dd>新着情報の内容が入ります。</dd> </dl> </div> ◆css .topics dl { padding: 15px 0; border-bottom: 1px solid #ccc; } .topics dt { padding-bottom: 5px; } @me