閉じる
閉じる

あまめも

定義リスト<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. HTML

    【HTML】でタグや特殊記号を表示する方法【一覧】

  2. take092-thumbnail

    【WaznFilm更新】MarkdownをWordPressのG…

  3. [甘]WordPressにログインできない!?「.htacces…

  4. [甘]パンくずリストつけてみた。

  5. take088-thumbnail

    【WaznFilm更新】フリーアイコンはここで決まり!クオリティ…

  6. take091-thumbnail

    【WaznFilm更新】これだけ覚えれば十分、Markdownの…

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

  1. デンキヤホール立て看板

Twitter

ページ上部へ戻る