1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. お問い合わせページの骨組みを作る

お問い合わせページの骨組みを作る

お問い合わせページの骨組みを作る

前回はTransmitMailで使用するファイルを指定の場所に設置し、フォームシステムがうまく動作するように設定をおこないました。

今回はHTMLとCSSの設定をおこなっていきますが、「contact」フォルダはルートディレクトリの下層フォルダという事に注意してください。

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

目次 [閉じる]

お問い合わせの共通部分をHTMLで構築

まずはお問い合わせページに記述する共通部分をご確認ください。HTMLファイルのはじめから終わりまでを載せていますけど、トップページとどこが違うかわかりますでしょうか？

input.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. <meta charset="UTF-8">
    5. 
                        
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                        
  6. <title>お問い合わせ | いやしのカレー サンプル</title>
    7. 
                        
  7. <meta name="description" content="こちらはチェピレアが制作したデモサイトです。実際の店舗は存在しませんのでホームページ作りの参考にお使いください。">
    8. 
                        
  8. <link rel="canonical" href="ページのURL/contact/">
    9. 
                        
  9. <link rel="apple-touch-icon-precomposed" href="../img/apple-touch-icon.png">
    10. 
                        
  10. <link rel="icon" href="../favicon.ico">
    11. 
                        
  11. <link type="text/css" rel="stylesheet" href="../css/style.css">
    12. 
                        
  12. </head>
    13. 
                        
  13. <body>
    14. 
                    	
  14. <header>
    15. 
                     	
  15.   <div class="inner cf">
    16. 
                     	
  16.     <div class="logo">
    17. 
                     	
  17.       <a href="../">
    18. 
                     	
  18.         <h1>いやしのカレー <span>サンプル</span></h1>
    19. 
                     	
  19.       </a>
    20. 
                     	
  20.     </div>
    21. 
                      	
  21.     <nav>
    22. 
                      	
  22.       <div class="globalNav">
    23. 
                     	
  23.         <ul>
    24. 
                     	
  24.           <li><a href="../#news">お知らせ</a></li>
    25. 
                     	
  25.           <li><a href="../#menu">メニュー</a></li>
    26. 
                    	
  26.           <li><a href="../#shop">お店情報</a></li>
    27. 
                    	
  27.           <li><a href="./">お問い合わせ</a></li>
    28. 
                    	
  28.         </ul>
    29. 
                    	
  29.       </div>
    30. 
                    	
  30.       <div class="snsWrap">
    31. 
                    	
  31.         <ul>
    32. 
                     	
  32.           <li><a href="TwitterページのURL" target="_blank"><img src="../img/icon_twitter_b.png" alt="Twitter"></a></li>
    33. 
                     	
  33.           <li><a href="FacebookページのURL" target="_blank"><img src="../img/icon_facebook_b.png" alt="Facebook"></a></li>
    34. 
                     	
  34.           <li><a href="InstagramページのURL" target="_blank"><img src="../img/icon_instagram_b.png" alt="Instagram"></a></li>
    35. 
                    	
  35.         </ul>
    36. 
                    	
  36.       </div>
    37. 
                    	
  37.     </nav>
    38. 
                    	
  38.     <div class="menuBtn">
    39. 
                    	
  39.       <a href="javascript:void(0)" class="menuTrigger">
    40. 
                    	
  40.         <div class="menuIcon">
    41. 
                     	
  41.           <span></span>
    42. 
                     	
  42.           <span></span>
    43. 
                     	
  43.           <span></span>
    44. 
                    	
  44.         </div>
    45. 
                    	
  45.       </a>
    46. 
                    	
  46.     </div>
    47. 
                    	
  47.   </div>
    48. 
                    	
  48. </header>
    49. 
                    	
  49. <main>
    50. 
                    	
  50.   <section id="contact">
    51. 
                    	
  51.     <div class="imageWrap"></div>
    52. 
                    	
  52.     <div class="inner" id="contactInner">
    53. 
                     	
  53.       <div class="title">
    54. 
                     	
  54.         <h2>お問い合わせ</h2>
    55. 
                     	
  55.       </div>
    56. 
                     	
  56.       <div class="txt">
    57. 
                     	
  57.         <p>いやしのカレー サンプルへのお問い合わせや団体様のご予約などお気軽にご連絡ください。<br>お問い合わせ内容を確認の後、改めてご連絡させて頂きます。（定休日 : 水曜日）<br>お急ぎの場合はお電話にて「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    58. 
                     	
  58.       </div>
    59. 
                    	
  59.  
    60. 
                    	
  60.     </div>
    61. 
                    	
  61.   </section>
    62. 
                    	
  62. </main>
    63. 
                        
  63. <footer>
    64. 
                        
  64.   <div class="inner">
    65. 
                        
  65.     <div class="snsWrap">
    66. 
                        
  66.       <ul>
    67. 
                        
  67.         <li><a href="https://twitter.com/chepirare" target="_blank"><img src="../img/icon_twitter_w.png" alt="Twitter"></a></li>
    68. 
                        
  68.         <li><a href="https://www.facebook.com/Chepirare" target="_blank"><img src="../img/icon_facebook_w.png" alt="Facebook"></a></li>
    69. 
                        
  69.         <li><a href="https://www.instagram.com/chepirare/" target="_blank"><img src="../img/icon_instagram_w.png" alt="Instagram"></a></li>
    70. 
                        
  70.       </ul>
    71. 
                        
  71.     </div>
    72. 
                        
  72.     <div class="copyright">
    73. 
                        
  73.       <small>© 2021 いやしのカレー サンプル.</small>
    74. 
                        
  74.     </div>
    75. 
                        
  75.   </div>
    76. 
                        
  76. </footer>
    77. 
                        
  77. <script type="text/javascript" src="../js/jquery.min.js"></script>
    78. 
                        
  78. <script type="text/javascript" src="../js/main.js"></script>
    79. 
                        
  79. </body>
    80. 
                        
  80. </html>
    81.

このコードは「input.html」「confirm.html」「finish.html」「error.html」の4ファイルともに記述します。トップページとコードはほぼほぼ同じですが、いくつか記述が違うところがあるので注意してください。

まずは「title」タグを変更します。ここはお問い合わせページなので「お問い合わせ | いやしのカレー サンプル」としてこのサイトのお問い合わせページである事を示します。

そしてお問い合わせページにはスライダーは設置しないので「slick.css」「slick-theme.css」「slick.min.js」の3ファイルは読み込んでいません。

スライダーのファイルは読み込んでいてもページは問題なく表示されますが、ページに関係ないファイルを読み込まない事によって表示速度が速くなります。

そして一番気を付けなければいけないのが各ファイルへのパスです。CSSやJSの読み込み、「a」タグと「img」タグのパスがトップページとは違います。

例えばトップページでは「./css/style.css」として読み込んでいたstyle.cssですが、お問い合わせページでは「../css/style.css」というパスに変更しています。

ここに「.（ピリオド）」が1個増えると意味が変わってくるので注意してください。

まず「/（スラッシュ）」の意味は何となくわかってもらえるかと思いますが、「ディレクトリ（フォルダ）の中」という事です。「css/style.css」なら「css」フォルダの中の「style.css」ファイルという意味です。

次に「./」であれば「この階層の中の」という意味となり、「../」であれば「ひとつ上の階層の中の」という意味になります。

竹馬

「./」や「../」の形で指定するパス（URL）は「相対パス」と言い、URLを含めた指定方法を「絶対パス」と言って「サイトのURL/css/style.css」のように記述します。

お問い合わせの共通部分をCSSで調整する

次に共通部分をCSSでデザインしていきます。ヘッダーやフッターはすでに指定したデザインが適応されますので、追加としては「contact」のid名を持つsection内のデザインです。

style.css

                	
    
                    	
  1. /* ------ contact ------ */
    2. 
                    	
  2. #contact .imageWrap {
    3. 
                    	
  3.   width: 100%;
    4. 
                    	
  4.   height: 480px;
    5. 
                    	
  5.   background: url("../img/contact_main.jpg") 30% 0 no-repeat;
    6. 
                    	
  6.   background-size: cover
    7. 
                    	
  7. }
    8. 
                    	
  8. #contact .inner {
    9. 
                    	
  9.   width: 900px;
    10. 
                    	
  10.   text-align: center;
    11. 
                    	
  11.   padding: 80px 10px 160px;
    12. 
                    	
  12.   margin: -80px auto 0
    13. 
                    	
  13. }
    14. 
                    	
  14. #contact .title { padding-top: 80px }
    15. 
                    	
  15. #contact .title h2 {
    16. 
                    	
  16.   font-size: 2.4rem;
    17. 
                    	
  17.   letter-spacing: 0.09em
    18. 
                    	
  18. }
    19. 
                    	
  19. #contact .txt { margin-top: 60px }
    20. 
                    	
  20. #contact .txt p {
    21. 
                    	
  21.   font-size: 1.6rem;
    22. 
                    	
  22.   letter-spacing: 0.09em
    23. 
                    	
  23. }
    24. 
                    	
  24. @media screen and (max-width: 768px) {
    25. 
                    	
  25.   #contact .imageWrap {
    26. 
                    	
  26.     height: 280px;
    27. 
                    	
  27.     background: url("../img/contact_main.jpg") 20% 40% no-repeat
    28. 
                    	
  28.   }
    29. 
                    	
  29.   #contact .inner {
    30. 
                    	
  30.     width: 100%;
    31. 
                    	
  31.     padding: 60px 4% 80px;
    32. 
                    	
  32.     margin: -60px auto 0
    33. 
                    	
  33.   }
    34. 
                    	
  34.   #contact .title { padding-top: 60px }
    35. 
                    	
  35.   #contact .title h2 { font-size: 2rem }
    36. 
                    	
  36.   #contact .txt { margin-top: 40px }
    37. 
                    	
  37.   #contact .txt p br { display: none }
    38. 
                    	
  38. }
    39.

ここは特に難しくないのでサクッとコピペしておきましょう。

「TransmitMail」をデフォルト状態で使った場合、今回のサイトでは少し具合の悪い事になるのでそこだけ追加で設定しています。

「#contact」の中の「.inner」に「contactInner」のid名も付けているんですが、これはトップページの時と同じようにページ内リンクを指定しています。

「TransmitMail」をデフォルトで使用すると、「確認する」のボタンをクリックした時に確認ページへ遷移もしくはエラーメッセージが表示されるんですが、その切り替え時にページの一番上へ画面が移動してしまうんです。

確認ページに遷移しても、またお問い合わせページの上部からスクロールしないと確認項目が見れないのでユーザーにとってはわかりにくいです。なのでページ上部ではなく「#contactInner」へ移動するように設定します。

そして「.inner」にも「padding-top:80px;」と「margin-top:-80px;」の指定を加えています。あとページ上部の画像はCSSで読み込む形にしています。

お問い合わせで使っている画像はこちらからダウンロードできます。→「お問い合わせ画像のダウンロード」

記述したHTMLとCSSの確認

それではお問い合わせページの共通部分のコードを確認しておきましょう。

input.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. <meta charset="UTF-8">
    5. 
                        
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                        
  6. <title>お問い合わせ | いやしのカレー サンプル</title>
    7. 
                        
  7. <meta name="description" content="こちらはチェピレアが制作したデモサイトです。実際の店舗は存在しませんのでホームページ作りの参考にお使いください。">
    8. 
                        
  8. <link rel="canonical" href="ページのURL/contact/">
    9. 
                        
  9. <link rel="apple-touch-icon-precomposed" href="../img/apple-touch-icon.png">
    10. 
                        
  10. <link rel="icon" href="../favicon.ico">
    11. 
                        
  11. <link type="text/css" rel="stylesheet" href="../css/style.css">
    12. 
                        
  12. </head>
    13. 
                        
  13. <body>
    14. 
                    	
  14. <header>
    15. 
                     	
  15.   <div class="inner cf">
    16. 
                     	
  16.     <div class="logo">
    17. 
                     	
  17.       <a href="../">
    18. 
                     	
  18.         <h1>いやしのカレー <span>サンプル</span></h1>
    19. 
                     	
  19.       </a>
    20. 
                     	
  20.     </div>
    21. 
                      	
  21.     <nav>
    22. 
                      	
  22.       <div class="globalNav">
    23. 
                     	
  23.         <ul>
    24. 
                     	
  24.           <li><a href="../#news">お知らせ</a></li>
    25. 
                     	
  25.           <li><a href="../#menu">メニュー</a></li>
    26. 
                    	
  26.           <li><a href="../#shop">お店情報</a></li>
    27. 
                    	
  27.           <li><a href="./">お問い合わせ</a></li>
    28. 
                    	
  28.         </ul>
    29. 
                    	
  29.       </div>
    30. 
                    	
  30.       <div class="snsWrap">
    31. 
                    	
  31.         <ul>
    32. 
                     	
  32.           <li><a href="TwitterページのURL" target="_blank"><img src="../img/icon_twitter_b.png" alt="Twitter"></a></li>
    33. 
                     	
  33.           <li><a href="FacebookページのURL" target="_blank"><img src="../img/icon_facebook_b.png" alt="Facebook"></a></li>
    34. 
                     	
  34.           <li><a href="InstagramページのURL" target="_blank"><img src="../img/icon_instagram_b.png" alt="Instagram"></a></li>
    35. 
                    	
  35.         </ul>
    36. 
                    	
  36.       </div>
    37. 
                    	
  37.     </nav>
    38. 
                    	
  38.     <div class="menuBtn">
    39. 
                    	
  39.       <a href="javascript:void(0)" class="menuTrigger">
    40. 
                    	
  40.         <div class="menuIcon">
    41. 
                     	
  41.           <span></span>
    42. 
                     	
  42.           <span></span>
    43. 
                     	
  43.           <span></span>
    44. 
                    	
  44.         </div>
    45. 
                    	
  45.       </a>
    46. 
                    	
  46.     </div>
    47. 
                    	
  47.   </div>
    48. 
                    	
  48. </header>
    49. 
                    	
  49. <main>
    50. 
                    	
  50.   <section id="contact">
    51. 
                    	
  51.     <div class="imageWrap"></div>
    52. 
                    	
  52.     <div class="inner" id="contactInner">
    53. 
                     	
  53.       <div class="title">
    54. 
                     	
  54.         <h2>お問い合わせ</h2>
    55. 
                     	
  55.       </div>
    56. 
                     	
  56.       <div class="txt">
    57. 
                     	
  57.         <p>いやしのカレー サンプルへのお問い合わせや団体様のご予約などお気軽にご連絡ください。<br>お問い合わせ内容を確認の後、改めてご連絡させて頂きます。（定休日 : 水曜日）<br>お急ぎの場合はお電話にて「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    58. 
                     	
  58.       </div>
    59. 
                    	
  59.  
    60. 
                    	
  60.     </div>
    61. 
                    	
  61.   </section>
    62. 
                    	
  62. </main>
    63. 
                        
  63. <footer>
    64. 
                        
  64.   <div class="inner">
    65. 
                        
  65.     <div class="snsWrap">
    66. 
                        
  66.       <ul>
    67. 
                        
  67.         <li><a href="https://twitter.com/chepirare" target="_blank"><img src="../img/icon_twitter_w.png" alt="Twitter"></a></li>
    68. 
                        
  68.         <li><a href="https://www.facebook.com/Chepirare" target="_blank"><img src="../img/icon_facebook_w.png" alt="Facebook"></a></li>
    69. 
                        
  69.         <li><a href="https://www.instagram.com/chepirare/" target="_blank"><img src="../img/icon_instagram_w.png" alt="Instagram"></a></li>
    70. 
                        
  70.       </ul>
    71. 
                        
  71.     </div>
    72. 
                        
  72.     <div class="copyright">
    73. 
                        
  73.       <small>© 2021 いやしのカレー サンプル.</small>
    74. 
                        
  74.     </div>
    75. 
                        
  75.   </div>
    76. 
                        
  76. </footer>
    77. 
                        
  77. <script type="text/javascript" src="../js/jquery.min.js"></script>
    78. 
                        
  78. <script type="text/javascript" src="../js/main.js"></script>
    79. 
                        
  79. </body>
    80. 
                        
  80. </html>
    81.

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. ～headerデザイン省略～
    3. 
                    	
  3. ～navデザイン省略～
    4. 
                    	
  4. ～スライダーデザイン省略～
    5. 
                    	
  5. ～お知らせデザイン省略～
    6. 
                    	
  6. ～メニューデザイン省略～
    7. 
                    	
  7. ～お店情報デザイン省略～
    8. 
                    	
  8. ～footerデザイン省略～
    9. 
                    	
  9. /* ------ contact ------ */
    10. 
                    	
  10. #contact .imageWrap {
    11. 
                    	
  11.   width: 100%;
    12. 
                    	
  12.   height: 480px;
    13. 
                    	
  13.   background: url("../img/contact_main.jpg") 30% 0 no-repeat;
    14. 
                    	
  14.   background-size: cover
    15. 
                    	
  15. }
    16. 
                    	
  16. #contact .inner {
    17. 
                    	
  17.   width: 900px;
    18. 
                    	
  18.   text-align: center;
    19. 
                    	
  19.   padding: 80px 10px 160px;
    20. 
                    	
  20.   margin: -80px auto 0
    21. 
                    	
  21. }
    22. 
                    	
  22. #contact .title { padding-top: 80px }
    23. 
                    	
  23. #contact .title h2 {
    24. 
                    	
  24.   font-size: 2.4rem;
    25. 
                    	
  25.   letter-spacing: 0.09em
    26. 
                    	
  26. }
    27. 
                    	
  27. #contact .txt { margin-top: 60px }
    28. 
                    	
  28. #contact .txt p {
    29. 
                    	
  29.   font-size: 1.6rem;
    30. 
                    	
  30.   letter-spacing: 0.09em
    31. 
                    	
  31. }
    32. 
                    	
  32. @media screen and (max-width: 768px) {
    33. 
                    	
  33.   #contact .imageWrap {
    34. 
                    	
  34.     height: 280px;
    35. 
                    	
  35.     background: url("../img/contact_main.jpg") 20% 40% no-repeat
    36. 
                    	
  36.   }
    37. 
                    	
  37.   #contact .inner {
    38. 
                    	
  38.     width: 100%;
    39. 
                    	
  39.     padding: 60px 4% 80px;
    40. 
                    	
  40.     margin: -60px auto 0
    41. 
                    	
  41.   }
    42. 
                    	
  42.   #contact .title { padding-top: 60px }
    43. 
                    	
  43.   #contact .title h2 { font-size: 2rem }
    44. 
                    	
  44.   #contact .txt { margin-top: 40px }
    45. 
                    	
  45.   #contact .txt p br { display: none }
    46. 
                    	
  46. }
    47.

HTMLの記述は「input.html」「confirm.html」「finish.html」「error.html」の4ファイルにおこないますのでお忘れないように！

お問い合わせページの画像も前回までに作っていた「img」フォルダに入れておきます。これで今回デモサイトで使用している画像計15枚が入っているはずです。

さぁ、いよいよ次の「フォームの設定と各ファイルの調整」でホームページが完成です。今までの設定でページがちゃんと表示されているかも確認しておいてください。

フォームシステムを導入する フォームの設定と各ファイルの調整

よく読まれている記事

おすすめの記事

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

チェピレア日記