ソフトウェアエンジニアの技術ブログ

ログイン画面をスタイリング

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="asset/css/style.css">
    <script src=""></script>
  </head>
  <body>
  	<h1>ZEUS</h1>
    <div id="content">
  	<p>ログイン画面</p>
  	<form action="" method="post" id="form">
      <table>
        <tr>
          <th><label for="login">ログインID</label></th>
          <td><input type="text" name="login" size="40" placeholder="ログインIDを入力してください"><br>※半角英数字で入力してください</td>
        </tr>
        <tr>
          <th><label for="password">パスワード</label></th>
          <td><input type="text" name="password" size="40" placeholder="パスワードを入力してください"></td>
        </tr>
      </table>
  	<p class="sm">ログインID・パスワードをお忘れの方は<a href="">こちら</a><br>
  	   アカウントをお持ちでない方は<a href="">こちら</a></p><br>
       <div class="button_wrapper">
         <button type="submit" value="送信" id="square_btn">ログイン</button>
       </div>
    </form>
    </div>
  	<footer>
  		hpscript
  	</footer>
  </body>
</html>

body {
	margin:0px;
	#content{
		margin-right: 50px;
		margin-left: 50px;
		.sm{
			font-size: 11px;
		}
	}	
}
h1 {
	text-align: center;
}
p {
	font-size: 0.975px;
}
#form {
	font-size: 0.875px;
	table {
		
	}
	tr {

		height: 80px;
	}
	th {
	border: solid 1px #ccc;
		width:200px;
		text-align: left;
		background-color:#f5f5f5;
		padding: 5px 
	}
	td {
	border: solid 1px #ccc;
		width: 800px;
		padding-left: 10px;
	}
}
.button_wrapper{
	text-align:center;
}
input[type="text"]{
	border: 0;
	padding: 10px;
	font-size: 1.3em;
	color: #aaa;
	border: solid 1px #ccc;
	margin: 0 0 20px;
	width: 700px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	broder-radius: 3px;
}
#square_btn{
	position: relative;
	text-align: center;
	display: inline-block;
	padding: 0.55em 0.7em;
	text-decoration: none;
	color: #fff;
	background: #483d8b;
	border: solid 1px #483d8b;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
} 
footer {
	position: fixed;
	bottom:0px;
	width: 100%;
	height: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #483d8b;
	text-align: center;
	color: #fff;
}

なんだこの雑魚みたいなど素人クオリティーは。。。
すげー自信なくすわ。。ちくしょめえええええええええええええ

とりあえず、ログイン後ページを作るか。。ああ、なんか憂鬱だ。

footerを最下部に表示する

footer {
	position: fixed;
	bottom:0px;
	width: 100%;
	height: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #483d8b;
	text-align: center;
	color: #fff;
}

なるほど、position:fixed; とwidth:100%, height: npx;ね

loginページを作っていこう

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="asset/css/style.css">
    <script src=""></script>
  </head>
  <body>
  	<h1>ZEUS</h1>
    <div id="content">
  	<p>ログイン画面</p>
  	<form action="" method="post">
      <p>ログインID:<input type="text" name="login" size="40"></p>
      <p>パスワード:<input type="text" name="password" size="40"></p>
    </form>
  	<p>ログインID・パスワードをお忘れの方は<a href="">こちら</a><br>
  	   アカウントをお持ちでない方は<a href="">こちら</a></p>
    </div>
  	<footer>
  		hpscript
  	</footer>
  </body>
</html>

body {
	margin:0px;
	#content{
		margin-right: 50px;
		margin-left: 50px;
	}	
}
h1 {
	text-align: center;
}
footer {
	padding-top:5px;
	padding-bottom:5px;
	background: #483d8b;
	text-align: center;
	color: #fff;
}

なんじゃこりゃ、すげー時間かかるやんけ。日頃全くコーディングしていないのがばれる。

gulpで Use of const in strict mode.

node.jsのバージョンが低いのが原因
node.js 10.7.0を使って、gulpをもう一度実行します。

[vagrant@localhost front]$ node -v
v0.10.48
[vagrant@localhost front]$ nvm use 10.7.0
-bash: nvm: コマンドが見つかりません
[vagrant@localhost front]$ source ~/.nvm/nvm.sh
[vagrant@localhost front]$ nvm ls
-> v10.7.0
system
default -> 10.7.0 (-> v10.7.0)
node -> stable (-> v10.7.0) (default)
stable -> 10.7 (-> v10.7.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/carbon (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.14.3 (-> N/A)
lts/carbon -> v8.11.3 (-> N/A)
[vagrant@localhost front]$ nvm use 10.7.0
Now using node v10.7.0 (npm v6.1.0)
[vagrant@localhost front]$ node -v
v10.7.0
[vagrant@localhost front]$ gulp
[21:12:57] Using gulpfile ~/local/front/gulpfile.js
[21:12:57] Starting ‘html’…
[21:12:57] Finished ‘html’ after 14 ms
[21:12:57] Starting ‘img’…
[21:12:57] Finished ‘img’ after 7.34 ms
[21:12:57] Starting ‘default’…
[21:12:57] Finished ‘default’ after 40 μs
[21:13:01] gulp-imagemin: Minified 1 image (saved 1.48 kB – 11.1%)

OK!

で、何やるのって、sassのコンパイルをgulpで自動化したいのでござる。

sudo npm i -D gulp-imagemin

npmでインストールします。

sudo npm config set strict-ssl false
sudo npm i -D gulp-imagemin
sudo npm config set strict-ssl true

入りました。

gulp 二つのタスクを実行

gulp.task defaultでmsgであとに実行したい処理を書いて、そのgulp, taskでfunctionの前に呼び出す。

var gulp = require('gulp');

gulp.task('html', function(){
	return gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
});

gulp.task('msg', ['html'], function(){
	console.log('hello');
});

gulp.task('default', ['msg']);

[vagrant@localhost front]$ gulp
[20:15:16] Using gulpfile ~/local/front/gulpfile.js
[20:15:16] Starting ‘html’…
[20:15:16] Finished ‘html’ after 14 ms
[20:15:16] Starting ‘msg’…
hello
[20:15:16] Finished ‘msg’ after 40 μs
[20:15:16] Starting ‘default’…
[20:15:16] Finished ‘default’ after 10 μs

ソフトウェアエンジニアの技術ブログ

プルダウンのヘッダーcss

プルダウンのヘッダーが上手くいかねー

headerを作っていく