狼読

 
2020/05/30

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

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

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

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

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

<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で画像は横に並べる形で40%にして、コンテンツの内容は60%にしていこうと思います。
また、画面がある程度小さくなった時には、画像とコンテンツが縦に並ぶように作って見ましょう。
それをコードにしたものが次のコードになります。

<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

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2021/06/13

【Mac】VirtualBox + Vagrant で仮想マシン上に開発環境を構築する方法

2020/05/01

[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読