新規登録画面、ログイン画面UI

code4tottori · Mar 5, 2016 · 7be5f0e · 7be5f0e
1 parent bbe9429
commit 7be5f0e
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 5 deletions.
diff --git a/src/sass/main.scss b/src/sass/main.scss
@@ -3,26 +3,83 @@ html, body {
   padding: 0;
 }
 
-header {
+header,footer {
   background: #f5a623;
 }
+ footer {
+   width: 100%;
+   height: 200px;
+   text-align: center;
+   margin-top: 100px;
+ }
 .title {
   display: inline;
 }
+
 .title-img {
   width: 200px;
   padding-left: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
 }
+
 .title-menu {
   float: right;
 }
+
 ul, li, a {
-  display: inline;
   color: #fff;
+  display: inline;
   font-weight: bold;
   list-style: none;
   text-decoration: none;
   padding: 10px;
 }
+
+.page-title {
+  color: #4a4a4a;
+  font-size: 20px;
+  margin-left: 50px;
+}
+
+.form-box {
+  border: 3px solid #f5a623;
+  border-radius: 10px;
+  margin-left: 50px;
+  margin-right: 50px;
+  text-align: center;
+}
+
+.form-contents {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.form-text {
+  color: #4a4a4a;
+  display: inline;
+  margin-right: 20px;
+}
+
+.form-textarea {
+  width: 180px;
+  height: 20px;
+  border: #f5a623 solid 2px;
+  border-radius: 5px;
+  font-size: 15px;
+}
+
+.submit-button {
+  width: 40%;
+  height: 40px;
+  font-size: 18px;
+  color: #f5a623;
+  border: solid #f5a623 2px;
+  background: #fff;
+  margin-bottom: 50px;
+  &:hover {
+    background-color: #f5a623;
+    color: #fff;
+    cursor: pointer;
+  }
+}
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -8,7 +8,7 @@ const Header = React.createClass({
 		return (
 			<header>
 				<div className="title">
-					<img src="images/title.png" className="title-img" />
+					<Link to="/"><img src="images/title.png" className="title-img" /></Link>
 				</div>
 					<ul className="title-menu">
 						<li><Link to="sign_up">新規登録</Link></li>
@@ -19,12 +19,25 @@ const Header = React.createClass({
 	}
 });
 
+const Footer = React.createClass({
+	render() {
+		return (
+			<footer>
+				<div>
+					footer
+				</div>
+			</footer>
+		);
+	}
+});
+
 const App = React.createClass({
 	render() {
 		return (
 			<section>
 				<Header />
 				{this.props.children}
+				<Footer />
 			</section>
     );
 	}
@@ -33,13 +46,53 @@ const App = React.createClass({
 const Login = React.createClass({
 	render() {
 		return (
-			<div>Login</div>
+			<section>
+				<form action="" method="post">
+					<h1 className="page-title">ログイン</h1>
+					<div className="form-box">
+						<div className="form-contents">
+							<p className="form-text">ユーザー名</p>
+							<input type="text" className="form-textarea" required />
+						</div>
+						<div className="form-contents">
+							<p className="form-text">パスワード</p>
+							<input type="password" className="form-textarea" required />
+						</div>
+						<input type="submit" value="ログイン" className="submit-button"></input>
+					</div>
+				</form>
+			</section>
 		);
 	}
 });
 const Signup = React.createClass({
 	render() {
-		return <h3>About</h3>;
+		return (
+			<section>
+				<form action="" method="post">
+					<h1 className="page-title">新規登録</h1>
+					<div className="form-box">
+						<div className="form-contents">
+							<p className="form-text">Email</p>
+							<input type="text" className="form-textarea" required />
+						</div>
+						<div className="form-contents">
+							<p className="form-text">ユーザー名</p>
+							<input type="text" className="form-textarea" required />
+						</div>
+						<div className="form-contents">
+							<p className="form-text">パスワード</p>
+							<input type="password" className="form-textarea" required />
+						</div>
+						<div className="form-contents">
+							<p className="form-text">パスワード(確認)</p>
+							<input type="password" className="form-textarea" required />
+						</div>
+						<input type="submit" value="ログイン" className="submit-button"></input>
+					</div>
+				</form>
+			</section>
+		);
 	}
 });