「30行程度の簡単なCSS作成」へのGullwing2さんの提案（No.1）
Gullwing2さんの提案
提案日時
2019年02月04日 17:40
「30行程度の簡単なCSS作成」への全ての提案
-
7
（退会済み）01/28 11:51 -
6
（退会済み）01/26 23:38 -
5
（退会済み）01/26 23:38 -
4
（退会済み）01/26 23:37
メンバーからのコメント
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>editor</title>
<link rel="stylesheet" type="text/css" href="./init.css">
<script src="http://unpkg.com/vue@2.5.17"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
html, body, h1, h2, h3, h4, h5 {
padding:0;
margin: 0;
}
html{
background-color: #f9f9f9;
}
body{
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
h2{
margin: 15px 0 0 ;
letter-spacing: 2px;
font-size: 30px;
position: relative;
border-bottom: 1px solid #ccc;
}
h2:after {
position: absolute;
bottom: -1px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 1px;
background-color: #003f73;
}
h5{
margin-bottom: 15px;
}
input {
border: solid 1px #ccc;
/*height: 80px;
width: 240px;*/
font-family: Arial, sans-serif;
font-size: 1.0em;
text-transform: lowercase;
/*font-weight: bold;*/
color: #333;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.square_btn{
display: inline-block;
padding: 0.1em 1.5em;
text-decoration: none;
border: solid 1px #222222;
background: #cccccc;
border-radius: 5px;
transition: .4s;
font-size: 20px;
}
.square_btn:hover {
background: #eeeeee;
color: #FFF;
}
.wrapper{
background-color: #f9f9f9;
}
.container{
width: 1220px;
margin: 0 auto;
}
.box{
background-color: #f0f0f0;
padding: 22px;
}
.txt{
font-family: Arial, sans-serif;
font-size: 1.6em;
text-transform: lowercase;
font-weight: bold;
}
.txt span{
position: relative;
left: 3px;
top: -4px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="box">
<div class="txt">
<h2>初期設定</h2><br/>
<h5>ライセンスキーを入力してください</h5>
<form action="/initialize" method="POST">
<input maxlength='4' size='4' name="block1"><span>-</span>
<input maxlength='4' size='4' name="block2"><span>-</span>
<input maxlength='4' size='4' name="block3"><span>-</span>
<input maxlength='4' size='4' name="block4"><span>-</span>
<input maxlength='4' size='4' name="block5"><span>-</span>
<input maxlength='4' size='4' name="block6">
<br/>
<br/>
<input type="submit" value="送信する" class="square_btn">
<input type="button" value="リセット" class="square_btn">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
こちらのソースで表現が可能です。