[css]リストを使ってお知らせ一覧のようなデザインを作ってみよう

今回は、ホームページに重要なお知らせの一覧をリストを使ってデザインしてみようと思います。ホームページは情報を発信するということを目的としておりますので、会社、お店などの新着情報を掲載していくことは、お店を営業していますとウェブの世界で言っていると言っても過言ではありません。そんなお知らせをリストを使ってデザインして作ってみようというのが今回の記事の趣旨になります。どんなデザインにしましょうか？一般的にサムネイルが１つ　あと日付と記事のタイトル・・あとは記事の概要がちょっと書いてあるみたいなよくあるデザインにして見ましょう。

リストで、お知らせの一覧を作るためのHTMLを準備しよう

リストを使って、お知らせの一覧を作るHTMLを準備してきたいと思います。

必要なものは、サムネイル、お知らせのタイトル、お知らせの記事の概要、日付とこの４つに絞りたいと思います。

<ul class="sample_list">
 <li>
  <div class="sample_listbox">
    <div class="sample_thumbnail">
　　　<img src="画像のURL">
　　</div>
    <div class="sample_contentbox">
      <div class="sample_date">2020/05/30</div>
      <h3>お知らせのタイトル</h3>
      <p class="sample_infoabs">
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。</p>
    </div>
  </div>
</li>
 <li>
  <div class="sample_listbox">
    <div class="sample_thumbnail">
　　　　<img src="画像のURL">
　　</div>
    <div class="sample_contentbox">
      <div class="sample_date">2020/05/30</div>
      <h3>お知らせのタイトル</h3>
      <p class="sample_infoabs">
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。
　　　　お知らせの内容が入りますよ。</p>
    </div>
  </div>
</li>
</ul>

上記の、HTMLの構造にCSSを当ててお知らせの一覧を作っていきたいと思います。

CSSでお知らせの一覧の形になるようにデザインしてみよう

CSSを使って上記のHTMLをお知らせの一覧のようなデザインにしていこうと思います。cssで画像は横に並べる形で４０％にして、コンテンツの内容は６０％にしていこうと思います。
また、画面がある程度小さくなった時には、画像とコンテンツが縦に並ぶように作って見ましょう。
それをコードにしたものが次のコードになります。

<style>
 ul.sample_list{
   padding-left:0;
   font-size:0;
 }
 ul.sample_list li:first-child{
    border-top:1px solid #333;
 }
 ul.sample_list li{
   border-bottom:1px solid #333;
   padding-top:20px;
   padding-bottom:20px;
 }
  
 ul.sample_list .sample_thumbnail{
    display:inline-block;
    width:40%;
    vertical-align:top;
 }
 ul.sample_list .sample_thumbnail img{
    width:100%;
 }
 ul.sample_list .sample_contentbox{
    display:inline-block;
    width:60%;
    box-sizing:border-box;
    padding-left:20px;
 }
 ul.sample_list .sample_contentbox .sample_date{
   font-size:14px;
   margin-bottom:20px;
 }
ul.sample_list .sample_contentbox .sample_infoabs{
    font-size:16px;
    margin-bottom:0;
}
ul.sample_list .sample_contentbox h3.sample_h3{
    font-size:20px;
    border-bottom:1px solid #333;
}
@media(max-width:767px){
 ul.sample_list .sample_thumbnail{
  width:100%;
  margin-bottom:20px;
 }
 ul.sample_list .sample_contentbox{
  width:100%;
 }
}
</style>
<ul class="sample_list">
 <li>
  <div class="sample_listbox">
    <div class="sample_thumbnail">
    <img src="画像のURL">
    </div>
    <div class="sample_contentbox">
      <div class="sample_date">2020/05/30</div>
      <h3 class="sample_h3">お知らせのタイトル</h3>
      <p class="sample_infoabs">
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。</p>
    </div>
  </div>
</li>
<li>
  <div class="sample_listbox">
    <div class="sample_thumbnail">
　　　　<img src="画像のURL">
　　</div>
    <div class="sample_contentbox">
      <div class="sample_date">2020/05/30</div>
      <h3 class="sample_h3">お知らせのタイトル</h3>
      <p class="sample_infoabs">
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。
       お知らせの内容が入りますよ。</p>
    </div>
  </div>
</li>
</ul>

お知らせの一覧のサンプル実装例

2020/05/30

お知らせのタイトル

お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。
2020/05/30

お知らせのタイトル

お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。お知らせの内容が入りますよ。

上記のように、リストを使ってお知らせの一覧のようなデザインが出来上がりましたね。

まとめ

今回は、cssを使ってお知らせの一覧をデザインして見ました。
作成したサンプルはよくあるようなデザインですが、あくまで一例となります。
このようにリストを使ってお知らせを作ることができます。ホームページでは、お知らせは大事な機能を果たしております。途切れることのない更新を心がけてホームページをさらに盛り上げて見てはいかがですか？

Profile Card