NEWSリスト(更新情報)の作り方

企業のホームページでよく見るニュースリストの作り方を調べたところ、ざっと以下の3つの方法を見つけました。

  • <ul><li>タグを使う
  • <dl><dt><dd>タグを使う
  • <table>タグを使う

正直どれが一番良いのか分からないのですが、数の多かった<ul><li>タグを使う方法を備忘録に残しておこうと思います。

作りたいのは以下の3点を載せるニュースリストです。

  • 日付
  • NEWSカテゴリ
  • 更新内容

f:id:lalune_webdedign:20210101210404p:plain

HTML

  <ul>
    <li>
       <a href=“#”><time class=“date” datetime=“2021-01-01”>2021.1.1</time>
       <span class=“category-report”>更新情報</span>
       <span class=“title”>ブログを更新しました</span>
       </a>
     </li>
  </ul>

このHTMLはHTML5/CSS3モダンコーディングの本を参考にしました。

カテゴリごとにクラスを付与することで、「更新情報」はピンクの背景色、「イベント情報」は水色の背景色などデザインを付けてユーザーに分かりやすくする予定です。

<datetime>タグについて

  • 機械に更新日時等を認識させるために使う
  • 特にニュースサイトなど、更新性が重要になるサイトには必須
  • 検索結果にも表示されるため、ユーザーが情報鮮度を確認するのにも役立つ

「○時間前」など検索結果に表示されているニュースをよく見ますよね。

あれだ・・・!

f:id:lalune_webdedign:20210101211903p:plain

ふと思ったんですが、こういう企業ブログで記事更新情報がニュースリストに出ているサイトをよく見ますが、ブログを更新するたびに最新の紹介情報を追記して、古いもののHTMLを消す、という作業をしているのかな。

結構めんどくさい・・・

ブログのCMSを使えばまた違うんだろうけど・・・

分からないことだらけです!

コメント

タイトルとURLをコピーしました