diff --git a/css/style.css b/css/style_demo.css
similarity index 100%
rename from css/style.css
rename to css/style_demo.css
diff --git a/css/style_form.css b/css/style_form.css
new file mode 100644
index 0000000..0fb7234
--- /dev/null
+++ b/css/style_form.css
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+
+/***  ページ全体  ***/
+body {
+    background-color: #F6FCFF;  /* 背景の色 */
+    text-align: center;  /* 文章センターそろえ */
+}
+
+/*** スマホ画面 ***/
+
+@media screen and (min-width: 450px) {  /* 画面の横幅が450以上の場合 */
+
+    /*  header  */
+    div.sample {
+        width:100%;
+        height:100px;
+        margin:0px 0px 80px 0px;
+        padding:6px;
+        background-color: #6DD2FF;
+    }
+    .header_logo {
+        height: 100px;
+    }
+
+    /* ログインタイトル */
+    .sub_title{
+        font-size: 53px;
+    }
+    .under_bar {
+        background: linear-gradient(transparent 60%, #ffc400 60%);  /* 蛍光ペン風の線を引く */
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 70px 0px;
+      font-size: 48px;
+    }
+
+     /* 送信ボタン */
+    .push_button {
+        font-size: 50px;
+        width: 400px;
+        padding: 20px;
+        border: 5px solid #6E6E6E;
+        border-radius: 10px;
+    }
+
+    /* 送信ボタン */
+    .push_bottom {
+        font-size: 24px;
+        width: 180px;
+        padding: 8px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
+
+
+/*** PC画面 ***/
+@media screen and (max-height: 650px) {  /* 画面の縦サイズが650px以内の場合 */
+
+    /*  header(ヘッダー)  */
+    div.sample {
+        height:60px;
+        margin:0px 0px 50px 0px;
+    }
+    .header_logo {
+        height: 60px;
+    }
+
+    /* ログインタイトル */
+    .sub_title {
+        font-size: 24px;
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 40px 0px;
+      font-size: 22px;
+    }
+
+    /* 送信ボタン */
+    .push_button {
+        font-size: 24px;
+        width: 180px;
+        padding: 10px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
\ No newline at end of file
diff --git a/css/style_login.css b/css/style_login.css
new file mode 100644
index 0000000..7ee8aac
--- /dev/null
+++ b/css/style_login.css
@@ -0,0 +1,103 @@
+@charset "UTF-8";
+
+/***  ページ全体  ***/
+body {
+    background-color: #F6FCFF;  /* 背景の色 */
+    text-align: center;  /* 文章センターそろえ */
+}
+
+/*** スマホ画面 ***/
+
+@media screen and (min-width: 450px) {  /* 画面の横幅が450以上の場合 */
+
+    /*  header  */
+    div.sample {
+        width:100%;
+        height:100px;
+        margin:0px 0px 80px 0px;
+        padding:6px;
+        background-color: #6DD2FF;
+    }
+    .header_logo {
+        height: 100px;
+    }
+
+    /* ログインタイトル */
+    .sub_title{
+        font-size: 53px;
+    }
+    .under_bar {
+        background: linear-gradient(transparent 60%, #ffc400 60%);  /* 蛍光ペン風の線を引く */
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 70px 0px;
+      font-size: 48px;
+    }
+
+    .member_list {
+     font-size: 24px;
+    }
+
+     /* 送信ボタン */
+    .push_button {
+        font-size: 50px;
+        width: 400px;
+        padding: 20px;
+        border: 5px solid #6E6E6E;
+        border-radius: 10px;
+    }
+
+    /* 送信ボタン */
+    .push_bottom {
+        font-size: 24px;
+        width: 180px;
+        padding: 8px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
+
+
+/*** PC画面 ***/
+@media screen and (max-height: 650px) {  /* 画面の縦サイズが650px以内の場合 */
+
+    /*  header(ヘッダー)  */
+    div.sample {
+        height:60px;
+        margin:0px 0px 50px 0px;
+    }
+    .header_logo {
+        height: 60px;
+    }
+
+    /* ログインタイトル */
+    .sub_title {
+        font-size: 24px;
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 40px 0px;
+      font-size: 18px;
+    }
+
+    .sub_title .attention {
+      font-size: 18px;
+    }
+    li {
+     font-size: 24px;
+    }
+
+    /* 送信ボタン */
+    .push_button {
+        font-size: 24px;
+        width: 180px;
+        padding: 10px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
\ No newline at end of file
diff --git a/css/style_member.css b/css/style_member.css
new file mode 100644
index 0000000..de8be43
--- /dev/null
+++ b/css/style_member.css
@@ -0,0 +1,183 @@
+@charset "UTF-8";
+
+/***  ページ全体  ***/
+body {
+    background-color: #F6FCFF;  /* 背景の色 */
+    text-align: cen@charset "UTF-8";
+
+/***  ページ全体  ***/
+body {
+    background-color: #F6FCFF;  /* 背景の色 */
+    text-align: center;  /* 文章センターそろえ */
+}
+
+/*** スマホ画面 ***/
+
+@media screen and (min-width: 450px) {  /* 画面の横幅が450以上の場合 */
+
+    /*  header  */
+    div.sample {
+        width:100%;
+        height:100px;
+        margin:0px 0px 80px 0px;
+        padding:6px;
+        background-color: #6DD2FF;
+    }
+    .header_logo {
+        height: 100px;
+    }
+
+    /* ログインタイトル */
+    .sub_title{
+        font-size: 53px;
+    }
+    .under_bar {
+        background: linear-gradient(transparent 60%, #ffc400 60%);  /* 蛍光ペン風の線を引く */
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 70px 0px;
+      font-size: 48px;
+    }
+
+     /* 送信ボタン */
+    .push_button {
+        font-size: 50px;
+        width: 400px;
+        padding: 20px;
+        border: 5px solid #6E6E6E;
+        border-radius: 10px;
+    }
+
+    /* 送信ボタン */
+    .push_bottom {
+        font-size: 24px;
+        width: 180px;
+        padding: 8px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
+
+
+/*** PC画面 ***/
+@media screen and (max-height: 650px) {  /* 画面の縦サイズが650px以内の場合 */
+
+    /*  header(ヘッダー)  */
+    div.sample {
+        height:60px;
+        margin:0px 0px 50px 0px;
+    }
+    .header_logo {
+        height: 60px;
+    }
+
+    /* ログインタイトル */
+    .sub_title {
+        font-size: 24px;
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 40px 0px;
+      font-size: 22px;
+    }
+
+    /* 送信ボタン */
+    .push_button {
+        font-size: 24px;
+        width: 180px;
+        padding: 10px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}ter;  /* 文章センターそろえ */
+}
+
+/*** スマホ画面 ***/
+
+@media screen and (min-width: 450px) {  /* 画面の横幅が450以上の場合 */
+
+    /*  header  */
+    div.sample {
+        width:100%;
+        height:100px;
+        margin:0px 0px 80px 0px;
+        padding:6px;
+        background-color: #6DD2FF;
+    }
+    .header_logo {
+        height: 100px;
+    }
+
+    /* ログインタイトル */
+    .sub_title{
+        font-size: 53px;
+    }
+    .under_bar {
+        background: linear-gradient(transparent 60%, #ffc400 60%);  /* 蛍光ペン風の線を引く */
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 70px 0px;
+      font-size: 48px;
+    }
+
+     /* 送信ボタン */
+    .push_button {
+        font-size: 50px;
+        width: 400px;
+        padding: 20px;
+        border: 5px solid #6E6E6E;
+        border-radius: 10px;
+    }
+
+    /* 送信ボタン */
+    .push_bottom {
+        font-size: 24px;
+        width: 180px;
+        padding: 8px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
+
+
+/*** PC画面 ***/
+@media screen and (max-height: 650px) {  /* 画面の縦サイズが650px以内の場合 */
+
+    /*  header(ヘッダー)  */
+    div.sample {
+        height:60px;
+        margin:0px 0px 50px 0px;
+    }
+    .header_logo {
+        height: 60px;
+    }
+
+    /* ログインタイトル */
+    .sub_title {
+        font-size: 24px;
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 40px 0px;
+      font-size: 22px;
+    }
+
+    /* 送信ボタン */
+    .push_button {
+        font-size: 24px;
+        width: 180px;
+        padding: 10px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
\ No newline at end of file
diff --git a/css/style_signup.css b/css/style_signup.css
new file mode 100644
index 0000000..7ee8aac
--- /dev/null
+++ b/css/style_signup.css
@@ -0,0 +1,103 @@
+@charset "UTF-8";
+
+/***  ページ全体  ***/
+body {
+    background-color: #F6FCFF;  /* 背景の色 */
+    text-align: center;  /* 文章センターそろえ */
+}
+
+/*** スマホ画面 ***/
+
+@media screen and (min-width: 450px) {  /* 画面の横幅が450以上の場合 */
+
+    /*  header  */
+    div.sample {
+        width:100%;
+        height:100px;
+        margin:0px 0px 80px 0px;
+        padding:6px;
+        background-color: #6DD2FF;
+    }
+    .header_logo {
+        height: 100px;
+    }
+
+    /* ログインタイトル */
+    .sub_title{
+        font-size: 53px;
+    }
+    .under_bar {
+        background: linear-gradient(transparent 60%, #ffc400 60%);  /* 蛍光ペン風の線を引く */
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 70px 0px;
+      font-size: 48px;
+    }
+
+    .member_list {
+     font-size: 24px;
+    }
+
+     /* 送信ボタン */
+    .push_button {
+        font-size: 50px;
+        width: 400px;
+        padding: 20px;
+        border: 5px solid #6E6E6E;
+        border-radius: 10px;
+    }
+
+    /* 送信ボタン */
+    .push_bottom {
+        font-size: 24px;
+        width: 180px;
+        padding: 8px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
+
+
+/*** PC画面 ***/
+@media screen and (max-height: 650px) {  /* 画面の縦サイズが650px以内の場合 */
+
+    /*  header(ヘッダー)  */
+    div.sample {
+        height:60px;
+        margin:0px 0px 50px 0px;
+    }
+    .header_logo {
+        height: 60px;
+    }
+
+    /* ログインタイトル */
+    .sub_title {
+        font-size: 24px;
+    }
+
+    /* メールアドレス、パスワード */
+    p {
+      margin: 40px 0px;
+      font-size: 18px;
+    }
+
+    .sub_title .attention {
+      font-size: 18px;
+    }
+    li {
+     font-size: 24px;
+    }
+
+    /* 送信ボタン */
+    .push_button {
+        font-size: 24px;
+        width: 180px;
+        padding: 10px;
+        margin-bottom: 2%;
+        border: 2px solid #6E6E6E;
+        margin-bottom: 3%;
+    }
+}
\ No newline at end of file
diff --git a/form.php b/form.php
index c13c1d2..7bfee2c 100644
--- a/form.php
+++ b/form.php
@@ -3,11 +3,22 @@
 
 <head>
     <meta charset="UTF-8">
+    <link rel=" stylesheet" href="./css/style_form.css">
+    <link rel=" stylesheet" href="./css/reset.css">
     <title>入力フォーム</title>
 </head>
 
 <body>
-    <h1>入力フォーム</h1>
+    <!-- ヘッダー-->
+    <div class="sample">
+        <img class="header_logo" src="logo.png" style="float: left;">
+    </div>
+
+    <!-- 入力フォーム -->
+    <div class="sub_title">
+        <span class="under_bar">入力フォーム</span>
+    </div>
+
     <form action="./dataRegist.php" method="POST">
         <p>お店の名前：<input type="text" name="Restaurant_name">
             <?php if (isset($errs['Restaurant_name'])) {
@@ -22,16 +33,16 @@
             <?php if (isset($errs['Restaurant_genre'])) {
                 echo $errs['Restaurant_genre'];
             }
-        
+
             ?></p>
         <p>一言メッセージ：<input type="text" name="Restaurant_message">
             <?php if (isset($errs['Restaurant_message'])) {
                 echo $errs['Restaurant_message'];
             }
-        
+
             ?></p>
         </table>
-        <p><input type="submit" value="登録する"></p>
+        <p><input class="push_button" type="submit" value="登録する"></p>
     </form>
 </body>
 
diff --git a/index.php b/index.php
index 4359509..5f01baa 100644
--- a/index.php
+++ b/index.php
@@ -13,9 +13,10 @@
     <div class="sample">
         <img class="header_logo" src="logo.png" style="float: left;">
     </div>
-
     <!-- ガチャを作るボタン-->
     <button class="make_button" onclick="location.href='./login.php'">
         <span class="button_text">ガチャを作る！</span>
     </button>
-</body>
\ No newline at end of file
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/login_view.php b/views/login_view.php
index e788f05..5f3ddf4 100644
--- a/views/login_view.php
+++ b/views/login_view.php
@@ -3,11 +3,23 @@
 
 <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="./css/style_login.css">
+    <link rel="stylesheet" href="./css/reset.css">
     <title>ログイン画面</title>
 </head>
 
 <body>
-    <h1>ログイン</h1>
+
+    <!-- ヘッダー-->
+    <div class="sample">
+        <img class="header_logo" src="logo.png" style="float: left;">
+    </div>
+
+    <!-- ログイン -->
+    <div class="sub_title">
+        <span class="under_bar">ログイン</span>
+    </div>
+
     <form action="./login.php" method="POST">
         <p>メールアドレス：<input type="text" name="email">
             <?php if (isset($errs['email'])) {
@@ -19,7 +31,7 @@
                 echo html_escape($errs['password']);
             }
             ?></p>
-        <p><input type="submit" value="ログイン"></p>
+        <p><input class="push_button" type="submit" value="ログイン"></p>
         <p><a href="./views/signup_view.php">新規登録</a></p>
     </form>
 </body>
diff --git a/views/member_view.php b/views/member_view.php
index 0040d74..b43acd3 100644
--- a/views/member_view.php
+++ b/views/member_view.php
@@ -3,19 +3,35 @@
 
 <head>
     <meta charset="UTF-8">
+    <link rel=" stylesheet" href="./css/style_member.css">
+    <link rel=" stylesheet" href="./css/reset.css">
     <title>会員専用ページ</title>
 </head>
 
 <body>
+    <!-- ヘッダー-->
+    <div class="sample">
+        <img class="header_logo" src="logo.png" style="float: left;">
+    </div>
+
+
     <p>こんにちは<?php echo html_escape($member['name']); ?>さん。
         Email:<?php echo html_escape($member['email']); ?>) <a href="logout.php">ログアウト</a></p>
-    <h1>会員専用ページ</h1>
-    <hr width="300px" align="left">
-    <p style="font-size:small">こちらはログイン後の画面です</p>
-    <h2>会員一覧</h2>
+
+    <!-- 会員専用ページ -->
+    <div class="sub_title">
+        <span class="under_bar">会員専用ページ</span>
+    </div>
+
+    <!-- 会員一覧 -->
+    <div class="sub_title">
+        <p class="attention">こちらはログイン後の画面です</p>
+        <p class="member_page">会員一覧</p>
+    </div>
+
     <ul>
-        <?php foreach($members as $member): ?>
-        <li><?php echo html_escape($member['name']); ?></li>
+        <?php foreach ($members as $member) : ?>
+            <li><?php echo html_escape($member['name']); ?></li>
         <?php endforeach; ?>
         <p><a href="./index.php">ホームに戻る</a></p>
 </body>
diff --git a/views/signup_view.php b/views/signup_view.php
index 062ced9..047c432 100644
--- a/views/signup_view.php
+++ b/views/signup_view.php
@@ -3,11 +3,23 @@
 
 <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="./css/style_signup.css">
+    <link rel="stylesheet" href="./css/reset.css">
     <title>新規ユーザー登録</title>
 </head>
 
 <body>
-    <h1>新規ユーザー登録</h1>
+
+    <!-- ヘッダー-->
+    <div class="sample">
+        <img class="header_logo" src="logo.png" style="float: left;">
+    </div>
+
+    <!-- 新規ユーザ―登録 -->
+    <div class="sub_title">
+        <span class="under_bar">新規ユーザー登録</span>
+    </div>
+
     <form action="../signup.php" method="POST">
         <p>お名前：<input type="text" name="name">
             <?php if (isset($errs['name'])) {
@@ -24,7 +36,9 @@
             }
             ?></p>
         </table>
-        <p><input type="submit" value="登録する"></p>
+        <p>
+            <input class="push_button" type="submit" value="登録する">
+        </p>
     </form>
 </body>