CSSはハイフン(foo-bar)1、JavaScriptはCamel(fooBar)、Rubyはsnake(foo_bar)文化。
ということで、ハイフンで書いていきます。
<div id="content">
<div id="top-main">
<h2>Zeus</h2>
<p>hogehoge。</p>
</div>
</div>
slackの開発を行う
チャンネルを作っていきます。
チャンネルができました。
web hook用のURLを取得する為に、以下のURLを叩く
https://slack.com/services/new/incoming-webhook
ほうほう、簡単に取得できそうです。
Incoming Webhooks are a simple way to post messages from external sources into Slack. They make use of normal HTTP requests with a JSON payload, which includes the message and a few other optional details described later.
Message Attachments can also be used in Incoming Webhooks to display richly-formatted messages that stand out from regular chat messages.
curl -X POST --data-urlencode "payload={\"channel\": \"#general\", \"username\": \"webhookbot\", \"text\": \"これは webhookbot という名のボットから #general に投稿されています。\", \"icon_emoji\": \":ghost:\"}" https://hooks.slack.com/services/hoge/hoge/hogehoge
vagrantからpostします。
[vagrant@localhost ~]$ curl -X POST –data-urlencode “payload={\”channel\”: \”#general\”, \”username\”: \”webhookbot\”, \”text\”: \”これは webhookbot という名のボットから #general に投稿されています。\”, \”icon_emoji\”: \”:ghost:\”}” https://hooks.slack.com/services/hoge/hoge/hogehoge
ok
通知されました！Wow！素晴らしい！
login画面でfont awesome
<body>
<h1>ZEUS</h1>
<div id="content">
<p>ログイン画面</p>
<form action="" method="post" id="form">
<table>
<tr>
<th><label for="login"><i class="fas fa-id-card-alt"></i> ログインID</label></th>
<td><input type="text" name="login" size="40" placeholder="ログインIDを入力してください"><br>※半角英数字で入力してください</td>
</tr>
<tr>
<th><label for="password"><i class="fas fa-key"></i> パスワード</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>
なるほど、思ったより全然いい感じじゃないっすか～パイセン
font-awesomeを使っていこう
font-awesome公式サイト
https://fontawesome.com/
font-awesome getting started
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
integrityがおかしなことになってる。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>My Page</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> </head> <body> <i class="fas fa-flag"></i> </body> </html>
なんじゃこりゃーーーーーーーーーーー
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;
}
なんだこの雑魚みたいなど素人クオリティーは。。。
すげー自信なくすわ。。ちくしょめえええええええええええええ
とりあえず、ログイン後ページを作るか。。ああ、なんか憂鬱だ。