1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. お知らせに新着情報を表示する

お知らせに新着情報を表示する

お知らせに新着情報を表示する

次からはメインコンテンツの「お知らせ」「メニュー」「お店情報」を制作していきます。このページではまず「お知らせ」項目のコードを見ていきましょう。

ワードプレスなら管理が楽なんですが、今回のデモサイトはhtmlファイルで作る静的なサイトなのでお知らせを更新していくには1回1回ファイルを変更してアップロードする必要があります。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

お知らせをHTMLで構築する

お知らせとは店舗や会社がお客さんに対してお伝えする情報ですね。デモサイトでは端的な文言を一覧で表示する形をとっています。

index.html

                	
    
                        
  1. <main>
    2. 
                        
  2. ～スライダーの記述省略～
    3. 
                        
  3.   <section id="news">
    4. 
                        
  4.     <div class="inner">
    5. 
                        
  5.       <div class="title">
    6. 
                        
  6.         <h2>お知らせ</h2>
    7. 
                        
  7.       </div>
    8. 
                        
  8.       <div class="newsWrap">
    9. 
                        
  9.         <dl>
    10. 
                        
  10.           <dt>2021.09.01</dt>
    11. 
                        
  11.           <dd>こちらは<a href="https://chepirare.com/">チェピレア</a>が制作したデモサイトです。実際の店舗は存在しませんのでホームページ作りの参考にお使いください。</dd>
    12. 
                        
  12.         </dl>
    13. 
                        
  13.         <dl>
    14. 
                        
  14.           <dt>2021.08.27</dt>
    15. 
                        
  15.           <dd>すべてのメニューが「テイクアウト可能」となりましたので、店頭・お電話にてお申し付けください。</dd>
    16. 
                        
  16.         </dl>
    17. 
                        
  17.         <dl>
    18. 
                        
  18.           <dt>2021.08.02</dt>
    19. 
                        
  19.           <dd>新型コロナウィルス感染症による緊急事態宣言の発令に伴い、営業時間を20時までの時短営業とさせて頂いております。</dd>
    20. 
                        
  20.         </dl>
    21. 
                        
  21.       </div>
    22. 
                        
  22.     </div>
    23. 
                        
  23.   </section>
    24. 
                        
  24. </main>
    25.

やってる事は簡単です。お知らせ情報は「dl」タグを使っていて、その中の「dt」タグに公開した日付を記入し、「dd」タグにお知らせ内容を記述しています。

ただ、冒頭でも言いましたが今回のように静的なサイトでは更新のたびにhtmlファイルを書き直して再アップロードする必要があるので、HTMLに慣れていないと少し手間かも知れません。

SNSなら更新は簡単なので、お知らせ項目は付けずに新着情報はSNSで発信するという方法もアリかなとも思います。実際、そういう事業者さんもおられます。

まぁ、個人的にはホームページ内にもお知らせ項目を作り、SNSを活用されているならそちらでも情報を発信するという方法がオススメです。ご自身のやりやすい運営方法でご利用ください。

あとは「section」タグに「news」というidを追加しています。デザインだけならidじゃなくて「class」でも良いんですが、ページ内リンクの設定のために「id」を指定しています。

竹馬

「静的なサイト」はhtmlファイルで作られ、「動的なサイト」はワードプレスのようにphpファイルで作られます。ワードプレスならお知らせをブログのように更新する事ができます。

お知らせをCSSで調整する

それではお知らせ項目のCSSを見ていきましょう。「news」のidに対してちょっと特殊な設定をおこなっています。

style.css

                	
    
                    	
  1. /* ------ news ------ */
    2. 
                    	
  2. #news {
    3. 
                    	
  3.   padding-top: 80px;
    4. 
                    	
  4.   margin-top: -80px
    5. 
                    	
  5. }
    6. 
                    	
  6. #news .inner {
    7. 
                    	
  7.   width: 1200px;
    8. 
                    	
  8.   text-align: center;
    9. 
                    	
  9.   padding: 80px 10px;
    10. 
                    	
  10.   margin: 0 auto
    11. 
                    	
  11. }
    12. 
                    	
  12. #news h2 {
    13. 
                    	
  13.   font-size: 2.4rem;
    14. 
                    	
  14.   letter-spacing: 0.09em
    15. 
                    	
  15. }
    16. 
                    	
  16. #news .newsWrap {
    17. 
                    	
  17.   text-align: left;
    18. 
                    	
  18.   margin-top: 20px
    19. 
                    	
  19. }
    20. 
                    	
  20. #news .newsWrap dl {
    21. 
                    	
  21.   width: 900px;
    22. 
                    	
  22.   font-size: 0;
    23. 
                    	
  23.   padding: 25px 20px;
    24. 
                    	
  24.   margin: 0 auto;
    25. 
                    	
  25.   border-bottom: 1px solid #c1c1c1
    26. 
                    	
  26. }
    27. 
                    	
  27. #news .newsWrap dt {
    28. 
                    	
  28.   width: 120px;
    29. 
                    	
  29.   font-size: 1.4rem;
    30. 
                    	
  30.   letter-spacing: 0.09em;
    31. 
                    	
  31.   vertical-align: top;
    32. 
                    	
  32.   display: inline-block
    33. 
                    	
  33. }
    34. 
                    	
  34. #news .newsWrap dd {
    35. 
                    	
  35.   width: 740px;
    36. 
                    	
  36.   font-size: 1.6rem;
    37. 
                    	
  37.   letter-spacing: 0.09em;
    38. 
                    	
  38.   vertical-align: top;
    39. 
                    	
  39.   display: inline-block
    40. 
                    	
  40. }
    41. 
                    	
  41. #news .newsWrap dd a {
    42. 
                    	
  42.   color: #e21412;
    43. 
                    	
  43.   text-decoration: underline
    44. 
                    	
  44. }
    45. 
                    	
  45. @media screen and (max-width: 768px) {
    46. 
                    	
  46.   #news {
    47. 
                    	
  47.     padding-top: 60px;
    48. 
                    	
  48.     margin-top: -60px
    49. 
                    	
  49.   }
    50. 
                    	
  50.   #news .inner {
    51. 
                    	
  51.     width: 100%;
    52. 
                    	
  52.     padding: 60px 4% 20px
    53. 
                    	
  53.   }
    54. 
                    	
  54.   #news h2 { font-size: 2rem }
    55. 
                    	
  55.   #news .newsWrap dl {
    56. 
                    	
  56.     width: 100%;
    57. 
                    	
  57.     padding: 20px 0
    58. 
                    	
  58.   }
    59. 
                    	
  59.   #news .newsWrap dt {
    60. 
                    	
  60.     width: 100%;
    61. 
                    	
  61.     display: block
    62. 
                    	
  62.   }
    63. 
                    	
  63.   #news .newsWrap dd {
    64. 
                    	
  64.     width: 100%;
    65. 
                    	
  65.     margin-top: 10px;
    66. 
                    	
  66.     display: block
    67. 
                    	
  67.   }
    68. 
                    	
  68. }
    69.

全体としてはそんなに難しくないですね。今回は「お知らせ」「メニュー」「お店情報」にはページ内リンクを設定しているのでそこんトコを少し調整しています。

「news」のidに「padding-top:80px;」と「margin-top:-80px;」を付けました。「んっ？コレって意味あんの？」って思われるかも知れませんが、今回のサイトには必要な設定です。

この設定をおこなっていないとページ内リンクで移動した時に「お知らせ」のタイトル部分が上部にくっついた形になってしまいます。

「inner」のクラス名を付けたdivにpaddingの設定を付けているのでタイトルが消える事はないですが、このpaddingもなければ「お知らせ」のタイトルがheaderに隠れてしまいます。

今回はページを下にスクロールしてもheaderを上部に固定しているため、ページ内リンクで移動する際には余白の調整をおこなわなければいけなくなります。

なぜこのような記述になるかは置いといて（笑）、headerの高さが「80px」の場合は「padding-top:80px;」と「margin-top:-80px;」を設定すると覚えておいてください。

ちなみにスマホのデザインではheaderの高さが「60px」なので「padding-top:60px;」と「margin-top:-60px;」としています。あまり難しく考えないでくださいね。

ページ内リンクにスムーズスクロールを追加する

スムーズスクロールを追加する事によってページ内のリンク先までスルスル～っと滑らかに動いてくれます。

main.js

                    
    
                        
  1. // smooth scroll
    2. 
                        
  2. $(function(){
    3. 
                        
  3.   $('a[href^=#]').click(function() {
    4. 
                        
  4.     var speed = 600;
    5. 
                        
  5.     var href= $(this).attr("href");
    6. 
                        
  6.     var target = $(href == "#" || href == "" ? 'html' : href);
    7. 
                        
  7.     var position = target.offset().top;
    8. 
                        
  8.     $('body,html').animate({scrollTop:position}, speed, 'swing');
    9. 
                        
  9.     return false;
    10. 
                        
  10.   });
    11. 
                        
  11. });
    12.

スムーズスクロールの設定がないと瞬間的にリンク先に移動します。なのでせっかくなんで動きも追加しておきましょう。

個人的にもそうですけど、この動きが嫌という声を聞いた事がないので（笑）、ほぼほぼデフォルトで付けてしまっても良いかなと思います。

「jQueryでスムーズスクロールを実装！ページ内リンクに動きを付け加える」で詳しく解説しているので良かったら見てみてください。

こちらも見てください

記述したHTMLとCSSの確認

それでは「お知らせ」項目が完成しましたのでコードの確認をしていきましょう。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                        
  10. <main>
    11. 
                        
  11.   ～スライダーの記述省略～
    12. 
                        
  12.   <section id="news">
    13. 
                        
  13.     <div class="inner">
    14. 
                        
  14.       <div class="title">
    15. 
                        
  15.         <h2>お知らせ</h2>
    16. 
                        
  16.       </div>
    17. 
                        
  17.       <div class="newsWrap">
    18. 
                        
  18.         <dl>
    19. 
                        
  19.           <dt>2021.09.01</dt>
    20. 
                        
  20.           <dd>こちらは<a href="https://chepirare.com/">チェピレア</a>が制作したデモサイトです。実際の店舗は存在しませんのでホームページ作りの参考にお使いください。</dd>
    21. 
                        
  21.         </dl>
    22. 
                        
  22.         <dl>
    23. 
                        
  23.           <dt>2021.08.27</dt>
    24. 
                        
  24.           <dd>すべてのメニューが「テイクアウト可能」となりましたので、店頭・お電話にてお申し付けください。</dd>
    25. 
                        
  25.         </dl>
    26. 
                        
  26.         <dl>
    27. 
                        
  27.           <dt>2021.08.02</dt>
    28. 
                        
  28.           <dd>新型コロナウィルス感染症による緊急事態宣言の発令に伴い、営業時間を20時までの時短営業とさせて頂いております。</dd>
    29. 
                        
  29.         </dl>
    30. 
                        
  30.       </div>
    31. 
                        
  31.     </div>
    32. 
                        
  32.   </section>
    33. 
                        
  33. </main>
    34. 
                        
  34. ～JSファイルの読み込み省略～
    35. 
                        
  35. </body>
    36. 
                        
  36. </html>
    37.

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. ～headerデザイン省略～
    3. 
                    	
  3. ～navデザイン省略～
    4. 
                    	
  4. ～スライダーデザイン省略～
    5. 
                    	
  5. /* ------ news ------ */
    6. 
                    	
  6. #news {
    7. 
                    	
  7.   padding-top: 80px;
    8. 
                    	
  8.   margin-top: -80px
    9. 
                    	
  9. }
    10. 
                    	
  10. #news .inner {
    11. 
                    	
  11.   width: 1200px;
    12. 
                    	
  12.   text-align: center;
    13. 
                    	
  13.   padding: 80px 10px;
    14. 
                    	
  14.   margin: 0 auto
    15. 
                    	
  15. }
    16. 
                    	
  16. #news h2 {
    17. 
                    	
  17.   font-size: 2.4rem;
    18. 
                    	
  18.   letter-spacing: 0.09em
    19. 
                    	
  19. }
    20. 
                    	
  20. #news .newsWrap {
    21. 
                    	
  21.   text-align: left;
    22. 
                    	
  22.   margin-top: 20px
    23. 
                    	
  23. }
    24. 
                    	
  24. #news .newsWrap dl {
    25. 
                    	
  25.   width: 900px;
    26. 
                    	
  26.   font-size: 0;
    27. 
                    	
  27.   padding: 25px 20px;
    28. 
                    	
  28.   margin: 0 auto;
    29. 
                    	
  29.   border-bottom: 1px solid #c1c1c1
    30. 
                    	
  30. }
    31. 
                    	
  31. #news .newsWrap dt {
    32. 
                    	
  32.   width: 120px;
    33. 
                    	
  33.   font-size: 1.4rem;
    34. 
                    	
  34.   letter-spacing: 0.09em;
    35. 
                    	
  35.   vertical-align: top;
    36. 
                    	
  36.   display: inline-block
    37. 
                    	
  37. }
    38. 
                    	
  38. #news .newsWrap dd {
    39. 
                    	
  39.   width: 740px;
    40. 
                    	
  40.   font-size: 1.6rem;
    41. 
                    	
  41.   letter-spacing: 0.09em;
    42. 
                    	
  42.   vertical-align: top;
    43. 
                    	
  43.   display: inline-block
    44. 
                    	
  44. }
    45. 
                    	
  45. #news .newsWrap dd a {
    46. 
                    	
  46.   color: #e21412;
    47. 
                    	
  47.   text-decoration: underline
    48. 
                    	
  48. }
    49. 
                    	
  49. @media screen and (max-width: 768px) {
    50. 
                    	
  50.   #news {
    51. 
                    	
  51.     padding-top: 60px;
    52. 
                    	
  52.     margin-top: -60px
    53. 
                    	
  53.   }
    54. 
                    	
  54.   #news .inner {
    55. 
                    	
  55.     width: 100%;
    56. 
                    	
  56.     padding: 60px 4% 20px
    57. 
                    	
  57.   }
    58. 
                    	
  58.   #news h2 { font-size: 2rem }
    59. 
                    	
  59.   #news .newsWrap dl {
    60. 
                    	
  60.     width: 100%;
    61. 
                    	
  61.     padding: 20px 0
    62. 
                    	
  62.   }
    63. 
                    	
  63.   #news .newsWrap dt {
    64. 
                    	
  64.     width: 100%;
    65. 
                    	
  65.     display: block
    66. 
                    	
  66.   }
    67. 
                    	
  67.   #news .newsWrap dd {
    68. 
                    	
  68.     width: 100%;
    69. 
                    	
  69.     margin-top: 10px;
    70. 
                    	
  70.     display: block
    71. 
                    	
  71.   }
    72. 
                    	
  72. }
    73.

main.js

                    
    
                        
  1. ～sp nav設定省略～
    2. 
                        
  2. ～slider設定省略～
    3. 
                        
  3. // smooth scroll
    4. 
                        
  4. $(function(){
    5. 
                        
  5.   $('a[href^=#]').click(function() {
    6. 
                        
  6.     var speed = 600;
    7. 
                        
  7.     var href= $(this).attr("href");
    8. 
                        
  8.     var target = $(href == "#" || href == "" ? 'html' : href);
    9. 
                        
  9.     var position = target.offset().top;
    10. 
                        
  10.     $('body,html').animate({scrollTop:position}, speed, 'swing');
    11. 
                        
  11.     return false;
    12. 
                        
  12.   });
    13. 
                        
  13. });
    14.

これで「main.js」も完成です。デモサイトでのJS設定は、スマホ時に三本線をタップしてクラスを追加、スライダーのカスタム設定、そしてスムーズスクロールの3点です。

この次は「メニュー」項目を作っていきます。メニューはコードが結構多いのと、表示を切り替えるタブメニューを使いますので、頑張っていきましょう。

メイン画像にスライダーを設置 メニューはタブを使って表示する

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記