diff --git a/public/editor.js b/public/editor.js
index 3e25366..edbd975 100644
--- a/public/editor.js
+++ b/public/editor.js
@@ -1,23 +1,52 @@
-//ページ読込完了後にボタンにclickイベントを登録する
-window.addEventListener("load", function(){
-	document.getElementById("send_userinfo").addEventListener("click", function(){
-		// FoemDataオブジェクトを実体化する際にHTMLフォームのセレクタを渡せば
-		// データのキーと値をセットで準備することができます
-		var formDatas = document.getElementById("userinfo");
-		var postDatas = new FormData(formDatas);
-		// XHRの宣言
-		var XHR = new XMLHttpRequest();
-		// openメソッドにPOSTを指定して送信先のURLを指定します
-		XHR.open("POST", "/editor", true);
-		// sendメソッドにデータを渡して送信を実行する
-		XHR.send(postDatas);
-		// サーバの応答をonreadystatechangeイベントで検出して正常終了したらデータを取得する
-		XHR.onreadystatechange = function(){
-			if(XHR.readyState == 4 && XHR.status == 200){
-				// POST送信した結果を表示する
-                document.getElementById("userinfo_response").innerHTML = XHR.responseText;
-                console.log(XHR.responseText);
-			}
-		};
-	} ,false);
-}, false);
+window.onload = function(){
+
+function coloeSet(argObj){
+	// ==============================================
+	//	入力済み時の背景色設定
+	// ==============================================
+	   if(argObj.value==""){
+		   argObj.style.backgroundColor = "";
+	   }else{
+		   argObj.style.backgroundColor = "rgba(30, 107, 185, 0.20)";
+	   }
+   }
+   
+function colorReset(argObj){
+	// ==============================================
+	//	フォーカス時の背景色リセット
+	// ==============================================
+	   argObj.style.backgroundColor = "";
+}
+   
+function textAreaHeightSet(argObj){
+	// ==============================================
+	//	フォーカス時の背景色リセット
+	// ==============================================
+	 // 一旦テキストエリアを小さくしてスクロールバー（縦の長さを取得）
+	 argObj.style.height = "10px";
+	 var wSclollHeight = parseInt(argObj.scrollHeight);
+	 // 1行の長さを取得する
+	 var wLineH = parseInt(argObj.style.lineHeight.replace(/px/, ''));
+	 // 最低2行の表示エリアにする
+	 if(wSclollHeight < (wLineH * 2)){wSclollHeight=(wLineH * 2);}
+	 // テキストエリアの高さを設定する
+	 argObj.style.height = wSclollHeight + "px";
+}
+
+
+document.getElementById('tab').addEventListener('keydown', function (e) {
+	var elem, end, start, value;
+	if (e.keyCode === 9) {
+	  if (e.preventDefault) {
+		e.preventDefault();
+	  }
+	  elem = e.target;
+	  start = elem.selectionStart;
+	  end = elem.selectionEnd;
+	  value = elem.value;
+	  elem.value = "" + (value.substring(0, start)) + "\t" + (value.substring(end));
+	  elem.selectionStart = elem.selectionEnd = start + 1;
+	  return false;
+	}
+  });
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 4c1f2b6..0b623fa 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,122 +1,251 @@
 body{
     height: 100%;
-    background-color: #ffe4e4;
+    background-color: #CCFFFF;
     }
+ 
+/*teacherページ*/
 
-div.gakuseki{
-    /* background-color: ; */
+div.teacher_main{
+    overflow: hidden;
 }
 
-.sen1{
-    border-top: solid 3px #364e96;/*上線*/
-    border-bottom: solid 3px #364e96;/*下線*/
-}
-
-div.mondai{
-    /* background-color: green; */
-}
-
-div.editor{
-    /* background-color: blue; */
-    margin-right: 3%;
-    margin-bottom: 3%;
-    float:left;
-}
-div.ex{
-    /* background-color: yellow; */
-    float:left;
-}
-
-span.waku1{
-    border: solid 3px #364e96;/*線色*/
-    padding: 0.2em;/*文字周りの余白*/
-    border-radius: 0.5em;/*角丸*/
-}
-
-div.read{
-    /* background-color: white; */
-    clear:both;
-}
-
-div.read p{
-    padding: 0.5em 1em;
-    margin: 2em 0;
-    border: double 5px #4ec4d3;
-}
-
-
-div.send{
-    /* background-color: black; */
-    clear:both;
-}
-
-div.kekka{
-    clear:both;
-}
-
-.sucsess{
-    padding-left: 20px;
-    padding-right: 20px;
-    font-size: 50px;
-    background: linear-gradient(-135deg, #05FBFF, #e7fffc);
-    border: double 2px white;
-    border-radius: 0.5em;/*角丸*/
-}
-
-span.no{
-    background-color: black;
-    color: yellow;
-    border: double 2px red;
-}
-
-div.kekka p{
-    border-bottom: solid 1px black;
-}
-
-textarea {height:300px; width:500px; margin-bottom: 20px;}
-
-pre{
-    background-color: black;
-    color: white;
-    height: 300px;
-    width: 500px;
-    white-space: pre-wrap;
-    overflow: auto;
-}
-
-#kome{
-    color: #423b3b;
-}
-
-a {
-    background-color: pink;
-    color: black;}
-
-#black{background-color: black;
-    color: white;
-    height: 300px;
-    width: 500px;
-    overflow: scroll;
-      }
-
-table {
-      border-collapse: collapse;
-}
-
-/* 以下評価結果のcss */
-.ran {
-    /* background-color: green; */
-    width: 50%;
-    margin-right: 20px;
+div.question{
+    width: 45%;
     float: left;
+    margin: 10px;
 }
 
-.name {
-    background-color: yellow;
-    width: 100px;
+div.comment_teacher{
+    width: 45%;
+    float: left;
+    margin: 10px;
 }
 
-.pro {
-    background-color: white;
-    width: 200px;
+div.example{
+    width: 40%;
+    height: 40%;  
+    margin: 10px;
+    clear: both;
+}
+
+ /* --- INPUT=TEXTの標準デザイン設定 ---------------------*/
+ .textArea {
+    width         : 70%;               /* 入力域の最大幅 */
+    height: 200%;
+    background    : #ffffff;             /* 入力域の背景色 */
+    border        : 2px solid #1e6bb9;   /* 入力域の枠線   */
+    border-radius : 4px;                 /* 入力域の角丸   */
+    padding       : 8px;                /* 入力文字の余白 */
+    font-size     : 17px;                /* 入力文字サイズ */
+    color         : #333333;             /* 入力文字の色   */
+    letter-spacing: .1em;                /* 入力文字の間隔 */
+    line-height   : 20px;                /* 入力文字の間隔 */
+  }
+   /* --- 入力フィールドにフォーカスか来たら ----------------*/
+  .textArea:focus {
+    border-color  : #59b300;                 /* 枠線色     */
+    background    : rgba(89, 179, 0, 0.20);  /* 背景色     */
+    outline       : 0;
+  }
+   /* --- 入力説明の文字(標準) -----------------------------*/
+  .textArea:placeholder-shown {
+    color         : #808080;                 /* 文字色     */
+  }
+   /* --- 入力説明の文字(Chrome,Safari,Android,iOS等) ---- -*/
+  .textArea::-webkit-input-placeholder {
+    color         : #808080;                 /* 文字色     */
+  }
+   /* --- 入力説明の文字(IE用) -----------------------------*/
+  .textArea:-ms-input-placeholder {
+    color         : #808080;                 /* 文字色     */
+  }
+
+ .editor{
+    position:relative;
+    margin-left: 0px;
+    padding:30px 20px 5px 45px;
+    border:none;
+    background:#2F3437;
+    color: white;
+ }
+
+ div.datebase{
+    width: 45%;
+    margin: 10px; 
+ }
+
+  /*ボタンの設定*/
+.button {
+    display       : inline-block;
+    border-radius : 5%;          /* 角丸       */
+    font-size     : 24pt;        /* 文字サイズ */
+    text-align    : center;      /* 文字位置   */
+    cursor        : pointer;     /* カーソル   */
+    padding       : 20px 33px;   /* 余白       */
+    background    : #ff7f00;     /* 背景色     */
+    color         : #ffffff;     /* 文字色     */
+    line-height   : 1em;         /* 1行の高さ  */
+    opacity       : 0.9;         /* 透明度     */
+    transition    : .3s;         /* なめらか変化 */
+    box-shadow    : 5px 5px 4px #666666;  /* 影の設定 */
+  }
+  .button:hover {
+    box-shadow    : none;        /* カーソル時の影消去 */
+    opacity       : 1;           /* カーソル時透明度 */
+  }
+
+
+
+  /*editorページ*/
+
+  div.gakuseki{
+  }
+
+ .que{
+border-bottom: double 5px  #0000ff;
+background-color: #ffffff;
+ }
+
+  /*プログラム入力画面*/
+  .edit{
+    margin-top: 30px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    float: left;
+  }
+
+  /*学籍番号*/
+  .inputArea {
+    width         : 20%;               /* 入力域の最大幅 */
+    height: 200%;
+    background    : #ffffff;             /* 入力域の背景色 */
+    border        : 2px solid #1e6bb9;   /* 入力域の枠線   */
+    border-radius : 4px;                 /* 入力域の角丸   */
+    padding       : 8px;                /* 入力文字の余白 */
+    font-size     : 17px;                /* 入力文字サイズ */
+    color         : #333333;             /* 入力文字の色   */
+    letter-spacing: .1em;                /* 入力文字の間隔 */
+    line-height   : 20px;                /* 入力文字の間隔 */
+  }
+   /* --- 入力フィールドにフォーカスか来たら ----------------*/
+  .inputArea:focus {
+    border-color  : #59b300;                 /* 枠線色     */
+    background    : rgba(89, 179, 0, 0.20);  /* 背景色     */
+    outline       : 0;
+  }
+   /* --- 入力説明の文字(標準) -----------------------------*/
+  .inputArea:placeholder-shown {
+    color         : #808080;                 /* 文字色     */
+  }
+   /* --- 入力説明の文字(Chrome,Safari,Android,iOS等) ---- -*/
+  .inputArea::-webkit-input-placeholder {
+    color         : #808080;                 /* 文字色     */
+  }
+   /* --- 入力説明の文字(IE用) -----------------------------*/
+  .inputArea:-ms-input-placeholder {
+    color         : #808080;                 /* 文字色     */
+  }
+
+
+/*タブで切り替える出力と出力例 */
+  .tab-wrap {
+    width: 50%;
+    margin-bottom: 10px;
+    float: left;
+    display: flex;
+    flex-wrap: wrap;
+}
+.tab-label {
+    color: White;
+    background: LightGray;
+    margin-right: 5px;
+    padding: 3px 12px;
+    order: -1;
+}
+.tab-content {
+    width: 100%;
+    display: none;
+}
+/* アクティブなタブ */
+.tab-switch:checked+.tab-label {
+    background: DeepSkyBlue;
+}
+.tab-switch:checked+.tab-label+.tab-content {
+     display: block;
+}
+/* ラジオボタン非表示 */
+.tab-switch {
+    display: none;
+}
+
+.read{
+  
+  clear: both;
+}
+
+.method{
+ border: double 3px yellow;
+background-color: #ffffff;
+}
+
+
+/*エラー文出すところ*/
+#sidebarMenu {
+    height: 100%;
+    position: fixed;
+    right: 0;
+    width: 600px;
+    height: 600px;
+    margin-top: 30px;
+    transform: translateX(610px);
+    transition: transform 250ms ease-in-out;
+    background-color: #fff9f7;
+    border: solid 2px #2F3437;
+  }
+.sidebarMenuInner{
+    margin:0;
+    padding:0;
+    border-top: 1px solid rgba(255, 255, 255, 0.10);
+}
+
+input[type="checkbox"]:checked ~ #sidebarMenu {
+    transform: translateX(0);
+}
+
+input[type=checkbox] {
+    transition: all 0.3s;
+    box-sizing: border-box;
+    display: none;
+}
+.sidebarIconToggle {
+    transition: all 0.3s;
+    box-sizing: border-box;
+    cursor: pointer;
+    position: absolute;
+    z-index: 99;
+    height: 100%;
+    width: 100%;
+    top: 22px;
+    right: 50px;
+    height: 22px;
+    width: 22px;
+}
+
+/*エラーアイコン*/
+.btn-gradient-3d-orange {
+  display: inline-block;
+  padding: 0.5em 1em;
+  text-decoration: none;
+  border-radius: 4px;
+  color: #ffffff;
+  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
+  border-bottom: solid 3px #c58668;
+}
+
+.btn-gradient-3d-orange:active {
+  -webkit-transform: translateY(4px);
+  transform: translateY(4px);
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
+  border-bottom: none;
 }