閉じる
閉じる

あまめも

定義リスト<dl><dt><dd>を使用してお知らせリストを作成

list

こんにちは! あますた(@amaguristar)です。

  • 「お知らせを日にちと説明でリスト表示したいけどどうすれば良いんだろう?」

ってことありませんか? cssを設定して簡単に解決できます。

 

定義リスト(<dl>)リストを使うのが一番簡単

具体的に何をしたいかと言うと、

お知らせ
2020-07-01  てすとてすとてすと
2020-07-10  テストテストテスト
2020-07-20  てすとテストてすと

という表示。

ローテクで書いても良いのでしょうがせっかくタグという便利なものがあるので今回は利用。

とりあえず何も考えないでサクッと答えをだすと一番手取り早いのが定義リストを使用する方法

定義リストを具体的に言うと<dl><dt><dd>タグのこと。それらを使用して簡単にHTMLを書くと。

<dl>
    <dt>2020-07-01</dt><dd>てすとてすとてすと</dd>
    <dt>2020-07-10</dt><dd>テストテストテスト</dd>
    <dt>2020-07-20</dt><dd>てすとテストてすと</dd>
</dl>

ここまでは簡単ですが、これを表示すると

2020-07-01
てすとてすとてすと
2020-07-10
テストテストテスト
2020-07-20
てすとテストてすと

と、改行されてしまいます。

そこでcssを下記のように設定。

dl.sample {
    overflow: hidden;
    padding: 10px;
}

dl.sample dt {
    float: left;
    font-weight: bold;
    width: 7em;
}

dl.sample dd {
    padding-left: 7em;
    margin-left: 0;
}

上記cssを先ほどの定義リストに適用すると、

2020-07-01
てすとてすとてすと
2020-07-10
テストテストテスト
2020-07-20
てすとテストてすと

よく見るお知らせリストのように表示されます。

簡単にポイントを説明すると下記3点。

  1. <dt>に「float: left;」を設定
  2. <dd>の左のmarginを「0」に設定
  3. <dl>に「overflow: hidden;」を適用してfloatを解除

基本的にこの3つが出来てればあとは好みで調整すれば問題ないと思います。

関連記事

  1. WordPressで<div>の様なHTMLタグを表…

  2. HPでライン風の対話型吹き出しの表示に枠を付けたい!!ってなった…

  3. 文字

    【HTML】略語の正式名称を簡単に表示する方法

  4. Gitを使用してると「このファイルは管理しないんだけど・・・」っ…

  5. インフォ

    画面のサイズに合わせて拡大縮小する画像の簡単なCSS設定

  6. WordPressのタグやカテゴリを整理しようと思ったのでDBか…

こんなメモもありますよ♪

  1. てんや 看板

Twitter

ページ上部へ戻る