normalize.cssのcdnを使おう

cdnのページからコピペします。
https://cdnjs.com/libraries/normalize

tpl.php

<head>
  	<meta http-equiv="Content-Type" charset="utf-8">
    <title></title>
    <meta name="description" content="" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="asset/css/style.css">
    <link rel="stylesheet" href="asset/css/main.css">
    <script src=""></script>
  </head>

うむ、なんか良いかも。

テンプレートを作ったら、あとは、body の div > content の中身を作っていきます。
なんだろう、この感じ。。ここにきてちょっとワクワクしてきたぞ。

その前に。。。font-awesomeを入れるか。

テンプレートにコメントを挿入しよう

コードの中にコメントを挿入していきます。

<!-- 共通フッター -->
  	<footer>
  		hpscript
  	</footer>
    <!-- / 共通フッター -->

実際に書いてみると、コメントがあった方がいいのは自明ですね。
共通ヘッダのパスはlaravelのルーティングに併せて設定していきます。

プルダウンのヘッダーcss

相当苦戦したが。。。

#header {
	position: relative;
	height: 45px;
	margin-bottom: 5px;
	font-size: 14px;
}
#header img {
	vertical-align:top;
}
#header h1 {
	float:left;
	font-size: 20px;
	width: 173px;
	margin-top:10px;
	margin-bottom:0px;
}

#header #helpNav {
	position:absolute;
	top:0;
	right:0;
	margin-right: 15px;
}
#header #helpNav li {
	display: inline;
	margin-left: 10px;
}

#gNav {
	margin-top: 0px;
	float: left;
	width: 100%;
	height:45px;
	background-color: #6a5acd;
}
#gNav li.menu__single {
	position: relative;
	display: inline;
	float: left;
	width: 105px;
	height: 45px;
	line-height: 45px;
	padding-left:15px;
	padding-right:15px;
	background-color:#6a5acd;
}
#gNav li.menu__single a {
	display: block;
	color:#fff;
}
#gNav li.menu__single a:hover {
	display: block;
	color:#999;
}
li.menu__single ul.second_level{
	display:none;
}
li.menu__single:hover ul.second_level{
	position: absolute;
	display: inline;
    top: 45px;
    width: 110px;
    padding-left:10px;
    padding-right:10px;
    background: #6a5acd;
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
li.menu__single:hover ul.second_level li{
	display: inline;
	padding-left: 0px;
	font-size:12px;
}

大体やりたいことは実装できた模様♪

さーコンテンツ作っていきますよ!

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

#header {
	position: relative;
	height: 45px;
	margin-bottom: 5px;
	font-size: 14px;
}
#header img {
	vertical-align:top;
}
#header h1 {
	float:left;
	font-size: 20px;
	width: 173px;
	margin-top:10px;
	margin-bottom:0px;
}

#header #helpNav {
	position:absolute;
	top:0;
	right:0;
	margin-right: 15px;
}
#header #helpNav li {
	display: inline;
	margin-left: 10px;
}
#gNav {
	margin-top: 0px;
	float: left;
	width: 100%;
	background-color: #6a5acd;
}
#gNav li {
	position: relative;
	display: inline;
	float: left;
	width: 105px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:15px;
	padding-right:15px;
	background-color:#6a5acd;
}
#gNav li ul {
	position: absolute;
	text-decoration: none;
	top: -999em;
	left: 1px;
	width: 105px;
	padding: 0 0 2px;
	background: #557184;
}
#gNav li a {
	display: block;
	color:#fff;

}
#gNav .hover ul, #gNav li:hover ul {
	top: 18px;
}

#gNav li ul li {
	float: none;
    display: inline;
/*	display: inline;*/
}
#gNav li:hover img,
#gNav .hover img{

}
#gNav li:hover img,
#gNav .hover img{
	visibility: visible;
	margin-left: 10px;
	vertical-align: middle;
}

#gNav li ul li a {
	display: block;
	width: 105px;
	margin: 0 2px;
	padding: 5px 5px 5px 5px;
	background: #7b68ee;
	text-decoration: none;
	border-top: 1px solid #ccc;
	/*color: #C70000;*/
	font-weight: bold;
}
#gNav li ul li a:visited {

}
#gNav li ul li a:hover {
	background-color: #EBF4F6;
}

あかん、これじゃー話になんねー
ドロップダウンの箇所だけやり直しだ

headerを作っていく

まずcssなしの状態

<div id="header">
        <p class="logo"><a href="/"><img src="./src/img/logo.gif" alt="ZEUS" /></a></p>
        <h3>username1</h3>
        <ul id="helpNav">
            <li><a href="/">ホーム</a></li>
            <li><a href="/">ログアウト</a></li>
        </ul>
        <ul>
        <li><a href="/product/">アカウント情報</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/service/">hoge</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/company/">hoge</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/press/">hoge</a></li>
        </ul>
    </div>

さて、これからcssを触っていきます。

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

<!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;
}

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

sassを使っていく

3.5.7が入っています。
[vagrant@localhost front]$ sass -v
Ruby Sass 3.5.7

gemをアップデートします。
$ gem update –system
RubyGems system software updated

$ gem update sass
新しいsassは3.6.0のようですね。

Successfully installed sass-3.6.0

sass

body {
	color: blue;
}

$ sass –watch style.scss:style.css
あれ、gulp必要ない?

login.php

<?php
?>
<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="asset/css/style.css">
    <script src=""></script>
  </head>
  <body>
  	<h1>ログイン画面</h1>
  	<p></p>
  </body>
</html>

sassまではok♪
では、コーディングしていきましょう。

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で自動化したいのでござる。