diff --git a/changetest.csv b/changetest.csv
new file mode 100644
index 0000000..33816cb
--- /dev/null
+++ b/changetest.csv
@@ -0,0 +1 @@
+designtype,menu1,menu1-url,menu2,menu2-url,menu3,menu3-url,menu4,menu4-url,top-text,main1-title1,main1-text1,copyright
\ No newline at end of file
diff --git a/js/addcontents.js b/js/addcontents.js
new file mode 100644
index 0000000..bb78479
--- /dev/null
+++ b/js/addcontents.js
@@ -0,0 +1,47 @@
+//CSVファイルを読み込む関数getCSV()の定義
+function addcontents(){
+    var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
+    req.open("get", "changetest.csv", true); // アクセスするファイルを指定
+    req.send(null); // HTTPリクエストの発行
+	
+    // レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ	
+    req.onload = function(){
+	convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ
+    }
+}
+ 
+// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
+function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
+    var result = []; // 最終的な二次元配列を入れるための配列
+    var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
+ 
+    // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
+    result[0] = tmp[0].split(',');//IDやClassの名前を入れる
+    //result[1] = tmp[1].split(',');//実際のコンテンツ内容を入れる
+    console.log("CSV格納");
+
+    putcontent(result);
+}
+ 
+function putcontent(csv_text){
+    var contents = {};
+    console.log("コンテンツ変更を開始");
+    for(var i=0; i<2; ++i){
+
+	for(var i=0; i<csv_text[0].length;++i){
+        let content = document.getElementById(csv_text[0][i]);
+        if(content){
+	        contents[csv_text[0][i]] = content.value;
+        }
+    console.log(contents);
+    }
+    if(true){
+        document.getElementById("main").innerHTML = "<header class=\"site-header\"><div class=\"header-list\"><img src=\"image/view_cloud01_01.png\" alt=\"site-logo\" class=\"header-logo\">" + 
+                "<ul><li class=\"menu\"><a class=\"menu1-url menu1\" href =\"" + contents["menu1-url"] + "\">" + contents["menu1"] + "</a></li><li class=\"menu\"><a class=\"menu2-url menu2\" href =\"" + contents["menu2-url"] + "\">" + contents["menu2"] + "</a></li><li class=\"menu\"><a class=\"menu3-url menu3\" href =\"" + contents["menu3-url"] + "\">" + contents["menu3"] + "</a></li><li class=\"menu\"><a class=\"menu4-url menu4\" href =\"" + contents["menu4-url"] + "\">" + contents["menu4"] + "</a></li></ul>" + 
+                "</div></header><div class=\"main\"><div class=\"top-image\"><img src=\"image/sample3.jpg\" alt=\"top-image\" class=\"top-img\"><h2 class=\"img-text top-image-text\">" + contents["top-text"] + "</h2></div>" + 
+                "<div class=\"about\"><h1 class=\"about-title1\">" + contents["main1-title1"] + "</h1><p class=\"about-text1\">" + contents["main1-text1"] + "</p></div></div>" + 
+                "<footer class=\"footer\"><p>Copyright (C) " + contents["copyright"] + " . All Rights Reserved.</p></footer>";
+    }
+
+    }
+}
\ No newline at end of file
diff --git a/js/change_from_form.js b/js/change_from_form.js
deleted file mode 100644
index b1722ef..0000000
--- a/js/change_from_form.js
+++ /dev/null
@@ -1,51 +0,0 @@
-//CSVファイルを読み込む関数getCSV()の定義
-function changetext(){
-    var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
-    req.open("get", "changetest.csv", true); // アクセスするファイルを指定
-    req.send(null); // HTTPリクエストの発行
-	
-    // レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ	
-    req.onload = function(){
-	convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ
-    }
-}
- 
-// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
-function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
-    var result = []; // 最終的な二次元配列を入れるための配列
-    var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
- 
-    // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
-    result[0] = tmp[0].split(',');//IDやClassの名前を入れる
-    //result[1] = tmp[1].split(',');//実際のコンテンツ内容を入れる
-    console.log("CSV格納");
-
-    putcontent(result);
-}
- 
-function putcontent(csv_text){
-    var contents = {};
-    console.log("コンテンツ変更を開始");
-	for(var i=0; i<csv_text[0].length;++i){
-        let content = document.getElementById(csv_text[0][i]);
-        if(content){
-	        contents[csv_text[0][i]] = content.value;
-        }
-    console.log(contents);
-    }
-    if(true){
-        document.getElementById("a").innerHTML = "<header class=\"site-header\"><div class=\"header-list\"><img src=\"image/view_cloud01_01.png\" alt=\"site-logo\" class=\"header-logo\">" + 
-                "<ul><li class=\"menu\"><a class=\"menu1-url menu1\" href =\"" + contents["menu1-url"] + "\">" + contents["menu1"] + "</a></li><li class=\"menu\"><a class=\"menu2-url menu2\" href =\"" + contents["menu2-url"] + "\">" + contents["menu2"] + "</a></li><li class=\"menu\"><a class=\"menu3-url menu3\" href =\"" + contents["menu3-url"] + "\">" + contents["menu3"] + "</a></li><li class=\"menu\"><a class=\"menu4-url menu4\" href =\"" + contents["menu4-url"] + "\">" + contents["menu4"] + "</a></li></ul>" + 
-                "</div></header><div class=\"main\"><div class=\"top-image\"><img src=\"image/sample3.jpg\" alt=\"top-image\" class=\"top-img\"><h2 class=\"img-text top-image-text\">" + contents["top-text"] + "</h2></div>" + 
-                "<div class=\"about\"><h1 class=\"about-title1\">" + contents["main1-title1"] + "</h1><p class=\"about-text1\">" + contents["main1-text1"] + "</p></div></div>" + 
-                "<footer class=\"footer\"><p>Copyright (C) " + contents["copyright"] + " . All Rights Reserved.</p></footer>";
-    }
-
-    let designSelect = document.getElementById('design');
-    let num = designSelect.selectedIndex;
-    if(designSelect){
-        var css = document.getElementById("stylesheet");
-        css.setAttribute("href", designSelect[num].value + ".css");
-        console.log('選択されているのは ' + designSelect.value + ' です');
-    }
-}
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..32df9e3
--- /dev/null
+++ b/main.css
@@ -0,0 +1,28 @@
+body{
+    margin: 0;
+    padding: 0;
+}
+h1{
+	font-size: x-large;
+}
+h2{
+	font-size:large;
+}
+p{
+	font-size: small;
+}
+
+#main{
+    margin: 0 0 30px 0;
+}
+
+/*フッター*/
+footer{
+	background-color: #313131;
+	margin: 0;
+	padding:8px 10px;
+}
+footer p{
+	text-align: center;
+	color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/main.html b/main.html
index a04c2dc..2c7b366 100644
--- a/main.html
+++ b/main.html
@@ -7,27 +7,19 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>all</title>
 <link rel="stylesheet" href="main.css" type="text/css">
-<link rel="stylesheet" href="C.css" type="text/css" id="stylesheet">
 </head>
 
 <body>
-
-    <label for="design">選択してください</label>
-    <select id="design">
-    <option value="C">C</option>
-    <option value="D">D</option>
-    </select>
     
     <div>
-    <input type="button" value="Check" id="checkButton">
+        <input type="button" value="Check" id="checkButton">
     </div>
-    
 <!-- ヘッダー -->
 <header>
 </header>
 <!-- ヘッダー -->
 
-<div class="main">
+<div id="main">
 
 </div>
 
@@ -55,7 +47,7 @@
 -->
 
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
-<script type="text/javascript" src="js/textchange.js"></script>
+<script type="text/javascript" src="js/addcontents.js"></script>
 </body>
  
 </html>
\ No newline at end of file