閉じる
閉じる

あまめも

定義リスト<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. テーブルの背景を簡単に奇数or偶数行で色を変えて見易くしたい!

  2. take092-thumbnail

    【WaznFilm更新】MarkdownをWordPressのG…

  3. 知らなかった!WordPressで写真(画像)にキャプションを付…

  4. アイコン

    HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

  5. WordPressのバージョンをアップしたら画像読み込みがおかし…

  6. HTML

    HTMLで「引用符を自分好みに設定したい」って時は

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

  1. 文字

Twitter

ページ上部へ戻る